<!DOCTYPEhtml>
<html>
<head>
//menghubungkan html dengan jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Membuat Game Snake Dengan HTML5 dan JQuery</title>
</head>
<body>
<canvas id="ruang"width="500"height="500"></canvas>
<script type="text/javascript">
$(document).ready(function(){
// deklarasi
var ruang=$("#ruang")[0];
var ctx=ruang.getContext("2d");
var lebar= $("#ruang").width();
var tinggi=$("#ruang").height();
var cw=10;
var tekan;
var makanan;
var nilai;
//membuat cell aray untuk membuat ular
var array_ular;
function init(){
tekan="right";//default direction
create_snake();
create_makanan();//membuat makanan untuk ular
//nilai game
nilai= 0;
if(typeofgame_loop!="undefined")clearInterval(game_loop);
game_loop= setInterval(paint,60);
}
init();
// membuat ular
function create_snake(){
// menetapkan jumlah panjang awal ular
var length=5;//panjang ular default
array_ular =[];
for(vari=length-1;i>=0;i--){
//membuat ular horizontal mulai dari arah kiri
array_ular.push({x:i,y:0});
}
}
//membuat makanan untuk ular
function create_makanan(){
makanan={
x: Math.round(Math.random()*(lebar-cw)/cw),
y: Math.round(Math.random()*(tinggi-cw)/cw)
};
}
//pengaturan
function paint(){
// warna background
ctx.fillStyle= "#ecf0f1";
ctx.fillRect(0,0,lebar,tinggi);
ctx.strokeStyle ="#2c3e50";
ctx.strokeRect(0,0,lebar,tinggi);
//membuat pergerakan untuk ular
var nx=array_ular[0].x;
var ny=array_ular[0].y;
if (tekan=="right")nx++;
else if(tekan=="left")nx--;
else if(tekan=="up")ny--;
else if(tekan=="down")ny++;
//memeriksa tabrakan
if(
nx==-1||
nx ==lebar/cw||
ny==-1||
ny==tinggi /cw||
cek_tabrakan(nx,ny,array_ular)
){
//restart game
init();
return;
}
//cek jika ular kena makanan/memakan makanan
if(nx==makanan.x&& ny == makanan.y){
var ekor = { x: nx, y: ny };
nilai++;
//membuat makanan yang baru
create_makanan();
}else{
var ekor=array_ular.pop();
ekor.x=nx;
ekor.y =ny;
}
array_ular.unshift(ekor);
for(var i=0;i<array_ular.length;i++){
varc=array_ular[i];
paint_cell(c.x, c.y);
}
paint_cell(makanan.x,makanan.y);
//membuat penilaian skor
var nilai_text="nilai: "+nilai;
ctx.fillText(nilai_text,5, tinggi-5);
}
function paint_cell(x,y){
ctx.fillStyle ="#1abc9c";
ctx.fillRect(x*cw,y*cw,cw,cw);
ctx.strokeStyle ="#ecf0f1";
ctx.strokeRect(x*cw,y*cw,cw,cw);
}
function cek_tabrakan(x,y,array){
for(vari=0;i<array.length; i++){
if(array[i].x==x&& array[i].y == y) return true;
}
return false;
}
//kontrol ular dengan keyboard
$(document).keydown(function(e){
var key=e.which;
if(key=="37"&& tekan != "right") tekan = "left";
else if(key=="38"&& tekan != "down") tekan = "up";
else if(key=="39"&& tekan != "left") tekan = "right";
else if(key=="40"&& tekan != "up") tekan = "down";
});
});
</script>
</body>
</html>