Membuat game html5 dengan html editor - Pada cara Membuat game html5 dengan html editor ini kita membuat game snake yang tentunya simpel dan sederhana, sebelum itu saya akan sedikit jelaskan mengenai HTML5.
Perbedaan HTML 5 secara garis besar adalah HTML5 lebih mendukung dalam konten multimedia di bandingkan versi HTML sebelumnya, HTML5 lebih mudah di mengerti oleh browser dan mesin.
Dengan HTML5 kita dapat melakukan berbagai macam animasi multimedia yang beragam, jika kita bisa mengkombinasikannya dengan CSS dan JavaScript. Sebagai contoh sederhana pada kali ini kita akan membuat game snake dengan menggabungkan HTML5 dan JavaScript.
Untuk menulisakan script anda dapat menggunakan html editor apa saja , disini saya menggunakan Notepad ++. Untuk menulis script selain notepad++ yaitu Phpdesigner, Dreamwaver, NetBeans, Eclipse, notepad bawaan windows juga bisa, namun dari html editor berikut ada kelebihan dan kekurangan masing masing.
Karena game ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup, karena notepadlah yang paling enteng.
HTML5
Buka Html editor anda kemudian copy script di bawah dan di pastekan di Html editor anda.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>
Kita mebuat canvas untuk lokasi game kita nanti dengan ukuran 450 x 450
Javascript
Sekarang untuk javascriptnya tambahkan di atas, letakan di antara <head>disini</head> sehingga script anda sekarang menjadi seperti ini :
<!DOCTYPE html>
<html>
<head>
<!-- Jquery -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var cw = 10;
var d;
var food;
var score;
var snake_array; //membuat cell aray untuk membuat ular
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //membuat makanan untuk ular
//score game
score = 0;
if (typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake()
{
var length = 5; //panjang ular default
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
//membuat ular horizontal mulai dari arah kiri
snake_array.push({x: i, y: 0});
}
}
//membuat makanan
function create_food()
{
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
//Mewarnai tubuh ular
function paint()
{
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Membuat pergerakan untuk ular.
var nx = snake_array[0].x;
var ny = snake_array[0].y;
if (d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
//Cek tabakan tembok
if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw ||
check_collision(nx, ny, snake_array))
{
//restart game
init();
return;
}
//Cek tabrakan dengan makanan
if (nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//membuat makanan baru
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
paint_cell(c.x, c.y);
}
//Mewarnai makanan
paint_cell(food.x, food.y);
//Mewarnai score game
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h - 5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function check_collision(x, y, array)
{
for (var i = 0; i < array.length; i++)
{
if (array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Keyboard control ular
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && d != "right")
d = "left";
else if (key == "38" && d != "down")
d = "up";
else if (key == "39" && d != "left")
d = "right";
else if (key == "40" && d != "up")
d = "down";
})
})
</script>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>
<html>
<head>
<!-- Jquery -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var cw = 10;
var d;
var food;
var score;
var snake_array; //membuat cell aray untuk membuat ular
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //membuat makanan untuk ular
//score game
score = 0;
if (typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake()
{
var length = 5; //panjang ular default
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
//membuat ular horizontal mulai dari arah kiri
snake_array.push({x: i, y: 0});
}
}
//membuat makanan
function create_food()
{
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
//Mewarnai tubuh ular
function paint()
{
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Membuat pergerakan untuk ular.
var nx = snake_array[0].x;
var ny = snake_array[0].y;
if (d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
//Cek tabakan tembok
if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw ||
check_collision(nx, ny, snake_array))
{
//restart game
init();
return;
}
//Cek tabrakan dengan makanan
if (nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//membuat makanan baru
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
paint_cell(c.x, c.y);
}
//Mewarnai makanan
paint_cell(food.x, food.y);
//Mewarnai score game
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h - 5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function check_collision(x, y, array)
{
for (var i = 0; i < array.length; i++)
{
if (array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Keyboard control ular
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && d != "right")
d = "left";
else if (key == "38" && d != "down")
d = "up";
else if (key == "39" && d != "left")
d = "right";
else if (key == "40" && d != "up")
d = "down";
})
})
</script>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>
Sekarang simpan file anda dengan ekstensi .html contoh : game snake.html. Sekarang game HTML5 anda sudah selesai. Untuk tambahan seperti menambah audio, video, gambar ataupun tulisan seperti punya saya, anda bisa membaca postingan saya di kategori bahasa pemrograman.
Anda dapat mencobanya dengan cara klik 2x pada file html tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan gunakan Internet Explorer untuk menjalankannya, karena kalau menjalankan dengan Internet Explorer tidak akan jalan.
Nah, itulah cara membuat game html5 dengan html editor yaitu membuat game snake, yang pastinya simpel dan sederhana. Karena kita belajar dari yang mudah dahulu.
Cukup segini dulu postingan kali ini dan jangan lupa untuk membaca tutorial saya lainnya. Dan berkomentarlah. Bye
EmoticonEmoticon