<!DOCTYPE html>
<head>
<title>canvas贪食蛇</title>
<style>
.canvas{
background:black;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width='400' height='400'></canvas>
<script>
var sn=[42,41], dz=43, fx=1, n, ctx=document.getElementById('canvas').getContext('2d');
function draw(t,c){
ctx.fillStyle=c;
ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){fx=sn[1]-[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
!function(){
sn.unshift(n=sn[0]+fx);
if(sn.indexOf(n,1)>0 || n<0 ||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) return ;
draw(n,'red');
if(n==dz){
while(sn.indexOf(dz=~~(Math.random()*400))>=0);
draw(dz,'red');
}else
draw(sn.pop(),'Black');
setTimeout(arguments.callee,130);
}();
</script>
</body>
</html>