js 贪吃蛇大部分显而易见的问题已解决但是代码过于复杂欢迎纠错

时间：2015-05-10 09:57:06 阅读：242 评论：0 收藏：0 [点我收藏+]

//代码相比，上次做了优化，解决自身缠绕问题解决后退问题食物出现问题与自身缠绕问题大同小异，这里不做代码演示，各位如有兴趣，可以自己参考，自作

//鄙人拙作，献丑了

//时间：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>

js 贪吃蛇大部分显而易见的问题已解决但是代码过于复杂欢迎纠错

标签：js web开发游戏

原文地址：http://blog.csdn.net/do_bset_yourself/article/details/45603757

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

js 贪吃蛇 大部分显而易见的问题已解决 但是代码过于复杂 欢迎纠错

js 贪吃蛇大部分显而易见的问题已解决但是代码过于复杂欢迎纠错