Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 235 lines (206 sloc) 14.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Snake</title>
<style type="text/css">
body {
background-color: #cdf76f;
}
td {
height: 20px;
width: 20px;
margin: 0;
padding: 0;
}
table {
-moz-border-radius: 0.75em;
border-radius: 0.75em;
background-color: #a5ef00;
border: 4px solid #0d8800;
padding: 5px;
}
.makanan {
background-color: #329d27;
border: 1px solid #329d27;
}
#mainBox {
width: 400px;
margin: 60px auto 0 auto;
}
#bawah {
padding: 5px 12px 5px 12px;
font-family: "DejaVu Sans", Colibri, "Trebuchet MS", Verdana, Sans-serif;
}
#foot {
text-align: center;
font-size: 10px;
}
</style>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>-->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="mainBox">
<div>
<!-- Snake "Table" -->
<table cellpadding="0" cellspacing="0" class="gtable">
<tr id="row-0"><td id="col-0-0">&nbsp;</td><td id="col-0-1">&nbsp;</td><td id="col-0-2">&nbsp;</td><td id="col-0-3">&nbsp;</td><td id="col-0-4">&nbsp;</td><td id="col-0-5">&nbsp;</td><td id="col-0-6">&nbsp;</td><td id="col-0-7">&nbsp;</td><td id="col-0-8">&nbsp;</td><td id="col-0-9">&nbsp;</td><td id="col-0-10">&nbsp;</td><td id="col-0-11">&nbsp;</td><td id="col-0-12">&nbsp;</td><td id="col-0-13">&nbsp;</td><td id="col-0-14">&nbsp;</td><td id="col-0-15">&nbsp;</td><td id="col-0-16">&nbsp;</td><td id="col-0-17">&nbsp;</td></tr>
<tr id="row-1"><td id="col-1-0">&nbsp;</td><td id="col-1-1">&nbsp;</td><td id="col-1-2">&nbsp;</td><td id="col-1-3">&nbsp;</td><td id="col-1-4">&nbsp;</td><td id="col-1-5">&nbsp;</td><td id="col-1-6">&nbsp;</td><td id="col-1-7">&nbsp;</td><td id="col-1-8">&nbsp;</td><td id="col-1-9">&nbsp;</td><td id="col-1-10">&nbsp;</td><td id="col-1-11">&nbsp;</td><td id="col-1-12">&nbsp;</td><td id="col-1-13">&nbsp;</td><td id="col-1-14">&nbsp;</td><td id="col-1-15">&nbsp;</td><td id="col-1-16">&nbsp;</td><td id="col-1-17">&nbsp;</td></tr>
<tr id="row-2"><td id="col-2-0">&nbsp;</td><td id="col-2-1">&nbsp;</td><td id="col-2-2">&nbsp;</td><td id="col-2-3">&nbsp;</td><td id="col-2-4">&nbsp;</td><td id="col-2-5">&nbsp;</td><td id="col-2-6">&nbsp;</td><td id="col-2-7">&nbsp;</td><td id="col-2-8">&nbsp;</td><td id="col-2-9">&nbsp;</td><td id="col-2-10">&nbsp;</td><td id="col-2-11">&nbsp;</td><td id="col-2-12">&nbsp;</td><td id="col-2-13">&nbsp;</td><td id="col-2-14">&nbsp;</td><td id="col-2-15">&nbsp;</td><td id="col-2-16">&nbsp;</td><td id="col-2-17">&nbsp;</td></tr>
<tr id="row-3"><td id="col-3-0">&nbsp;</td><td id="col-3-1">&nbsp;</td><td id="col-3-2">&nbsp;</td><td id="col-3-3">&nbsp;</td><td id="col-3-4">&nbsp;</td><td id="col-3-5">&nbsp;</td><td id="col-3-6">&nbsp;</td><td id="col-3-7">&nbsp;</td><td id="col-3-8">&nbsp;</td><td id="col-3-9">&nbsp;</td><td id="col-3-10">&nbsp;</td><td id="col-3-11">&nbsp;</td><td id="col-3-12">&nbsp;</td><td id="col-3-13">&nbsp;</td><td id="col-3-14">&nbsp;</td><td id="col-3-15">&nbsp;</td><td id="col-3-16">&nbsp;</td><td id="col-3-17">&nbsp;</td></tr>
<tr id="row-4"><td id="col-4-0">&nbsp;</td><td id="col-4-1">&nbsp;</td><td id="col-4-2">&nbsp;</td><td id="col-4-3">&nbsp;</td><td id="col-4-4">&nbsp;</td><td id="col-4-5">&nbsp;</td><td id="col-4-6">&nbsp;</td><td id="col-4-7">&nbsp;</td><td id="col-4-8">&nbsp;</td><td id="col-4-9">&nbsp;</td><td id="col-4-10">&nbsp;</td><td id="col-4-11">&nbsp;</td><td id="col-4-12">&nbsp;</td><td id="col-4-13">&nbsp;</td><td id="col-4-14">&nbsp;</td><td id="col-4-15">&nbsp;</td><td id="col-4-16">&nbsp;</td><td id="col-4-17">&nbsp;</td></tr>
<tr id="row-5"><td id="col-5-0">&nbsp;</td><td id="col-5-1">&nbsp;</td><td id="col-5-2">&nbsp;</td><td id="col-5-3">&nbsp;</td><td id="col-5-4">&nbsp;</td><td id="col-5-5">&nbsp;</td><td id="col-5-6">&nbsp;</td><td id="col-5-7">&nbsp;</td><td id="col-5-8">&nbsp;</td><td id="col-5-9">&nbsp;</td><td id="col-5-10">&nbsp;</td><td id="col-5-11">&nbsp;</td><td id="col-5-12">&nbsp;</td><td id="col-5-13">&nbsp;</td><td id="col-5-14">&nbsp;</td><td id="col-5-15">&nbsp;</td><td id="col-5-16">&nbsp;</td><td id="col-5-17">&nbsp;</td></tr>
<tr id="row-6"><td id="col-6-0">&nbsp;</td><td id="col-6-1">&nbsp;</td><td id="col-6-2">&nbsp;</td><td id="col-6-3">&nbsp;</td><td id="col-6-4">&nbsp;</td><td id="col-6-5">&nbsp;</td><td id="col-6-6">&nbsp;</td><td id="col-6-7">&nbsp;</td><td id="col-6-8">&nbsp;</td><td id="col-6-9">&nbsp;</td><td id="col-6-10">&nbsp;</td><td id="col-6-11">&nbsp;</td><td id="col-6-12">&nbsp;</td><td id="col-6-13">&nbsp;</td><td id="col-6-14">&nbsp;</td><td id="col-6-15">&nbsp;</td><td id="col-6-16">&nbsp;</td><td id="col-6-17">&nbsp;</td></tr>
<tr id="row-7"><td id="col-7-0">&nbsp;</td><td id="col-7-1">&nbsp;</td><td id="col-7-2">&nbsp;</td><td id="col-7-3">&nbsp;</td><td id="col-7-4">&nbsp;</td><td id="col-7-5">&nbsp;</td><td id="col-7-6">&nbsp;</td><td id="col-7-7">&nbsp;</td><td id="col-7-8">&nbsp;</td><td id="col-7-9">&nbsp;</td><td id="col-7-10">&nbsp;</td><td id="col-7-11">&nbsp;</td><td id="col-7-12">&nbsp;</td><td id="col-7-13">&nbsp;</td><td id="col-7-14">&nbsp;</td><td id="col-7-15">&nbsp;</td><td id="col-7-16">&nbsp;</td><td id="col-7-17">&nbsp;</td></tr>
<tr id="row-8"><td id="col-8-0">&nbsp;</td><td id="col-8-1">&nbsp;</td><td id="col-8-2">&nbsp;</td><td id="col-8-3">&nbsp;</td><td id="col-8-4">&nbsp;</td><td id="col-8-5">&nbsp;</td><td id="col-8-6">&nbsp;</td><td id="col-8-7">&nbsp;</td><td id="col-8-8">&nbsp;</td><td id="col-8-9">&nbsp;</td><td id="col-8-10">&nbsp;</td><td id="col-8-11">&nbsp;</td><td id="col-8-12">&nbsp;</td><td id="col-8-13">&nbsp;</td><td id="col-8-14">&nbsp;</td><td id="col-8-15">&nbsp;</td><td id="col-8-16">&nbsp;</td><td id="col-8-17">&nbsp;</td></tr>
<tr id="row-9"><td id="col-9-0">&nbsp;</td><td id="col-9-1">&nbsp;</td><td id="col-9-2">&nbsp;</td><td id="col-9-3">&nbsp;</td><td id="col-9-4">&nbsp;</td><td id="col-9-5">&nbsp;</td><td id="col-9-6">&nbsp;</td><td id="col-9-7">&nbsp;</td><td id="col-9-8">&nbsp;</td><td id="col-9-9">&nbsp;</td><td id="col-9-10">&nbsp;</td><td id="col-9-11">&nbsp;</td><td id="col-9-12">&nbsp;</td><td id="col-9-13">&nbsp;</td><td id="col-9-14">&nbsp;</td><td id="col-9-15">&nbsp;</td><td id="col-9-16">&nbsp;</td><td id="col-9-17">&nbsp;</td></tr>
<tr id="row-10"><td id="col-10-0">&nbsp;</td><td id="col-10-1">&nbsp;</td><td id="col-10-2">&nbsp;</td><td id="col-10-3">&nbsp;</td><td id="col-10-4">&nbsp;</td><td id="col-10-5">&nbsp;</td><td id="col-10-6">&nbsp;</td><td id="col-10-7">&nbsp;</td><td id="col-10-8">&nbsp;</td><td id="col-10-9">&nbsp;</td><td id="col-10-10">&nbsp;</td><td id="col-10-11">&nbsp;</td><td id="col-10-12">&nbsp;</td><td id="col-10-13">&nbsp;</td><td id="col-10-14">&nbsp;</td><td id="col-10-15">&nbsp;</td><td id="col-10-16">&nbsp;</td><td id="col-10-17">&nbsp;</td></tr>
<tr id="row-11"><td id="col-11-0">&nbsp;</td><td id="col-11-1">&nbsp;</td><td id="col-11-2">&nbsp;</td><td id="col-11-3">&nbsp;</td><td id="col-11-4">&nbsp;</td><td id="col-11-5">&nbsp;</td><td id="col-11-6">&nbsp;</td><td id="col-11-7">&nbsp;</td><td id="col-11-8">&nbsp;</td><td id="col-11-9">&nbsp;</td><td id="col-11-10">&nbsp;</td><td id="col-11-11">&nbsp;</td><td id="col-11-12">&nbsp;</td><td id="col-11-13">&nbsp;</td><td id="col-11-14">&nbsp;</td><td id="col-11-15">&nbsp;</td><td id="col-11-16">&nbsp;</td><td id="col-11-17">&nbsp;</td></tr>
<tr id="row-12"><td id="col-12-0">&nbsp;</td><td id="col-12-1">&nbsp;</td><td id="col-12-2">&nbsp;</td><td id="col-12-3">&nbsp;</td><td id="col-12-4">&nbsp;</td><td id="col-12-5">&nbsp;</td><td id="col-12-6">&nbsp;</td><td id="col-12-7">&nbsp;</td><td id="col-12-8">&nbsp;</td><td id="col-12-9">&nbsp;</td><td id="col-12-10">&nbsp;</td><td id="col-12-11">&nbsp;</td><td id="col-12-12">&nbsp;</td><td id="col-12-13">&nbsp;</td><td id="col-12-14">&nbsp;</td><td id="col-12-15">&nbsp;</td><td id="col-12-16">&nbsp;</td><td id="col-12-17">&nbsp;</td></tr>
<tr id="row-13"><td id="col-13-0">&nbsp;</td><td id="col-13-1">&nbsp;</td><td id="col-13-2">&nbsp;</td><td id="col-13-3">&nbsp;</td><td id="col-13-4">&nbsp;</td><td id="col-13-5">&nbsp;</td><td id="col-13-6">&nbsp;</td><td id="col-13-7">&nbsp;</td><td id="col-13-8">&nbsp;</td><td id="col-13-9">&nbsp;</td><td id="col-13-10">&nbsp;</td><td id="col-13-11">&nbsp;</td><td id="col-13-12">&nbsp;</td><td id="col-13-13">&nbsp;</td><td id="col-13-14">&nbsp;</td><td id="col-13-15">&nbsp;</td><td id="col-13-16">&nbsp;</td><td id="col-13-17">&nbsp;</td></tr>
<tr id="row-14"><td id="col-14-0">&nbsp;</td><td id="col-14-1">&nbsp;</td><td id="col-14-2">&nbsp;</td><td id="col-14-3">&nbsp;</td><td id="col-14-4">&nbsp;</td><td id="col-14-5">&nbsp;</td><td id="col-14-6">&nbsp;</td><td id="col-14-7">&nbsp;</td><td id="col-14-8">&nbsp;</td><td id="col-14-9">&nbsp;</td><td id="col-14-10">&nbsp;</td><td id="col-14-11">&nbsp;</td><td id="col-14-12">&nbsp;</td><td id="col-14-13">&nbsp;</td><td id="col-14-14">&nbsp;</td><td id="col-14-15">&nbsp;</td><td id="col-14-16">&nbsp;</td><td id="col-14-17">&nbsp;</td></tr>
<tr id="row-15"><td id="col-15-0">&nbsp;</td><td id="col-15-1">&nbsp;</td><td id="col-15-2">&nbsp;</td><td id="col-15-3">&nbsp;</td><td id="col-15-4">&nbsp;</td><td id="col-15-5">&nbsp;</td><td id="col-15-6">&nbsp;</td><td id="col-15-7">&nbsp;</td><td id="col-15-8">&nbsp;</td><td id="col-15-9">&nbsp;</td><td id="col-15-10">&nbsp;</td><td id="col-15-11">&nbsp;</td><td id="col-15-12">&nbsp;</td><td id="col-15-13">&nbsp;</td><td id="col-15-14">&nbsp;</td><td id="col-15-15">&nbsp;</td><td id="col-15-16">&nbsp;</td><td id="col-15-17">&nbsp;</td></tr>
<tr id="row-16"><td id="col-16-0">&nbsp;</td><td id="col-16-1">&nbsp;</td><td id="col-16-2">&nbsp;</td><td id="col-16-3">&nbsp;</td><td id="col-16-4">&nbsp;</td><td id="col-16-5">&nbsp;</td><td id="col-16-6">&nbsp;</td><td id="col-16-7">&nbsp;</td><td id="col-16-8">&nbsp;</td><td id="col-16-9">&nbsp;</td><td id="col-16-10">&nbsp;</td><td id="col-16-11">&nbsp;</td><td id="col-16-12">&nbsp;</td><td id="col-16-13">&nbsp;</td><td id="col-16-14">&nbsp;</td><td id="col-16-15">&nbsp;</td><td id="col-16-16">&nbsp;</td><td id="col-16-17">&nbsp;</td></tr>
<tr id="row-17"><td id="col-17-0">&nbsp;</td><td id="col-17-1">&nbsp;</td><td id="col-17-2">&nbsp;</td><td id="col-17-3">&nbsp;</td><td id="col-17-4">&nbsp;</td><td id="col-17-5">&nbsp;</td><td id="col-17-6">&nbsp;</td><td id="col-17-7">&nbsp;</td><td id="col-17-8">&nbsp;</td><td id="col-17-9">&nbsp;</td><td id="col-17-10">&nbsp;</td><td id="col-17-11">&nbsp;</td><td id="col-17-12">&nbsp;</td><td id="col-17-13">&nbsp;</td><td id="col-17-14">&nbsp;</td><td id="col-17-15">&nbsp;</td><td id="col-17-16">&nbsp;</td><td id="col-17-17">&nbsp;</td></tr>
</table>
</div>
<div id="bawah">
Score: <span id="score"></span> |
<span><a href="javascript:;" id="start">Start</a></span>
<div id="gameover"></div>
<div id="foot">W: Atas; A: Kiri; S: Bawah; D: Kanan; X: 2.5x Speed / Normal Speed<br/>
Copyright &copy; 2010 Inov</div>
</div>
</div>
<script type="text/javascript">
var segmen = 5;
var i
var j = 'kanan';
var gameover = 1;
var tfunc;
var score = 0;
var xMakan = 0;
var yMakan = 0;
var x = new Array();
var y = new Array();
var v = 250;
x[0] = 0;
y[0] = 0;
function tebarMakanan () {
xMakan = Math.floor(Math.random()*15);
yMakan = Math.floor(Math.random()*15);
/* tebar makanan pada tempat yang masih kosong */
for (i = 0; i <= segmen; i++) {
if ( (xMakan == x[i]) && (yMakan == y[i]) ) {
xMakan = Math.floor(Math.random()*15);
yMakan = Math.floor(Math.random()*15);
i = 0;
}
}
$('#col-'+yMakan+'-'+xMakan).addClass('makanan').css('background-color', '#329D27');
}
function jalan(arah) {
for (i = segmen; i > 0; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}
switch (arah) {
case 'kanan' : x[0] += 1;
break;
case 'kiri' : x[0] -= 1;
break;
case 'atas' : y[0] -= 1;
break;
case 'bawah' : y[0] += 1;
break;
}
/* kepala segmen kena makanan */
if ((x[0] == xMakan) && (y[0] == yMakan)) {
$('.makanan').removeClass('makanan');
tebarMakanan();
segmen++; // segmen bertambah 1
score += 100;
$("#score").html (''+score);
}
/* kepala segmen kena segmen lain */
for (i = 1; i <= segmen; i++) {
if ( (x[0] == x[i]) && (y[0] == y[i]) ) {
gameover = 1;
}
}
$('#col-'+y[segmen]+'-'+x[segmen]).removeClass('col-head').css('background-color', '#A5EF00');
for (i = segmen-1; i > 0; i--) {
$('#col-'+y[i]+'-'+x[i]).removeClass('col-head').css('background-color', '#8AB32D');
}
$('#col-'+y[0]+'-'+x[0]).addClass('col-head').css('background-color', '#6B9B00');
/* kepala segmen keluar dari batas */
if ( (x[0] < 0) || (x[0] > 17) || (y[0] < 0) || (y[0] > 17) ) {
gameover = 1;
}
if (!gameover) {
tfunc = setTimeout("jalan('"+arah+"')",v);
} else {
$("#gameover").html ('Game Over!');
clearTimeout(tfunc);
}
}
$(document).keypress(function(event) {
if ( !gameover ) {
switch (event.which) {
case 119: // W & w
case 87:
if ( (j!='atas') && (j!='bawah') ) {
clearTimeout(tfunc);
jalan('atas');
}
j = 'atas';
break;
case 97: // A & a
case 65:
if ( (j!='kiri') && (j!='kanan') ) {
clearTimeout(tfunc);
jalan('kiri');
}
j = 'kanan';
break;
case 115: // S & s
case 83:
if ( (j!='bawah') && (j!='atas') ) {
clearTimeout(tfunc);
jalan('bawah');
}
j = 'bawah';
break;
case 100: // D & d
case 63:
if ( (j!='kanan') && (j!='kiri') ) {
clearTimeout(tfunc);
jalan('kanan');
}
j = 'kanan';
break;
case 120:
case 88:
(v == 100) ? v = 250 : v = 100;
break;
case 109:
clearTimeout(tfunc);
break;
}
}
});
$('#start').click (function () {
if ($(this).html() == 'Start') {
gameover = 0;
tebarMakanan();
jalan('kanan');
$('#start').html('Refresh');
} else {
location.reload();
}
});
$("#score").html(''+score);
</script>
</body>
</html>
Something went wrong with that request. Please try again.