下面是貪食蛇游戲效果（請使用支持HTML5的浏覽器，例如IE9，火狐,谷歌Chrome）：
下面是貪食蛇游戲HTML5代碼：
<!DOCTYPE html>
<html>
<head>
<title>Snake</title>
</head>
<body>
<canvas id="canvas" width="600" height="600">
Your browser not support Canvas!
</canvas>
<script type="text/javascript">
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
// ctx.translate(100,100);
var canvasWidth;
var canvasHeight;
//snake array
var snakeArray;
//snake unit width
var px;
//fps
var cycle;
//setInterval
var gameLoop;
//key
var left = 37;
var up = 38;
var right = 39;
var down = 40;
//direction
var d;
//food
var f;
//score
var score;
//too fast become direction
var flagD;
init();
//init snake
function init(){
canvasWidth = c.width;
canvasHeight = c.height;
snakeArray = [];
px = 20;
cycle = 500/1000;
d = right;
f = {x:-1,y:-1};
score = 0;
flagD = true;
if(typeof gameLoop != 'undefined'){
clearInterval(gameLoop);
}
initSnake(3);
initFood();
play();
}
function play(){
gameLoop = setInterval(function(){
ctx.fillStyle = 'white';
ctx.fillRect(0,0,canvasWidth,canvasHeight);
ctx.strokeStyle = 'black';
ctx.strokeRect(0,0,canvasWidth,canvasHeight);
moveSnake();
//paintFood();
paintSnake(snakeArray);
ctx.fillStyle = 'red';
paintCell(f.x,f.y);
var scoreStr = 'Score:' + score;
ctx.fillText(scoreStr,5,canvasHeight - 5);
},cycle*1000);
}
//init snake
function initSnake(length){
for(var i=length;i>0;i--){
snakeArray.push({x:i,y:0});
}
};
// paintSnake();
function paintSnake(){
ctx.fillStyle = 'blue';
for(var i=0;i<snakeArray.length;i++){
paintCell(snakeArray[i].x,snakeArray[i].y);
}
}
//paint cell
function paintCell(x,y){
ctx.fillRect(x*px,y*px,px-1,px-1);
}
// move snake
function moveSnake(){
flagD = false;
// console.log("move direction:" + d);
// for(var tt in snakeArray){
//
// console.log(tt+":"+snakeArray[tt].x+","+snakeArray[tt].y);
// };
//control direction
var p = {x:snakeArray[0].x,y:snakeArray[0].y};
if(d == left) p.x--;
else if(d == right) p.x++;
else if(d == up) p.y--;
else if(d == down) p.y++;
//eat food
if(p.x == f.x && p.y == f.y){
score++;
initFood();
}else{
snakeArray.pop();
}
//
if(p.x == -1 || p.x == canvasWidth/px || p.y == -1 || p.y == canvasHeight/px
|| checkColliction(p.x,p.y)){
alert(p.x + ":" + p.y);
init();
return;
}
snakeArray.unshift(p);
flagD = true;
}
// check collection
function checkColliction(x,y){
for(var t in snakeArray){
if(x == snakeArray[t].x && y == snakeArray[t].y)
{
// console.log('collection');
// for(var tt in snakeArray){
//
// console.log(tt+":"+snakeArray[tt].x+","+snakeArray[tt].y);
// }
return true;
}
}
return false;
}
//
function initFood(){
var flag = false;
do{
f.x = Math.floor(canvasWidth/px*Math.random());
f.y = Math.floor(canvasHeight/px*Math.random());
for(var t in snakeArray){
if(f.x == snakeArray[t].x && f.y == snakeArray[t].y)
flag = true;
}
}while(flag);
}
//add listin key
window.addEventListener('keydown',function(e){
if(flagD){
if(e.keyCode == left && d != right) d = left;
else if(e.keyCode == right && d != left) d = right;
else if(e.keyCode == up && d!= down) d = up;
else if(e.keyCode == down && d != up) d = down;
flagD = false;
};
});
</script>
</body>
</html>