 |
| Cara Membuat Game Ular dengan Javascript |
Bagaimana, kamu siap untuk membuat game snake sederhana dengan javascript? Jika tertarik, kamu dapat membuatnya melalui step by step berikut ini.
Pengertian Javascript
Javascript merupakan bahasa pemrograman yang paling banyak digunakan para progammer dalam kurun waktu dua puluh tahun ini. Oleh karena itu JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi website developer didunia.Aplikasi & Sistem yang dibutuhkan Untuk membuat Snake Game
Sebelum membuat game snake dengan javascript. anda perlu menyiapkan beberapa aplikasi, seperti:1. Personal Computer / Komputer spek bebas / Android
2. Aplikasi Editor (Notepad, Sublime Text, VCS, dsb)
Setelah menyiapkan aplikasi tersebut silahkan lanjut ke materi berikutnya.
Membuat snake game sederhana menggunakan Javascript
1. Buka aplikasi text editor
Setelah membuka text editor, silahkan buat file atau project baru. Pertama, buat terlebih dahulu file index.html sesuai kode berikut:<!DOCTYPE html>
<html>
<head>
<title>Membuat Game Ular Sederhana</title>
</head>
<body>
//Kode taruh Canvas taruh sini
<script>
//Kode Javascript taruh sini
</script>
</body>
</html>
2. Copy dan paste code (Canvas & Javascript)
Selanjutnya, copy script dibawah ini dan paste ke project index.html yang telah diberi background kuning.<canvas id="gc" width="400" height="400"></canvas>
Setelah itu, copy kode Javascript dibawah ini dan paste ke project index.html yang telah diberi background biru.
window.onload=function() {
canv=document.getElementById("gc");
ctx=canv.getContext("2d");
document.addEventListener("keydown",keyPush);
setInterval(game,1000/15);
}
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
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;
}
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
ctx.fillStyle="lime";
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;
}
}
trail.push({x:px,y:py});
while(trail.length>tail) {
trail.shift();
}
if(ax==px && ay==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}
ctx.fillStyle="red";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
function keyPush(evt) {
switch(evt.keyCode) {
case 37:
xv=-1;yv=0;
break;
case 38:
xv=0;yv=-1;
break;
case 39:
xv=1;yv=0;
break;
case 40:
xv=0;yv=1;
break;
}
}
3. Simpan dan jalankan project
Apabila anda menggunakan notepad, simpan project dengan format (all files) index.html. Untuk menjalankan project dapat kamu lakukan dengan cara membuka file index.html ke dalam browser. Lihat hasilnya, jika benar maka game ular bisa dimainkan menggunakan tombol up, down, right, dan left. |
| Game Ular dengan Javascript |
Kesimpulan
Kode diatas merupakan kode yang dibuat untuk menghasilkan game Javascript sederhana. Kamu bisa mengkreasikan sendiri game apa yang ingin kamu buat dengan mempelajari tutorial yang ada melalui internet hingga Youtube.Sekian pembahasan kami tentang "Cara Membuat Game Ular dengan Javascript". Game ular ini bisa jadi referensi untuk anda yang sedang mencari referensi yang diberikan oleh guru. Share bila dirasa artikel ini bermanfaat. Bila ada pertanyaan, jangan sungkan untuk bertanya melalui kolom komentar dibawah, Terimakasih.
