Game Sederhana Snake Dengan HTML 5

on

Screenshot from 2014-04-23 23:06:12

berikut saya share bagaimana kegunaan html 5. yang sudah kita ketahui HTML 5 merupakan versi HTML terbaru yang mempunyai validasi dan fitur yang sangat tinggi. tapi sayangnya tidak semua browser mendukung. HTML 5 umumnya di gunakan untuk membuat desain website atau aplikasi yang bersifat web base. tapi disini saya akan share HTML 5 yang bisa digunakan untuk membuat Game yang sederhana. ini adalah game yang sangat klasik yakni snake (ular). langsung aja berikut step by stepnya:

1. buat file dengan nama terserah semisal snake.html, lalu copy kode berikut kedalam file tersebut dan simpan.

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”utf-8″>
<title>Games Ular</title>
<!– Style –>
<style type=”text/css”>
body {
text-align:center;
font-family:arial
}
canvas {
border:5px solid #ccc;
background:#f8f8f8 ;
}
h1 {
font-size:50px;
text-align: center;
margin: 0;
padding-bottom: 25px;
}
</style>
<script type=”text/javascript”>
function play_game() {
var level = 170; // Level game, semakin rendah nilai maka gerakan ular akan semakin cepat
var rect_w = 45; // Lebar
var rect_h = 30; // Tinggi
var inc_score = 50; // Score
var snake_color = “blue”; // Warna ular
var ctx; // Attribute canvas
var tn = []; // Penyimpan arah sementara
var x_dir = [-1, 0, 1, 0]; // Penyesuaian posisi
var y_dir = [0, -1, 0, 1]; // Penyesuaian posisi
var queue = [];
var frog = 1; // defalut makanan ular
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (rect_w – 10)) | 0; // Penghitungan posisi
var Y = 5 + (MR() * (rect_h – 10)) | 0; // Penghitungan posisi
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var sum = 0,
easy = 0;
var i, dir;
var c = document.getElementById(‘playArea’); // Memulai Area Game
ctx = c.getContext(‘2d’);
for(i = 0; i < rect_w; i++) { // Posisi Map
map[i] = [];
}

function rand_frog() { // Penempatan makanan ular secara acak
var x, y;
do {
x = MR() * rect_w | 0;
y = MR() * rect_h | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.fillStyle = snake_color;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 8, 8);
}
rand_frog();
function set_game_speed() {
if(easy) {
X = (X + rect_w) % rect_w;
Y = (Y + rect_h) % rect_h;
}–inc_score;
if(tn.length) {
dir = tn.pop();
if((dir % 2) !== (direction % 2)) {
direction = dir;
}
}
if((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y]) {
if(1 === map[X][Y]) {
score += Math.max(5, inc_score);
inc_score = 50;
rand_frog();
frog++;
}
ctx.fillRect(X * 10, Y * 10, 9, 9);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += x_dir[direction];
Y += y_dir[direction];
if(frog < queue.length) {
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if(!tn.length) {
var msg_score = document.getElementById(“msg”);
msg_score.innerHTML = “Game Over<br /> Your Score : <b>” + score + “</b><br /><br /><input type=’button’ value=’Play Again’ onclick=’window.location.reload();’ />”;
document.getElementById(“playArea”).style.display = ‘none’;
window.clearInterval(interval);
}
}
interval = window.setInterval(set_game_speed, level);
document.onkeydown = function (e) {
var code = e.keyCode – 37;
if(0 <= code && code < 4 && code !== tn[0]) {
tn.unshift(code);
} else if(-5 == code) {
if(interval) {
window.clearInterval(interval);
interval = 0;
} else {
interval = window.setInterval(set_game_speed, 60);
}
} else {
dir = sum + code;
if(dir == 44 || dir == 94 || dir == 126 || dir == 171) {
sum += code
} else if(dir === 218) easy = 1;
}
}
}
</script>
</head>

<body onload=”play_game()”>
<h3>Play</h3>
<div id=”msg”></div>
<canvas id=”playArea” width=”450″ height=”300″>Maaf browser Anda tidak mendukung html5.</canvas>
</body>

</html>

 

2. tinggal klik dua kali file dan akan terlihat hasilnya.

selamat bermain !🙂

2 Comments Add yours

  1. iboy mengatakan:

    kok gamenya tidak muncul seperti di screenshot ya? tampilannya hanya blank?

    1. XIDOC mengatakan:

      Browser anda mendukung html5 ?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s