Cara Membuat Game Snake Dengan HTML5 dan JQuery ~ CODE-PROGRAMMING-ID

Membuat Game Snake Dengan HTML5 dan JQuery – Selamat datang di tutorial cara membuat game dengan html5. seperti pada judul tutorial ini, kita akan membahas tentang cara membuat game sederhana dengan HTML5.
Pastinya dengan menggunakan tag dari html5, yaitu tag <canvas>. dan menggunakan bantuan jQuery untuk membuat makanan, pergerakan si ular dan sebagainya.

Membuat Game Snake Dengan HTML5 dan JQuery

Langsung saja kita mulai membuat game snake dengan HTML5 dan JQuery. pertanyaannya, apa saja nih yang kita butuhkan ?
karena di sini kita menggunakan bantuan jQuery juga, maka kita perlu download dulu jQuerynya. atau bisa menggunakan link online jquery untuk di hubungkan dengan file html/php kita.
Untuk tutorial cara menghubungkan html/php dengan JQuery teman-teman bisa membaca tutorial kita sebelumnya di www.code-programming-id.com.
Pertama, buat sebuah file HTML atau PHP terserah teman-teman. karena ini hanya contoh saja, maka saya menggunakan file HTML saja. jadi sini saya membuat file dengan nama ular.html .
ular.html

<!DOCTYPE html>
<html>
    <head>

        //menghubungkan html dengan jquery
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>Membuat Game Snake Dengan HTML5 dan JQuery</title>    

    </head>

    <body>


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


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

              // deklarasi
              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;

              //membuat cell aray untuk membuat ular
              var array_ular; 

              function init() {
                tekan = "right"; //default direction
                create_snake();
                create_makanan(); //membuat makanan untuk ular
                //nilai game
                nilai = 0;

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

            init();

              // membuat ular
              function create_snake() {
                // menetapkan jumlah panjang awal ular
                var length = 5; //panjang ular default
                array_ular = [];
                for (var i = length - 1; i >= 0; i--) {
                  //membuat ular horizontal mulai dari arah kiri
                  array_ular.push({ x: i, y: 0 });
              }
            }

              //membuat makanan untuk ular
              function create_makanan() {
                makanan = {
                  x: Math.round(Math.random() * (lebar - cw) / cw),
                  y: Math.round(Math.random() * (tinggi - cw) / cw)
              };
            }

              //pengaturan
              function paint() {
                // warna background
                ctx.fillStyle = "#ecf0f1";
                ctx.fillRect(0, 0, lebar, tinggi);    
                ctx.strokeStyle = "#2c3e50";
                ctx.strokeRect(0, 0, lebar, tinggi);

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

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

                //restart game
            init();
            return;
            }

                //cek jika ular kena makanan/memakan makanan
                if(nx == makanan.x && ny == makanan.y){

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

              array_ular.unshift(ekor);

              for (var i = 0; i < array_ular.length; i++) {
                  var c = array_ular[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;
            }

              //kontrol ular 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<!DOCTYPE html>

<html>

<head>

//menghubungkan html dengan jquery

<title>Membuat Game Snake Dengan HTML5 dan JQuery</title>

</head>

<body>

$(document).ready(function() {

// deklarasi

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;

//membuat cell aray untuk membuat ular

var array_ular;

function init() {

tekan = "right"; //default direction

create_snake();

create_makanan(); //membuat makanan untuk ular

//nilai game

nilai = 0;

if (typeof game_loop != "undefined") clearInterval(game_loop);

game_loop = setInterval(paint, 60);

}

init();

// membuat ular

function create_snake() {

// menetapkan jumlah panjang awal ular

var length = 5; //panjang ular default

array_ular = [];

for (var i = length - 1; i >= 0; i--) {

//membuat ular horizontal mulai dari arah kiri

array_ular.push({ x: i, y: 0 });

}

//membuat makanan untuk ular

function create_makanan() {

makanan = {

x: Math.round(Math.random() * (lebar - cw) / cw),

y: Math.round(Math.random() * (tinggi - cw) / cw)

};

}

//pengaturan

function paint() {

// warna background

ctx.fillStyle = "#ecf0f1";

ctx.fillRect(0, 0, lebar, tinggi);

ctx.strokeStyle = "#2c3e50";

ctx.strokeRect(0, 0, lebar, tinggi);

//membuat pergerakan untuk ular

var nx = array_ular[0].x;

var ny = array_ular[0].y;

if (tekan == "right") nx++;

else if (tekan == "left") nx--;

else if (tekan == "up") ny--;

else if (tekan == "down") ny++;

//memeriksa tabrakan

if (

nx == -1 ||

nx == lebar / cw ||

ny == -1 ||

ny == tinggi / cw ||

cek_tabrakan(nx, ny, array_ular)

){

//restart game

init();

return;

}

//cek jika ular kena makanan/memakan makanan

if(nx == makanan.x && ny == makanan.y){

var ekor = { x: nx, y: ny };

nilai++;

//membuat makanan yang baru

create_makanan();

} else {

var ekor = array_ular.pop();

ekor.x = nx;

ekor.y = ny;

}

array_ular.unshift(ekor);

for (var i = 0; i < array_ular.length; i++) {

var c = array_ular[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;

}

//kontrol ular 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>

dan hasilnya

Membuat Game Snake Dengan HTML5 dan JQuery

dan game snake nya pun berhasil di buat. untuk penjelasan per syntax nya, teman-teman bisa perhatikan pada comment yang sudah di buat pada syntax.
Membuat Game Snake Dengan HTML5 dan JQuery.

Incoming search terms:

script game sederhana
membuat game sederhana dengan php
cara membuat game html
membuat game snak html dan jquery
cara membuat game dengan javascript
membuat game berbasis web
cara membuat geme sederhana dengan html
cara membuat game dengan php
membuat game dengan php
cara membuat game

Author

Hi, Its me Hafeez. A webdesigner, blogspot developer and UI/UX Designer. I am a certified Themeforest top Author and Front-End Developer. I'am business speaker, marketer, Blogger and Javascript Programmer.