mirror of
https://github.com/krislamo/vagrant-easyredmine
synced 2024-11-10 06:50:35 +00:00
142 lines
3.1 KiB
Plaintext
142 lines
3.1 KiB
Plaintext
<!-- http://www.9lessons.info/2011/08/html5-snake-game.html -->
|
|
<!documentTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Redmine Maintenance</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>Redmine is down for maintenance</h1>
|
|
Play snake while you wait.
|
|
<div id="msg"></div>
|
|
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas>
|
|
</body>
|
|
</html>
|