Cara Membuat Game Snake Sederhana dengan Notepad Menggunakan Javascript dan HTML5
Cara Membuat Game Snake dengan Notepad Menggunakan Javascript dan HTML5 - Kali ini Klik Tau akan membagikan tips dan trik cara membuat game snake dengan menggunakan bahasa pemrograman javascript dan HTML5. JavaScript adalah bahasa skript yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag script.sedangkan HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Game Snake sendiri sangat terpopuler dikalangan anak pada tahun 1970 hingga sekarang, karena digame ini merupakan game yang mempunyai tingkat keunikan sendiri disaat main.
Untuk membuat sangatlah mudah, anda tinggal mengikuti langkah demi langkah dibawah ini :
1. Buka Notepad
2. Masukan Kode dibawah ini kedalam notepad
<!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>
3. Simpan dengan format extensi .html
4.Setelah itu buka dibrowser kesayangan anda.
itu dia Cara Membuat Game Snake Sederhana dengan Notepad Menggunakan Javascript dan HTML5 semoga bermanfaat bagi anda semua.
Post A Comment:
0 comments so far,add yours