Cara Membuat Game Snake dengan HTML5 dan Javascript

All About Web | Cara Membuat Game Snake dengan HML5 dan Javascript – Yossh gan di postingan kali ini saya akan berbagi tutorial cara membuat game di halaman web dengan bahasa HTML5 & Javascript. Bahasa HTML5 merupakan generasi bahasa HTML yang ke lima, bahasa ini digunakan untuk membuat sebuah halaman web, HTML bahasa yang biasanya pasti digunakan untuk membuat kerangka dari halaman web dinamis atau statis. HTML5 yang merupakan generasi yang paling baru ini telah mendukung dalam konten multimedia ketimbang generasi HTML yang sebelumnya dan HTML5 lebih mendukung di aplikasi browser dan mesin. Di HTML5 anda dapat membuat bermacam – macam animasi multimedia, bila anda bisa mengkombinasikan dengan CSS3 dan Javascript.

Game Snake mungkin kalian pernah memainkan game ini yang dulunya terkenl di handphone nokia, bila kalian belum pernah memainkan game ini berarti masa kecil kalian kurang bahagia, game snake merupakan game ular yang berusaha untuk memakan makanya yang ada disekitar dan bagi pemain anda yang berusaha untuk mendapatkan makanan sebanyak-banyaknya karna semakin banyak makanan yang dimakan maka semakin banyak poin yang di dapat dan score yang paling banyak dia pemainya.

Cara untuk membuat game ini, anda bisa mengetik scriptnya atau copy-paste dibeberapa aplikasi yang sederhana, contoh : Notepad, Notepad++, atau yang aplikasi lebih baik lagi, contoh : Adobe DreamWeaver, Macromedi, dll.

Script HTML5 yang digunakan seperti yang dibawah.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Script tersebut merupakan pembuatan canvas atau tempat game yang akan dibuat dengan luas ukuran 500 x 500.

Menggunakan Javascript, script dari javascript nanti dimasukan didalam script yang tadi yang dimasukan di dalam tag <head></head>. Jadi script yang sempurna yang telah digabungkan seperti ini :

<!DOCTYPE html>

<html>

<head>

<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 = "green";

ctx.fillRect(x * cw, y * cw, cw, cw);

ctx.strokeStyle = "black";

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>

<center>

<canvas background=”000000” id="canvas" width="500" height="500"></canvas>

</center>

</body>

</html>

Script diatas langsung anda copy-paste di notepad, kemudian simpan di notepad dengan nama game.html , *.HTML adalah extensi dari dokumen html.

Akhirnya jalankan game snake tersebut di browser anda kecuali dibrowser internet explorer, jadi gunakan saja Chrome atau Mozilla, untuk memainkan game tsb klik 2 kali pada kotak game. Yoshh selesai tutorail membuat game semoga bermanfaat untuk nambah ilmu tentang HTML5 dan Javascript.

Comments

arifnoerwahidinApril 6, 2019 at 9:21 AM
makasih kak
Shikamaru NaraSeptember 23, 2019 at 1:40 AM
nice information min
Power supply hp
Di PrintingSeptember 9, 2020 at 12:16 AM
Kalau mau di buat kayak ada gamepadnya gitu min dan bisa dimainin di hp terutama android , plis pencerahannya bingung asli dari tadi : )
AnonymousApril 20, 2022 at 3:05 AM
Cara Membuat Game Snake Dengan Html5 Dan Javascript >>>>> Download Now

>>>>> Download Full

Cara Membuat Game Snake Dengan Html5 Dan Javascript >>>>> Download LINK

>>>>> Download Now

Cara Membuat Game Snake Dengan Html5 Dan Javascript >>>>> Download Full

>>>>> Download LINK rt

All about Web

Search This Blog

Cara Membuat Game Snake dengan HTML5 dan Javascript

Comments

Post a Comment