Threaded Mode | Linear Mode

Fauzi Topan · (This post was last modified: 12-21-2011 10:33 PM by Fauzi Topan.)

Assalamualaikum wr. wb

Lanjutin thread saya belajar jquery disini
http://devilzc0de.org/forum/thread-11569.html

Saya coba coba lagi buat sebuah game, cara mainnya mudah, kamu cuma harus menghindar dari pesawat yang lalu lalang.

Saya beri nama game ini Kabur ketawa

Sesuai namanya, harus kabur.

[Image: fdai4i.jpg]

Coba dilihat ya kang...
Gamenya ada disini:
http://fauzi.net84.net/js/kabur.html

Source Codenya:

Code:

<html>

<head>

<title>Fauzi Topan Ganteng</title>

<!--

    Kabur ver 0.1

    Fauzi Topan

-->

<style type="text/css">

*{

font-size:10px;

font-family: Tahoma, Verdana, Arial;

}

body{

background:#000;

overflow:hidden;

color:#fff;

padding:8px;

}

#jagoan{

position:absolute;

top:0px;

left:0px;

height:50px;

width:50px;

background:#fff;

border-radius:25px;

box-shadow:0px 0px 10px #fff;

display:none;

}

.musuh{

background: url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_animation_by_dutchie17.gif) no-repeat;

height:45px;

width:45px;

position:absolute;

top:0px;

left:800px;

}

#area{

width:100%;

height:100%;

background:#080808;

border:1px solid #666;

}

#debug{

position:absolute;

bottom:0px;

width:100%;

height:10%;

padding:10px;

}

#crash, #time{

font-size:37px;

color:#08f;

padding:0 13px;

float:right;

}

#scorebox{

position:absolute;

background:#080808;

width:60%;

color:#08f;

padding:10px 20px;

border-radius:30px;

border:1px solid #444;

text-align:center;

}

#scorebox p{

font-size:37px;

margin:0 0 18px 0;

padding:0;

}

.restart{

background:#111;

padding:8px 18px;

font-size:15px;

border-radius:10px;

}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

musuhx = new Array();

musuhy = new Array();

jagoanx = 0;

jagoany = 0;

jarakx = new Array();

jaraky = new Array();

a = new Array();

b = new Array();

batas_kiri = 0;

batas_kanan = 0;

batas_atas = 0;

batas_bawah = 0;

max_musuh = 100;

xd = new Array();

yd = new Array();

animtimer = new Array();

max_crash = 3;

crash = max_crash;

hit = new Array();

i = 0;

time = 0;

ticktimer = 0;

area_width = 0;

area_height = 0;

$(document).ready(function(){

    $(window).resize(function() {

        area_width = parseInt($('#area').width());

        area_height = parseInt($('#area').height());

        var pos = $('#area').position();

        batas_kiri = pos.left + 8;

        batas_atas = pos.top + 8;

        batas_kanan = batas_kiri + area_width - 16 - 30;

        batas_bawah = batas_atas + area_height - 8 - 30;

    });

    $(document).bind("mousemove", function(e){

        jagoanx = e.pageX;

        jagoany = e.pageY;

        $('#jagoan').css({

            left : jagoanx - 25,

            top: jagoany - 25

        });

    });

    init();

});

function init(){

    i = 0;

    time = 0;

    crash = max_crash;

    $('#crash').html(crash);

    $('#jagoan').css('display', 'block');

    area_width = parseInt($('#area').width());

    area_height = parseInt($('#area').height());

    var pos = $('#area').position();

    batas_kiri = pos.left + 8;

    batas_atas = pos.top + 8;

    batas_kanan = batas_kiri + area_width - 16 - 30;

    batas_bawah = batas_atas + area_height - 8 - 30;

    auto_create();

    ticktimer = setInterval('tick()',1000);

}

function auto_create(){

    if(i<max_musuh){

        create_enemy(i++);

        setTimeout("auto_create()", 3000);

    }

}

