//虽然代码没有别人写的简单，但是这是自己的思想，通过这次实例，学到了很多，也发现了很多不足，努力学习啊，小小的贪吃蛇也包含了很多东西还有
//好多问题需要解决，比如，如何判断蛇头碰到蛇身，如何让食物不出现在蛇的身上等，欢迎大家一起探讨
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制移动</title>
<script>
window.onload=function(){
var snake={
timer:null,
oEvent:null,
dir:null,
sp:20,
speed:300,
num:0,
oDiv:document.getElementsByClassName(‘lei‘)[0],
p:document.getElementsByClassName(‘lei‘),
oBigDiv:document.getElementById(‘lei1‘),
color:function(){//颜色分离
for(var i=0;i<snake.p.length;i++){
if(i%2==0)
snake.p[i].style.background=‘red‘
}
},
move:function(oEvent){//控制方向
//alert(snake.oDiv.style[snake.dir]);
switch(oEvent.keyCode){
case 97:clearInterval(snake.timer);
snake.speed=snake.speed-50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
break;
case 98:clearInterval(snake.timer);snake.speed=snake.speed+50;
snake.timer=setInterval(function(){
snake.oDiv.style[snake.dir]=snake.oDiv.offsetLeft+snake.sp+‘px‘;
snake.follow();
},snake.speed);
break;
case 32:clearInterval(snake.timer);break;
case 37: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=-20;
snake.oDiv.style.left=snake.oDiv.offsetLeft-20+‘px‘;
snake.follow();
},snake.speed);break;
case 39: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘left‘;
snake.sp=20;
snake.oDiv.style.left=snake.oDiv.offsetLeft+20+‘px‘;
snake.follow();
},snake.speed);break;
case 38: clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=-20;
snake.oDiv.style.top=snake.oDiv.offsetTop-20+‘px‘;
snake.follow();
},snake.speed);break;
case 40:clearInterval(snake.timer);
snake.timer=setInterval(function(){
snake.dir=‘top‘;
snake.sp=20;
snake.oDiv.style.top=snake.oDiv.offsetTop+20+‘px‘;
snake.follow();
},snake.speed);break;
}
},
follow:function(){
for(var i=snake.p.length-1;i>0;i--){
snake.p[i].style.left=snake.p[i-1].offsetLeft+‘px‘;
snake.p[i].style.top=snake.p[i-1].offsetTop+‘px‘;
}
if(snake.oDiv.offsetLeft>snake.oBigDiv.offsetWidth-snake.oDiv.offsetWidth){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetLeft<0)
{
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetTop<0)
{
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if(snake.oDiv.offsetTop>snake.oBigDiv.offsetHeight-snake.oDiv.offsetHeight){
alert(‘游戏结束，共吃‘+snake.num+‘个食物‘);
clearInterval(snake.timer);
document.onkeydown=null;
}
if((snake.oDiv.offsetLeft==snake.pos.x)&&(snake.oDiv.offsetTop==snake.pos.y)){
snake.num++;
snake.eat();
}
},
pos:{
x:Math.round(Math.random()*39)*20,
y:Math.round(Math.random()*39)*20,
},
food:function(){
var food=document.createElement(‘div‘);
food.className=‘food‘;
food.style.left=snake.pos.x+‘px‘;
food.style.top=snake.pos.y+‘px‘;
snake.oBigDiv.appendChild(food);
},
eat:function(){//吃食物
var she=document.createElement(‘div‘);
she.className=‘lei‘;
snake.oBigDiv.appendChild(she);
snake.pos.x=Math.round(Math.random()*39)*20;
snake.pos.y=Math.round(Math.random()*39)*20;
snake.oBigDiv.removeChild(snake.oBigDiv.getElementsByClassName(‘food‘)[0]);
snake.food();
}
}
snake.food();
document.onkeydown=function(ev){
var oEvent=ev||event;
snake.color();
snake.oEvent=oEvent;
snake.move(snake.oEvent);
}
}
</script>
</head>
<style>
.food{
position:absolute;
background:#FF0;
width:20px;
height:20px;
float:left;
}
.lei{
width:20px;
height:20px;
background:#063;
position:absolute;
float:left;
}
#lei1{
border:1px solid #000;
width:798px;
height:798px;
position:absolute;
top:150px;
left:50px;
}
#text{
background:#9F3;
width:800px;
height:100px;
position:absolute;
left:50px;
}
</style>
<body>
<div id="text">
<h1>说明：上下左右控制方向，小键盘1加速，2减速，space键暂停，上下左右随便开始</h1>
</div>
<div id="lei1">
<div class="lei"></div>
<div class="lei"></div>
<div class="lei"></div>
<div class="lei"></div>
<div>
</body>
</html>