Membuat Game Snake Sederhana Dengan JQuery terbaru sangatlah mudah dan simpel, anda hanya perlu memahami bahasa pemrograman Html dan untuk ...
Daftar Isi [Tampil]

    Membuat Game Snake Sederhana Dengan JQuery terbaru sangatlah mudah dan simpel, anda hanya perlu memahami bahasa pemrograman Html dan untuk tambahan-nya Panduan Code memakai bantuan dari JQuery.

    Anda pansti-nya sudah mengetahui tag canvas pada html, nah pada panduan membuat game snake sederhana ini juga menggunakan tag canvas untuk membuat arena game-nya.

    Dan juga Panduan Code menggunakan JQuery selain dari bahasa pemrograman utama-nya yaitu Html5.  JQuery akan kita gunakan untuk membuat makanan si snake-nya nanti agar dapat bertumbuh menjadi panjang ketika si snake memakan-nya. Pergerakan si snake ini juga di atur degan Jquery, dan lain sebagai-nya.

    Oke mari langsung saja kita mulai bahas cara membuat game snake sederhana ini, untuk itu anda harus pahami terbidahulu dengan  baik-baik pembahasan dibawah ini.

    Cara Membuat Game Snake Sederhana Dengan JQuery Dan Html5

    membuat game snake sederhana

    Sekarang mari kita mulai membuat game snake sederhana dengan JQuery dan Html5-nya.

    Karena kita menggunakan bantuan dari JQuery untuk membuat makanan dan pergerakan si snake-nya nanti, maka kita harus menghubungkan file JQuery-nya dengan file html kita.

    Ada 2 cara untuk menghubungkan Jquery dengan file html yang pertama yaitu kita mendownload file JQuery-nya terbidahulu dan kemudian kita simpan pada suatu folder agar memudahkan nanti-nya pada saat mengundang file JQuery tersebut kedalam file html kita.

    Tapi cara yang akan kita pakai adalah cara yang kedua yaitu menghubungkan file JQuery dan html secara Onlie saja agar lebih mudah dan praktis.

    Langkah pertama untuk membuat game snake sederhana ini yaitu kita buat dulu sebuah file Html-nya dan berinama terserah kalian contoh-nya saya memberinama "MembuatGameSnakeSederhana.html".

    Selanjut-nya langkah kedua agar lebih mudah dan cepat dalam membuat game snake nya yaitu kalian copy pastekan code dibawah ini.

    Script Game Snake Sederhana

    <!DOCTYPE html>
    <html>
        <head>

            //Ini adalah Code untuk menghubungkan JQuery dengan file html kita
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <title>Membuat Game Snake Sederhana Dengan JQuery | Panduan Code</title>

        </head>

        <body>


            <canvas id="ruang" width="500" height="500"></canvas>


            <script type="text/javascript">
                $(document).ready(function() {

                  // Ini adalah Code untuk mendeklarasikan ruang pada game snake ini
                  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;

                  //Dibawah ini adalah Code untuk membuat cell aray untuk membuat snake
                  var array_snake;

                  function init() {
                    tekan = "right"; //default direction
                    create_snake();
                    create_makanan(); //Code ini berfungsi untuk membuat makanakan untuk snake
                    //nilai game
                    nilai = 0;

                    if (typeof game_loop != "undefined") clearInterval(game_loop);
                    game_loop = setInterval(paint, 60);
                }

                init();

                  // Dan Code dibawah ini berguna untuk membuat snake-nya
                  function create_snake() {
                    //Untuk menetapkan jumlah panjang awal snake-nya
                    var length = 5; //5 adalah panjang snake yang default
                    array_snake = [];
                    for (var i = length - 1; i >= 0; i--) {
                      //Code ini berfungsi untuk membuat snake horizontal mulai dari arah kiri
                      array_snake.push({ x: i, y: 0 });
                  }
                }

                  //Dan Code yang satu ini berfungsi untuk membuat makanan untuk snake
                  function create_makanan() {
                    makanan = {
                      x: Math.round(Math.random() * (lebar - cw) / cw),
                      y: Math.round(Math.random() * (tinggi - cw) / cw)
                  };
                }

                  //Untuk Style pada game snake sederhana anda bisa merubah Code dibawah ini
                  function paint() {
                    //Code warna background
                    ctx.fillStyle = "#ecf0f1";
                    ctx.fillRect(0, 0, lebar, tinggi);
                    ctx.strokeStyle = "#2c3e50";
                    ctx.strokeRect(0, 0, lebar, tinggi);

                    //Code membuat pergerakan untuk snake
                    var nx = array_snake[0].x;
                    var ny = array_snake[0].y;
                    if (tekan == "right") nx++;
                    else if (tekan == "left") nx--;
                    else if (tekan == "up") ny--;
                    else if (tekan == "down") ny++;

                    //Code memeriksa tabrakan
                    if (
                      nx == -1 ||
                      nx == lebar / cw ||
                      ny == -1 ||
                      ny == tinggi / cw ||
                      cek_tabrakan(nx, ny, array_snake)
                      ){

                    //restart game
                init();
                return;
                }

                    //Code untuk snake memakan makanan
                    if(nx == makanan.x && ny == makanan.y){

                      var ekor = { x: nx, y: ny };
                      nilai++;
                 
                      //Code membuat makanan yang baru
                      create_makanan();
                 
                  } else {
                      var ekor = array_snake.pop();
                      ekor.x = nx;
                      ekor.y = ny;
                  }

                  array_snake.unshift(ekor);

                  for (var i = 0; i < array_snake.length; i++) {
                      var c = array_snake[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 (var i = 0; i < array.length; i++) {
                      if (array[i].x == x && array[i].y == y) return true;
                  }
                  return false;
                }

                  //Code untuk kontrol snake 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>

    Silahkan coba jalankan source code diatas pada browser Anda.

    Dan selamat kalian telah berhasil membuat game snake sederhana dengan Jquery dan Html5, untuk pejelasan syntax nya anda bisa lihat komentar pada code diatas. Atau jika anda masih kurang mengerti kalian bisa menanyakan-nya di kolom komentar dibawah.

    Demikian Panduan Membuat Game Snake Sederhana Dari Panduan Code, semoga dapat bermanfaat dan berkah aamiin.

    Coba cari lagi apa yang ada inginkan pada kolom berikut: DMCA.com Protection Status
    Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
    Donasi
    Hallo sobat panduan code, Anda dapat memberikan suport kepada kami agar lebih semangat dengan cara dibawah ini.

    Dana : 085972737000
    PAYPAL : Panduan Code
    Done
    Color Picker
    Silahkan gunakan tools color picker berikut gratis untuk Anda, salam Admin Panduan Code.

    Pilih Warna

    Done