#HTML

Membuat Game Snake Dengan HTML5 dan JQuery

By Diki Alfarabi Hadi
14 May 2017
HTML

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.malasngoding.com.

BACA : CARA PENGGUNAAN JQUERY

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

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

berikut ini demo nya.

See the Pen Membuat Game Snake Sederhana Dengan HTML5 dan JQuery by Malas Ngoding (@malasngoding) on CodePen.0

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.