Membuat Game Snake Sederhana Dengan JQuery terbaru 2019

Membuat Game Snake Sederhana Dengan JQuery terbaru 2019

Membuat Game Snake Sederhana Dengan JQuery terbaru 2019 sangatlah mudah dan simpel, anda hanya perlu memahami bahasa pemrograman Html dan untuk tambahan-nya Panduan Code memakai bantuan dari JQuery. Untuk anda yang belum tahu JQuery itu apa simak penjelasan nya di disini.


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.

<!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>


Setelah selesai hasil-nya akan terlihat seperti di bawah ini.
Membuat Game Snake Sederhana Dengan JQuery | Panduan Code
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.

Jika anda ingin belajar bahasa pemrograman python, Panduan Code juga menyediakan-nya di situs ini, untuk pembelajaran awal anda bisa memulai dengan membuat kalkulator python, dan panduan cara membuat-nya telah Panduan Code sampaikan pada postingan sebelum-nya.

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

Berlangganan Artikel Terbaru Via E-mail:

22 Responses to "Membuat Game Snake Sederhana Dengan JQuery terbaru 2019"

  1. Game snake gimana gan itu ntar, apa kayak game snake di hp nokia jadul itu?

    BalasHapus
    Balasan
    1. Iya gan, tapi bedanya game snake sederhana 2019 ini lebih cocok di pakai di laptop atau komputer. Karena untuk menjalankan game snake sederhana 2019 nya harus dengan keyboard.
      Jangan khawatir jugak agan bisa merubah Code nya agar bisa di jalankan di hp layar sentuh dan lain-lain.

      Hapus
  2. Pake jquery sama html5 ya gan?

    BalasHapus
    Balasan
    1. iya biar lebih sederhana lagi game snake nya.

      Hapus
  3. Balasan
    1. Itu bukan susah gan, tapi control nya cuma bisa lewat keyboard. Kalau di coba di hp layar sentuh memang sulit.

      Hapus
  4. Thanks informasinya..layak dicoba ni untuk hiburan di blog...artikelnya bermanfaat..salam

    BalasHapus
  5. keren., itu ular nya bisa dimainkan secara online di browser.,.

    BalasHapus
    Balasan
    1. Terimaksih gan, memang saya kasih demo-nya secara langsung saja hehe

      Hapus
  6. mantap mas, terimakasih yaa...

    BalasHapus
  7. Mantap dah, bisa langsung dicomot ini gamenya. Pengganti game kuno :D

    BalasHapus

Terimakasih telah berkomentar di Panduan Code, semoga komentar anda dapat membangun situs ini menjadi lebih baik lagi.

Iklan Atas Artikel

Iklan Atas Artikel1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Donasi

Hallo sobat panduan code, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan digunakan untuk memperpanjang Domain Panduan code.



BANK BRI:401101013389533 a/n ARIF NOERWAHIDIN
PULSA : 082126546564
PAYPAL : panduancode
Done