-->
Z02PfDpnx2HkCEY1vO3bQ7NbKomaBV7tYzdpNk5s

3 Langkah Mudah Cara Membuat Game Snake dengan Javascript

Cara Membuat Game Ular dengan Javascript
Cara Membuat Game Ular dengan Javascript
Cara Membuat Game Ular dengan Javascript - Pada artikel kali ini saya akan berbagi cara membuat sebuah game seru yaitu “game ular”. Game snake ini dibuat menggunakan bahasa pemograman Javascript. Kode game ini diambil dari Javascript Game Code, kalian juga bisa melihat kode game lainnya.

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.
Cara Membuat Game Ular dengan Javascript
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.
Related Posts
Situsnesia.com
Yuk, berani bergerak maju dan melawan rasa takut.

Related Posts

1 comment

  1. thanks informasinya gan... mampir juga yak www.ipung.net

    ReplyDelete