参考网上某代码写的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()<em>config.width/config.px); var y = Math.floor(Math.random()</em>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 <em> config.px + "px"; div.style.top = y </em> config.px + "px"; map.appendChild(div); food.div = div; } else { food.div.style.left = x <em> config.px + "px"; food.div.style.top = y </em> config.px + "px"; } }; var showSnake = function() { for(var i=0;i<snake.snakeBody.length; i++) { if(snake.snakeBody[i][2] == null) { var div = document.createElement("div"); div.style.width = config.px + "px"; div.style.height= config.px + "px"; div.style.backgroundColor = config.snakeColor; div.style.position = config.position; div.style.left = snake.snakeBody[i][0] <em> config.px + "px"; div.style.top = snake.snakeBody[i][1] </em> config.px + "px"; snake.snakeBody[i][2] = div; map.appendChild(div); } else { snake.snakeBody[i][2].style.left = snake.snakeBody[i][0] <em> config.px + "px"; snake.snakeBody[i][2].style.top = snake.snakeBody[i][1] </em> config.px + "px"; } } }; var moveSnake = function() { var snakeLength = snake.snakeBody.length; for(var i=0; i<snakeLength-1; i++) { snake.snakeBody[i][0] = snake.snakeBody[i+1][0]; snake.snakeBody[i][1] = snake.snakeBody[i+1][1]; } //头部向前移动一步(区分方向) if(snake.direct == "right") { snake.snakeBody[snakeLength - 1][0] += 1; } else if(snake.direct == "left") { snake.snakeBody[snakeLength - 1][0] -= 1; } else if(snake.direct == "up") { snake.snakeBody[snakeLength - 1][1] -= 1; } else if(snake.direct == "down") { snake.snakeBody[snakeLength - 1][1] += 1; } for(var i=0; i<snakeLength-1; i++) { if(snake.snakeBody[i][0] == snake.snakeBody[snakeLength - 1][0] && snake.snakeBody[i][1] == snake.snakeBody[snakeLength - 1][1]) { alert("game over"); clearInterval(t); return; } } //吃到食物 if(snake.snakeBody[snakeLength - 1][0] == food.x && snake.snakeBody[snakeLength - 1][1] == food.y) { //蛇长加1 snake.snakeBody.push([food.x, food.y, null]) //刷新食物 showFood(); } if(snake.snakeBody[snakeLength-1][0]>=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() })()

运行截图：