Commit 3203a5a

<html lang="en">

<meta charset="utf-8" />

<title>Classic Snake Game</title>

<style type="text/css">

body {

text-align: center;

}

canvas {

border: 7px solid #4A4747

}

</style>

<script type="text/javascript">

function play_game() {

var game_level = 150;

var rect_w = 45;

var rect_h = 30;

var snake_color = "#0520A5";

var tn = []; // temporary directions storage

var x_dir = [-1, 0, 1, 0];

var y_dir = [0, -1, 0, 1];

var queue = [];

var frog = 1;

var map = [];

var X = 5 + (Math.random() * (rect_w - 10)) | 0;

var Y = 5 + (Math.random() * (rect_h - 10)) | 0;

var direction = Math.random() * 3 | 0;

var interval = 0;

var score = 0;

var sum = 0, easy = 0;

var i, dir;

var c = document.getElementById('playArea');

var ctx = c.getContext('2d');

for (i = 0; i < rect_w; i++) {

map[i] = [];

}

function set_game_speed() {

if (easy) {

X = (X + rect_w) % rect_w;

Y = (Y + rect_h) % rect_h;

}

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++;

random_snake_position();

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 show_score = document.getElementById("show");

show_score.innerHTML = "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);

}

}

function random_snake_position() {

var x, y;

do {

x = Math.random() * rect_w | 0;

y = Math.random() * 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);

}

random_snake_position();

interval = window.setInterval(set_game_speed, game_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>

<body onload="play_game()">

<h1>Classic Snake Game</h1>

<div id="show"></div>

<canvas id="playArea" width="450" height="300">Looks like we found a time traveller! You need to upgrade to modern browser to enjoy this game.</canvas>