参考网上某代码写的js版贪吃蛇，贪吃蛇整个过程分为三部分，地图的生成、食物的随机显示，蛇的显示和移动。运行时按键盘上下左右进行方向控制，蛇头撞到边界或自己时游戏结束。目前已知的问题为：生成食物时未排除生成到蛇身上的可能。


(function() {
var t = null;
var map = null;
var food={x:0,y:0,div:null};
var snake={
//初始化时的蛇身部分
snakeBody : [[1,2,null], [2,2,null], [3,2,null], [4,2,null]],
direct : "right"
};
var config = {
width:200,
height:200,
px:10, //单位块大小
mapColor:"#dddddd",
foodColor:"#555555",
snakeColor:"#666666",
position:'absolute',
speed:100
};
var showMap = function() {
var div = document.createElement("div");
div.style.width = config.width + "px";
div.style.height= config.height + "px";
div.style.backgroundColor = config.mapColor;
div.style.position = config.position;
document.getElementsByTagName("body")[0].appendChild(div);
map = div;
};
var showFood = function() {
var x = Math.floor(Math.random()*config.width/config.px);
var y = Math.floor(Math.random()*config.height/config.px);
food.x = x;
food.y = y;
if(food.div == null) {
var div = document.createElement("div");
div.style.width = config.px + "px";
div.style.height= config.px + "px";
div.style.backgroundColor = config.foodColor;
div.style.position = config.position;
div.style.left = x * config.px + "px";
div.style.top = y * config.px + "px";
map.appendChild(div);
food.div = div;
} else {
food.div.style.left = x * config.px + "px";
food.div.style.top = y * config.px + "px";
}
};
var showSnake = function() {
for(var i=0;i=config.width/config.px || snake.snakeBody[snakeLength-1][0]<0 || snake.snakeBody[snakeLength-1][1]>=config.height/config.px || snake.snakeBody[snakeLength-1][1] <0) { alert("game over"); clearInterval(t); return; } showSnake(); }; var startGame = function() { showMap(); showFood(); showSnake(); t = setInterval(function(){moveSnake()}, config.speed); window.onkeydown = function() { if(37 == event.keyCode) { snake.direct = "left"; } else if(38 == event.keyCode) { snake.direct = "up"; } else if(39 == event.keyCode) { snake.direct = "right"; } else if(40 == event.keyCode) { snake.direct = "down"; } } }; startGame() })()

运行截图：