Kabur - Permainan Sederhana Menggunakan jQuery ~ Muh. Syukron Nurma Aliyafi

Assalamualaikum wr. wb
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.
Sesuai namanya, harus kabur.

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

Source Codenya:

Code:

<html>
<head>
<title>Fauzi Topan Ganteng</title>

<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.

Courtesy Of Fauzi Topan

Muh. Syukron Nurma Aliyafi

Pengunjung

Facebook

Followers

Text Widget

Mengenai Saya

Peta Dunia

Like This yo....

Minggu, 04 Maret 2012