function tick(){

    time++;

    var score = Math.floor((i * time / ($(document).height()*$(document).width()))*100000);

    $('#time').html(score);

}

function create_enemy(i){

    musuhx[i] = jagoanx + Math.floor(Math.random()*area_width) + 100;

    musuhy[i] = jagoany + Math.floor(Math.random()*area_height) + 100;

    jarakx[i] = Math.floor(Math.random()*55);

    jaraky[i] = Math.floor(Math.random()*55);

    a[i] = jarakx[i];

    b[i] = jaraky[i];

    xd[i] = "kiri";

    yd[i] = "bawah";

    animtimer[i] = 0;

    hit[i] = false;

    $('#area').append("<div class=\"musuh musuh" + i +"\"></div>");

    animasi('.musuh'+i,i);

}

function animasi(what, index){

    musuhx[index] = musuhx[index] + a[index];

    musuhy[index] = musuhy[index] + b[index];

    var kena = '';

    var selisihx = Math.abs((musuhx[index]) - (jagoanx-25));

    var selisihy = Math.abs((musuhy[index]) - (jagoany-25));

    if(!hit[index]){

        if((selisihx < 45) && (selisihy < 45)){

            hit[index] = true;

            kena = ' [ KENA ]';

            $(what).css({'background-image': 'url(http://bestanimations.com/Military/Explosions/Explode-04-june.gif)',

                'height':'75',

                'width':'100'

            });

            $(what).fadeOut('slow', function(){

                $(what).css({'background-image': 'url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_animation_by_dutchie17.gif)',

                    'height':'45',

                    'width':'45',

                });

                musuhx[index] = jagoanx + Math.floor(Math.random()*area_width);

                musuhy[index] = jagoany + Math.floor(Math.random()*area_height);

                gerak(what, musuhx[index], musuhy[index]);

                crash--;

                $('#crash').html(crash);

                $(what).fadeIn('slow');

                hit[index] = false;

            });

        }                    

    }

    if(crash <= 0){

        for(z=0;z<=animtimer.length;z++){

            clearTimeout(animtimer[z]);

        }

        clearInterval(ticktimer);

        showscore();

        i = max_musuh;

    }

    else{

        animtimer[index] = setTimeout("animasi(\'"+what+"\',"+index+")",100);    

    }

    gerak(what, musuhx[index], musuhy[index]);

    var debug_text = '';

    debug_text += 'Time = ' + time + ' Enemies = ' + i + '<br>';

    debug_text += 'X = ' + jagoanx + ' Y = ' + jagoany;

    debug_text += '<br>Left = ' + batas_kiri + ' Top = ' + batas_atas + ' Right = ' + batas_kanan + ' Bottom = ' + batas_bawah;

    debug(debug_text);

    if(xd[index]=="kiri"){

        a[index] = -jarakx[index];

        if(musuhx[index]<batas_kiri){

            xd[index] = "kanan";

        }

    }

    else if(xd[index]!="kiri"){

        a[index] = jarakx[index];

        if(musuhx[index]>batas_kanan){

            xd[index] = "kiri";

        }

    }

    if(yd[index]=="bawah"){

        b[index] = jaraky[index];

        if(musuhy[index]>batas_bawah){

            yd[index] = "atas";

        }

    }

    else if(yd[index]!="bawah"){

        b[index] = -jaraky[index];

        if(musuhy[index]<batas_atas){

            yd[index] = "bawah";

        }

    }

}

function restart(){

    init();

    $('.musuh').remove();

    $('#scorebox').remove();

}

function showscore(){

    var score = parseInt($('#time').html());

    var scorebox = '<div id=\"scorebox\">';

    scorebox += '<p>Your score : ' + score + '</p>';

    scorebox += '<p><span class=\"restart\" onclick=\"restart();\">Restart</span></p>';

    scorebox += '</div>';

    $('#area').append(scorebox);

    var posx = (($('#area').width()-$('#scorebox').width())/2)+8;

    var posy = (($('#area').height()-$('#scorebox').height())/2)+8;

    $('#scorebox').css({

        'left': posx,

        'top': posy

    });

}

