<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var ctx=document.getElementById("myCanvas").getContext("2d"),//返回一个二维绘画环境
r = [{x:10,y:9},{x:10,y:8}],//起始贪吃蛇位置
co=40,
e=null;
ctx.shadowBlur=40, //阴影等级
ctx.shadowColor="red";
setInterval(function () {
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24) return;
e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) || (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) || (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) || (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ? (r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));
(co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);
ctx.clearRect(0, 0, 240, 240);//删除画布的矩形区域
if (e) ctx.fillRect(e.x * 10, e.y * 10, 10, 10);//填充矩形
for (var i = 0; i < r.length; i++) ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);
while (e == null || check(e))
e = { y: (Math.random() * 24 >>> 0), x: (Math.random() * 24 >>> 0) };
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)
alert("game over\nYou get [" + (r.length - 2) + "]");
}, 100);
document.onkeyup = function(event) {
co = event.keyCode >= 37 && event.keyCode <= 40 && (Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;
};
//判断是否撞到自己
function check(e,j){
for (var i = 0; i < r.length; i++)
if (j != i && r[i].x == e.x && r[i].y == e.y)
return true;
return false;
}
</script>
</body>
</html>
转载地址：http://blog.csdn.net/lufy_legend/article/details/8233520
仔细看了下代码，发现算法不复杂，再伸展的想想，也可以写一个俄罗斯方块。。。O(∩_∩)O哈！