Pada Tutorial ini, kita akan membahas tentang cara membuat game sederhana dengan HTML5 dan pastinya dengan menggunakan tag dari html5, yaitu tag <canvas> dan menggunakan bantuan jQuery untuk membuat makanan, pergerakan si ular dan sebagainya.
Game Sederhana ini di ambil dari game Snake yang sering terlihat di HP Nokia.
Langsung saja kita praktek kan
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.
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 snakegame.html (nama bebas sesuai dengan kenginan masing-masing).
Silakan copy / tulis ulang script di bawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<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
alert("GAME OVER");
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>
Pada script di atas sudah ada keterangan mengenai function mana yang di gunakan untuk fitur apa (di tandai dengan // di awal script)
dan hasil nya seperti berikut :
Demikian tutorial pembuatan game snake menggunakan HTML ini di buat. Semoga Bermanfaat
Comments
Post a Comment