Kabur - simple game menggunakan jQuery

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>