步骤：
1、DOM创建地图
2、创建蛇
3、创建食物
4、方向键控制蛇移动
5、蛇遇到食物，蛇身赠长，创建食物
6、游戏结束的两种方式：撞墙和撞到自身
点击此处游戏
点以下界面并按任意键开始游戏：
代码：
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>贪吃蛇游戏title>
head>
<body onLoad="createMap()" onkeydown="keyDown(event)">
<p align="center">任意键启动游戏,SHIFT键暂停游戏，方向键控制蛇的移动方向,蛇碰壁或者碰到自己身体的时候游戏结束！p>
<script type="text/javascript">
var mapSize = 300,//游戏地图大小
snakeSize = 10,//一截蛇身大小
foodSize = 10,//一份食物大小
step = 10, //蛇每次移动的距离
play,
speed = 500,
stepX = 10,stepY = 0,
snakes = [];//存储蛇身节点
function createMap(){//创建地图
var map = document.createElement("div");
map.id = "map";
map.style.position = "absolute";
map.style.width = mapSize+"px";
map.style.height = mapSize+"px";
map.style.left = "50%";
map.style.marginLeft = "-"+ mapSize/2 + "px";
map.style.background = "url(map.gif)";
map.style.border = "2px solid #000";
document.body.appendChild(map);
createSnake();
createFood();
//move();
}
function positionRandom(){// 创建10的倍数XY坐标数组
var xyPos = Math.floor(mapSize/snakeSize),
xyArr = [];//空数组
for(var i=0;i<xyPos;i++){
xyArr.push(i*snakeSize);
}
//alert(xyArr);
return xyArr[Math.floor(Math.random()*xyArr.length)];
}
function createSnake(){//创建蛇身
var map = document.getElementById("map");
var snakeElement = document.createElement("div");
snakeElement.id = "snake";
snakeElement.style.width = snakeSize + "px";
snakeElement.style.height = snakeSize + "px";
snakeElement.style.backgroundColor = "red";
snakeElement.style.position = "absolute";
snakeElement.style.left = positionRandom() + "px";
snakeElement.style.top = positionRandom() + "px";
map.appendChild(snakeElement);
}
function createFood(){//创建食物
var map = document.getElementById("map");
var food = document.createElement("div");
food.id = "food";
food.style.width = foodSize + "px";
food.style.height = foodSize + "px";
food.style.backgroundColor = "yellow";
food.style.position = "absolute";
food.style.left = positionRandom() + "px";
food.style.top = positionRandom() + "px";
map.appendChild(food);
}
function keyDown(e){//监控键盘事件
switch(e.keyCode){
case 37:
stepX = -step;
stepY = 0;
break;
case 39:
stepX = step;
stepY = 0;
break;
case 38:
stepX = 0;
stepY = -step;
break;
case 40:
stepX = 0;
stepY = step;
break;
case 16:
alert("暂停");
break;
}
if(play){
clearInterval(play);
}
play = setInterval(function(){ move(stepX,stepY);},speed); //控制蛇移动
}
function move(x,y){// 蛇移动控制
var snake = document.getElementById("snake");
snakeLeft = parseInt(snake.style.left),
snakeTop = parseInt(snake.style.top);
//alert("snakeleft:"+snakeLeft +"x:"+x+"Y:"+y);
snake.style.left = (snakeLeft + x) + "px"; //蛇身的水平移动大小
snake.style.top = (snakeTop + y) + "px"; //蛇身的上下移动
checkFood(snakeLeft+x,snakeTop+y);
if(snakes.length>0){
for(var i=snakes.length-1;i>0;i--){
snakes[i].style.left = snakes[i-1].style.left;
snakes[i].style.top = snakes[i-1].style.top;
}
snakes[0].style.left = (snakeLeft + x - x) + "px";
snakes[0].style.top = (snakeTop + y - y) + "px";
//alert(snake.style.left);
}
if(checkWall()||checkMe()){
clearInterval(play);
alert("Game Over!");
document.location.reload();
}
}
function checkFood(snakeX,snakeY){ //检查食物
var food = document.getElementById("food");
var foodX = parseInt(food.style.left);
var foodY = parseInt(food.style.top);
if(snakeX == foodX && snakeY == foodY){
food.parentNode.removeChild(food);
createFood();
snakeGrow();
}
}
function checkWall(){ //检查是否碰壁
var snake = document.getElementById("snake");
var snakeX = parseInt(snake.style.left);
var snakeY = parseInt(snake.style.top);
if(snakeX<0||snakeY<0||snakeX>mapSize-step||snakeY>mapSize-step){
return true;
}else{
return false;
}
}
function checkMe(){//检查时候碰到自己的身体
var snake = document.getElementById("snake");
var snakeX = snake.style.left;
var snakeY = snake.style.top;
if(snakes.length>0){
for(var i=0;i<snakes.length;i++){
if(snakeX == snakes[i].style.left && snakeY == snakes[i].style.top){
//alert(snakeX + "+" +snakes[i].style.left + ":::::" + snakeY + "+" + snakes[i].style.top);
return true;
}
}
}
return false;
}
function snakeGrow(){//蛇长大
var map = document.getElementById("map");
var snake = document.getElementById("snake");
var newSnake = snake.cloneNode(false);
snakes[snakes.length]=newSnake;
newSnake.id = "snake" + snakes.length;
map.appendChild(newSnake);
switch (snakes.length){ // 判断数组长度，改变速度
case 3:
speed = speed -50;
break;
case 6:
speed = speed -50;
break;
case 9:
speed = speed -50;
break;
case 12:
speed = speed -50;
break;
case 15:
speed = speed -50;
break;
case 20:
speed = speed -50;
break;
case 25:
speed = speed -50;
break;
case 30:
speed = speed - 50;
break;
case 35:
speed = speed - 10;
break;
case 40:
speed = speed - 10;
break;
case 45:
speed = speed - 10;
break;
case 50:
speed = speed - 10;
break;
case 55:
speed = speed -10;
break;
case 60:
speed = speed -10;
break;
case 65:
speed = speed -10;
break;
case 70:
speed = speed -10;
break;
case 75:
speed = speed -10;
break;
}
}
script>
body>
html>