贪吃蛇的javascript实现

最新推荐文章于 2024-09-12 11:59:24 发布

iteye_1176

最新推荐文章于 2024-09-12 11:59:24 发布

阅读量157

点赞数

文章标签： javascript ViewUI

最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。

在学习的过程中发现使用JS实现动态效果挺有趣的。

在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。

思路：使用10px*10px的div层担当“像素”，然后使用40*40矩阵160个“像素”构成了游戏的界面。

下面是代码：

 
  //JavaScriptDocument  
 alert("键盘的方向键控制方向，空格键暂停。/nLIFE制作/nhttp://blog.csdn.net/anhulife"); 
 //添加基本的图形块，即160个10*10的层组成的二维矩阵  
 varrowindex=newArray(40); 
 varcolindex; 
 varcell; 
 //图像单元的定义  
 varbackcolor="black"; 
 for(vari=0;i<40;i++) 
{
 colindex=newArray(40); 
 for(varj=0;j<40;j++) 
{
 //设置每个单元的属性  
 cell=document.createElement("div"); 
cell.style.backgroundColor=backcolor;
 cell.style.width="10px"; 
 cell.style.height="10px"; 
 cell.style.position="absolute"; 
 cell.style.left=""+(j*10+100)+"px"; 
 cell.style.top=""+(i*10+100)+"px"; 
 cell.style.overflow="hidden"; 
 //添加单元  
document.body.appendChild(cell);
 //填充列组  
colindex[j]=cell;
}
 //填充行组  
rowindex[i]=colindex;
}
 //贪吃蛇类的定义，基于基本的图像单元  
 functionsnake() 
{
 //定义蛇的身体，并初始化  
 this.bodycolor="white"; 
 this.bodys=newArray(); 
 for(vari=20;i<25;i++) 
{
 rowindex[20][i].style.backgroundColor=this.bodycolor; 
 //rowindex的第一个坐标是行标，第二是列标  
 this.bodys.push(rowindex[20][i]); 
}
 //定义蛇的头部坐标，第一个是行标,第二个是列标  
 this.head=[20,20]; 
 //定义蛇的前进方向，0代表左、1代表下、2代表右、3代表上  
 this.direct=0; 
}
 //移动模块  
 functionmove() 
{
 //根据前进方向计算头部的坐标  
 switch(this.direct) 
{
 case0: 
 this.head[1]-=1; 
 break; 
 case1: 
 this.head[0]+=1; 
 break; 
 case2: 
 this.head[1]+=1; 
 break; 
 case3: 
 this.head[0]-=1; 
 break; 
}
 //判断是否越界  
 if(this.head[0]<0||this.head[0]>39||this.head[1]<0||this.head[1]>39) 
{
 //如果越界则返回false  
 returnfalse; 
}
 else 
 //如果没有越界则检查下一个元素的性质，如果是食物则吃掉，并再生成食物。如果是其自身则返回false  
 if(this.head[0]==food[0]&&this.head[1]==food[1]) 
{
 //如果是食物  
 rowindex[this.head[0]][this.head[1]].style.backgroundColor=this.bodycolor; 
 this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
score++;
makefood();
 returntrue; 
}
 else 
 //如果是它自身  
 if(rowindex[this.head[0]][this.head[1]].style.backgroundColor==this.bodycolor) 
{
 if(rowindex[this.head[0]][this.head[1]]==this.bodys.pop())//如果是它的尾部  
{
 this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
 returntrue; 
}
 //如果不是尾部  
 returnfalse; 
}
 //以上情况都不是  
 this.bodys.pop().style.backgroundColor=backcolor; 
 rowindex[this.head[0]][this.head[1]].style.backgroundColor=this.bodycolor; 
 this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
 returntrue; 
}
snake.prototype.move=move;
 //生成食物模块  
 varfoodcolor="blue"; 
 varfood=[20,17]; 
rowindex[food[0]][food[1]].style.backgroundColor=foodcolor;
 functionmakefood() 
{
 vartempfood; 
 vartempelement; 
out:
 while(true) 
{
tempfood=[Math.round(Math.random()*39),Math.round(Math.random()*39)];
tempelement=rowindex[tempfood[0]][tempfood[1]];
 for(variins.bodys) 
{
 if(s.bodys[i]==tempelement) 
{
 //如果随机生成的食物在蛇的身体上，则跳出继续  
 continueout; 
}
 //生成食物成功  
 breakout; 
}
}
food=tempfood;
rowindex[food[0]][food[1]].style.backgroundColor=foodcolor;
}
 //转向模块和暂停模块  
document.οnkeydοwn=turnorstop;
 functionturnorstop(event) 
{
 if(window.event!=undefined) 
{
 if(parseInt(window.event.keyCode)==32) 
{
 alert("休息一下"); 
}
 else 
{
 switch(parseInt(window.event.keyCode)) 
{
 case37: 
 if(s.direct!=2) 
s.direct=0;
 break; 
 case38: 
 if(s.direct!=1) 
s.direct=3;
 break; 
 case39: 
 if(s.direct!=0) 
s.direct=2;
 break; 
 case40: 
 if(s.direct!=3) 
s.direct=1;
 break; 
}
}
}
 else 
{
 if(parseInt(event.which)==32) 
{
 alert("休息一下"); 
}
 else 
{
 switch(parseInt(event.which)) 
{
 case37: 
 if(s.direct!=2) 
s.direct=0;
 break; 
 case38: 
 if(s.direct!=1) 
s.direct=3;
 break; 
 case39: 
 if(s.direct!=0) 
s.direct=2;
 break; 
 case40: 
 if(s.direct!=3) 
s.direct=1;
 break; 
}
}
}
}
 //启动游戏模块  
 vars=newsnake(); 
 vartime=60;//蛇的速度指数  
 functionstartmove() 
{
 if(s.move()) 
{
setTimeout(startmove,time);
}
 else 
{
 alert("GAMEOVER/n您的分数是:"+score+"分"); 
}
}
 //分数设置  
 varscore=-1; 
 //运行游戏  
startmove();
 