Berikut adalah contoh membuat game snake :
1. Buat Function Javascript pada file : index.html
<html>
<head>
<title>Snake Inwepo</title>
</head>
<body>
<!-- Halaman Permainan (HTML) -->
<canvas id="gc" width="400" height="400"></canvas>
<script><!-- Script Permainan (Javascript) -->window.onload=function() {//Cari elemen dengan nama ID yang telah di tentukancanv=document.getElementById("gc");//Konteks Kanvas / Halaman Permainanctx=canv.getContext("2d");//Pastikan bahwa program / web menerima input keyboarddocument.addEventListener("keydown",keyPush);//Atur jeda / interval pada permainansetInterval(game,1000/15);}//Atur Konstanta / Ketetapan Awal Pada Permainanpx=py=10;gs=tc=20;ax=ay=15;xv=yv=0;trail=[];tail = 5;function game() {//Atur Batasan (Boundary) Pada Halaman Permainanpx+=xv;py+=yv;if(px<0) {px= tc-1;}if(px>tc-1) {px= 0;}if(py<0) {py= tc-1;}if(py>tc-1) {py= 0;}//Atur Warna Pada Halaman Permainanctx.fillStyle="black";ctx.fillRect(0,0,canv.width,canv.height);//Atur Warna Pada Snakectx.fillStyle="red";for(var i=0;i<trail.length;i++) {ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);if(trail[i].x==px && trail[i].y==py) {tail = 5;}}//Atur Panjang Pada Ekor Snake-nyatrail.push({x:px,y:py});while(trail.length>tail) {trail.shift();}//Jika Snake Memakan Food-nya, Acak Lokasi Food-nyaif(ax==px && ay==py) {tail++;ax=Math.floor(Math.random()*tc);ay=Math.floor(Math.random()*tc);}//Atur Warna Pada Food-nyactx.fillStyle="purple";ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);}//Atur Mekanisme Inputan-nya berdasarkan keyCode-nyafunction keyPush(evt) {switch(evt.keyCode) {//Input Panah Kiricase 37:xv=-1;yv=0;break;//Input Panah Atascase 38:xv=0;yv=-1;break;//Input Panah Kanancase 39:xv=1;yv=0;break;//Input Panah Bawahcase 40:xv=0;yv=1;break;}}</script>
</body>
</html>
Jalankan :
