Javascript merupakan salah satu bahasa pemrograman website yang seringkali digunakan secara mandiri atau standalone. Banyak permainan berbasis web, lebih memfokuskan diri pada penggunaan bahasa pemrograman Javascript sebagai engine atau mekanisme permainan. Salah satunya ialah permainan sederhana bernama Snake.
Pada artikel kali ini, kita akan membuat permainan Snake menggunakan bahasa pemrograman Javascript.
Sebelumnya, persiapkan text editor (Notepad, Sublime Text, dan sebagainya) untuk pembuatan permainan.
Langkah:
1. Buka Notepad di Laptop atau PC kamu. Masukkan script berikut:
<html> <head> <title>Snake Inwepo</title> </head> <body> </body> </html>
2. Pada bagian <body> , masukkan script berikut:
<!-- Halaman Permainan (HTML) --> <canvas id="gc" width="400" height="400"></canvas> <script> </script>
Sehingga, nantinya bagian <body> akan memiliki struktur sebagai berikut:
<body> <!-- Halaman Permainan (HTML) --> <canvas id="gc" width="400" height="400"></canvas> <script> </script> </body>
3. Pada bagian <script> , masukkan script berikut:
<!-- Script Permainan (Javascript) -->
window.onload=function() {
//Cari elemen dengan nama ID yang telah di tentukan
canv=document.getElementById("gc");
//Konteks Kanvas / Halaman Permainan
ctx=canv.getContext("2d");
//Pastikan bahwa program / web menerima input keyboard
document.addEventListener("keydown",keyPush);
//Atur jeda / interval pada permainan
setInterval(game,1000/15);
}
//Atur Konstanta / Ketetapan Awal Pada Permainan
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
//Atur Batasan (Boundary) Pada Halaman Permainan
px+=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 Permainan
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
//Atur Warna Pada Snake
ctx.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-nya
trail.push({x:px,y:py});
while(trail.length>tail) {
trail.shift();
}
//Jika Snake Memakan Food-nya, Acak Lokasi Food-nya
if(ax==px && ay==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}
//Atur Warna Pada Food-nya
ctx.fillStyle="purple";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
//Atur Mekanisme Inputan-nya berdasarkan keyCode-nya
function keyPush(evt) {
switch(evt.keyCode) {
//Input Panah Kiri
case 37:
xv=-1;yv=0;
break;
//Input Panah Atas
case 38:
xv=0;yv=-1;
break;
//Input Panah Kanan
case 39:
xv=1;yv=0;
break;
//Input Panah Bawah
case 40:
xv=0;yv=1;
break;
}
}
Sehingga, nantinya bagian <script> akan memiliki struktur sebagai berikut:
<script>
<!-- Script Permainan (Javascript) -->
window.onload=function() {
//Cari elemen dengan nama ID yang telah di tentukan
canv=document.getElementById("gc");
//Konteks Kanvas / Halaman Permainan
ctx=canv.getContext("2d");
//Pastikan bahwa program / web menerima input keyboard
document.addEventListener("keydown",keyPush);
//Atur jeda / interval pada permainan
setInterval(game,1000/15);
}
//Atur Konstanta / Ketetapan Awal Pada Permainan
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
//Atur Batasan (Boundary) Pada Halaman Permainan
px+=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 Permainan
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
//Atur Warna Pada Snake
ctx.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-nya
trail.push({x:px,y:py});
while(trail.length>tail) {
trail.shift();
}
//Jika Snake Memakan Food-nya, Acak Lokasi Food-nya
if(ax==px && ay==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}
//Atur Warna Pada Food-nya
ctx.fillStyle="purple";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
//Atur Mekanisme Inputan-nya berdasarkan keyCode-nya
function keyPush(evt) {
switch(evt.keyCode) {
//Input Panah Kiri
case 37:
xv=-1;yv=0;
break;
//Input Panah Atas
case 38:
xv=0;yv=-1;
break;
//Input Panah Kanan
case 39:
xv=1;yv=0;
break;
//Input Panah Bawah
case 40:
xv=0;yv=1;
break;
}
}
</script>
4. Simpan file dengan cara pilih Save as type menjadi All Files dan beri nama snake.html atau sesuai keinginan kamu yang penting jangan lupa pakai .html . Lalu, buka file dengan cara klik 2 kali pada file yang telah disimpan tadi. Jika berhasil, nantinya akan muncul pada web browser halaman permainan dengan warna hitam, bersama dengan ular berwarna merah, dan buah atau food yang berwarna ungu. Untuk memainkan permainan Snake, gunakan tombol panah pada keyboard.
Demikian tutorial cara membuat game Snake dengan Javascript di Notepad. Semoga bermanfaat.
