//代码相比，上次做了优化，解决自身缠绕问题 解决后退问题 食物出现问题与自身缠绕问题大同小异，这里不做代码演示，各位如有兴趣，可以自己参考，自作
//鄙人拙作，献丑了
//时间：6小时
<!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.getElementById(‘tou‘),
p:document.getElementsByClassName(‘lei‘),
update:function(){
snake.p=document.getElementsByClassName(‘lei‘);
},
oBigDiv:document.getElementById(‘lei1‘),
color:function(){//颜色分离
for(var i=1;i<snake.p.length;i++){
if(i%2==0)
snake.p[i].style.background=‘red‘
}
},
move:function(oEvent){//控制方向
if(snake.dir==‘left‘&&oEvent.keyCode==37&&snake.sp>0)
return;
if(snake.dir==‘left‘&&oEvent.keyCode==39&&snake.sp<0)//控制不能后退，四种情况
return;
if(snake.dir==‘top‘&&oEvent.keyCode==38&&snake.sp>0)
return ;
if(snake.dir==‘top‘&&oEvent.keyCode==40&&snake.sp<0)
return;
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(){
snake.p[0].style.left=snake.oDiv.offsetLeft+‘px‘;
snake.p[0].style.top=snake.oDiv.offsetTop+‘px‘;
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‘;
}
snake.death();
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();
},
death:function(){//解决自身缠绕问题
for(var i=2;i<snake.p.length;i++){
if(snake.p[i].offsetLeft==snake.oDiv.offsetLeft&&snake.p[i].offsetTop==snake.oDiv.offsetTop){
alert("you are dead!!");
clearInterval(snake.timer);
document.onkeydown=null;
}
}
}
}
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;
}
#tou{
width:20px;
height:20px;
background:#0FF;
position:absolute;
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 id="tou" class="lei">1</div>
<div class="lei">2</div>
<div class="lei">3</div>
<div class="lei">4</div>
<div>
</body>
</html>