Social Networks

(snake game in html5) HTML5 snake game online – the HTML5 spec is currently in draft, but is already being supported by web browsers like Apple’s Safari, Mozilla Firefox, and Opera. To learn HTML5 in details read this article – Find Geo Location with HTML5 and JQuery

TML5 has the great features. One of the wonderful new features of the spec is the canvas tag, a html element which combined with the javascript api allows you to draw graphics and animate them.

 

Snake game is the simple game, every one of you must played it some time on mobile or web. Code and implementation of HTML5 Snake game is very easy.

html5-snake-game-online-play

We developed Snake Game Using the HTML5 Canvas and JavaScript. Just take a look this live demo, it’s simple and light weight code you can use this script in 404 error pages and site down maintenance.

Presently HTML5 not support all the browser. May be this game will not work for few browser like IE. This HTML5 Snake game example is working fine with chrome, mozilla firefox (tested).

Try Live Demo
live-demo-tech-blog

Code
This code contains three functions play_game(), rand_frog() and set_game_speed(). If you want to change the game theme, modify these five variable values such as level, rect_w, rect_h, inc_score and snake_color.

 
<!documentTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play Snake Game</title>
<style type="text/css">
body {text-align:center;}
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 = 160; // Game level, by decreasing will speed up
var rect_w = 45; // Width 
var rect_h = 30; // Height
var inc_score = 50; // Score
var snake_color = "#006699"; // Snake Color
var ctx; // Canvas attributes
var tn = []; // temp directions storage
var x_dir = [-1, 0, 1, 0]; // position adjusments
var y_dir = [0, -1, 0, 1]; // position adjusments
var queue = []; 
var frog = 1; // defalut food
var map = [];
var MR = Math.random; 
var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions
var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
var direction = MR() * 3 | 0; 
var interval = 0;
var score = 0;
var sum = 0, easy = 0;
var i, dir;
// getting play area 
var c = document.getElementById('playArea');
ctx = c.getContext('2d');
// Map positions
for (i = 0; i < rect_w; i++)
{
map[i] = [];
}
// random placement of snake food
function rand_frog() 
{
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);
}
// Default somewhere placement 
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.fillStyle("#ffffff");
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 = "Thank you for playing game.<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()">
<h1>Play Snake Game</h1>
<div id="msg"></div>
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas>
</body>
</html>

 

 

 

 

  1. Exactly what i was looking for! Thank you so much. I browsed the whole site and there are some other intresting articles to read. Site added to bookmarks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>