- index.html (atau apalah itu :D)
-langsung aja ya gan :D ..
berikut kodenya :
<!DOCTYPE html>Note : pada warna merah itu bisa ganti saja kode yang #**** sesuka kalian ..untuk melihat kode2 warna html ..bisa di liat DISINI
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5-Game Ular</title>
<!-- Style -->
<style type="text/css">
body {
text-align:center;
font-family:arial
}
canvas {
border:5px dotted #ccc;
}
h1 {
font-size:50px;
text-align: center;
margin: 0;
padding-bottom: 25px;
}
</style>
<script type="text/javascript">
function play_game() {
var level = 200; // Level game, semakin rendah nilai maka gerakan ular akan semakin cepat
var rect_w = 60; // Lebar
var rect_h = 40; // Tinggi
var inc_score = 50; // Score
var snake_color = "#00FFFF"; // 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>Game Ular</h3>
<h6>Kembali ke <a href="http://p.pw/S9c">Blog</a></h6>
<div id="msg"></div>
<canvas id="playArea" width="450" height="300">Maaf browser Anda tidak mendukung html5.</canvas>
</body>
Untuk demonya dapat di liat dengan cara : KLIK DISINI
==Maaf,saya tidak menyediakan kode berikut untuk di download...karna terlalu simpel :v ..
-cara memainkannya :
- Buka Notepad ..
- Copy dan paste kode di atas
- save dengan extension .html ..contoh : namafile.html
- Coba buka file tsb dengan cara klik kiri 2x ...dan nikmati lah game tsb :D
- Upload "namafile.html" tadi ke server agan..dan coba buka ..contoh "www.domainanda.com/namafile.html" ..dan siap di bagikan :D
- -By lygacool.blogspot.com!
INFO : Jika terdapat error,bug pada game..silahkan Comment aja !!!!!!!!!!!!!!!!!!!!!!..90% gw balas dengan cepat!!!!!!!!!
ngak keluar gan awannya....
ReplyDeletehahahahaha, awam apa pula gan ? :v
DeleteJoin yuk gan group fb LGC : https://www.facebook.com/groups/lygacool/
coding ap gan yang di gunakan untuk memperpajg ulary,
ReplyDeleteterus demonya kok gak ad ya,
tolong upload donk gan.
makasih
Demonya ada kok gan, ntar kalo sempet saya upload file'a gan.
DeleteOiya, join yuk gan group LGC : https://www.facebook.com/groups/lygacool/
iya gaada apa" nya
ReplyDeleteMaksudnya apa ya gan ..? . Btw, yuk join group facebook LGC : https://www.facebook.com/groups/lygacool/
DeleteMakasih gan buat tutorialnya ..
ReplyDeleteMembantu Saya yang mau buat project aplikasi android terbaru game ular dengan html5 .
Hehe.. ngeprank ya gan?
ReplyDelete