function gerak(siapa, x, y){

    $(siapa).css({

      left: x,

      top: y    

    });

}

function debug(str){

    $('#stat').html(str + '<br />');

}

</script>

</head>

<body>

<div id="area"><div id="time">0</div><div id="crash">0</div>

<div id="jagoan"></div>

</div>

<div id="debug">

<table style="width:100%;"><tbody>

<tr>

<td><div id="stat"></div></td>

</tr>

</tbody></table>

</div>

</body>

</html>

*Codingnya belum sempet dirapihin dan diberikan dokumentasi, masih murni bekasan kodingan malam-malam ngantuk

Ditunggu saran dan kritiknya, Source code boleh di ambil dan di modifikasi sesuka hati.

.thx

Ayo siapa yang scorenya paling besar ketawa

***./ rex*** · 12-21-2011, 10:37 PM

wedew game nya mantap

keren

Fauzi Topan · 12-21-2011, 10:39 PM

(12-21-2011 10:37 PM)./ rex Wrote: wedew game nya keren

Makasih kang.. Masih baru jadi batangnya kang, daun sama ranting2 pohonnya belum

tabun · 12-21-2011, 10:43 PM

bener2 deh kang fauzi.. mantap

klo dikembangin bisa tersaing tuh game2 yg top.. smangat

Fauzi Topan · 12-21-2011, 10:46 PM

(12-21-2011 10:43 PM)tabun Wrote: bener2 deh kang fauzi..
klo dikembangin bisa tersaing tuh game2 yg top..

Terima kasih kang...
tapi saya yang buat gamenya, high score cuma 86 dead

***schumbag*** · 12-21-2011, 10:56 PM

fauzi fauzi kamu hebat banget smangat

fauzi yang kamu pokoknya beneraaaaannnnn pinter mantap

aku pengen banget belajar jQuery sama kamu,soalnya aku memang blom pernah melajarin malu

cendol deh buat kamyuuu love

Fauzi Topan · 12-21-2011, 11:02 PM

(12-21-2011 10:56 PM)schumbag Wrote: fauzi fauzi kamu hebat banget fauzi yang kamu pokoknya beneraaaaannnnn pinter
aku pengen banget belajar jQuery sama kamu,soalnya aku memang blom pernah melajarin
cendol deh buat kamyuuu

Terima kasih kang. Boleh yuk kang kita belajar jQuery bersama.
Coba diutak atik source code nya kang asik

noe · 12-22-2011, 03:29 AM

dapet 5 aje hahahaha ngakak

Rev Aris · 12-22-2011, 05:32 AM

game nya dari jquery yah
keren om
mantap

ade yonatan · 12-22-2011, 09:30 AM

keren banget bang cuma skornya ga singkron ,... so maju terus bang

ane dukung sambil nimpuk aja

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	[HOT] buat pengumuman kelulusan sekolah dengan jquery	chibi	12	1,996	04-28-2012 09:25 AM Last Post: Super Moderator
	[Tutor] jQuery slideDown Guestbook	ditatompel	19	1,617	04-09-2012 04:24 PM Last Post: jackerp
	[Tutor] Membuat Twitter AJAX Hash URI dengan jQuery	ditatompel	7	641	04-04-2012 11:56 PM Last Post: KillerByte
	Animasi Hujan Karakter (jQuery)	Fauzi Topan	15	1,829	02-28-2012 06:48 PM Last Post: seva
	[Tutor] [dark&plonk][jquery]Mengenal Jquery	darkslayer	10	1,135	01-21-2012 04:53 PM Last Post: vikrymadz
	Pesawat-pesawatan di jquery	Fauzi Topan	11	1,154	12-30-2011 01:12 PM Last Post: The.shadow
	[jQuery & PHP] YM! Spy	ditatompel	9	2,423	09-18-2011 11:58 AM Last Post: chaer.newbie
	jquery-ui	supermenganteng	24	3,884	08-26-2011 02:30 PM Last Post: autocrack