提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS写的贪吃蛇游戏(个人练习)

JS游戏 个人 练习 贪吃蛇
2023-06-13 09:15:03 时间
JS贪吃蛇游戏，个人练习之用，放在这备份一下，
 
复制代码代码如下:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS贪吃蛇-练习</title>
<styletype="text/css">
#panneltable{
border-collapse:collapse;
}
#panneltabletd{
border:1pxsolid#808080;
width:10px;
height:10px;
font-size:0;
line-height:0;
overflow:hidden;
}
#panneltable.snake{
background-color:green;
}
#panneltable.food{
background-color:blue;
}
</style>
<scripttype="text/javascript">
varDirection=newfunction(){
this.UP=38;
this.RIGHT=39;
this.DOWN=40;
this.LEFT=37;
};
varCommon=newfunction(){
this.width=20;/*水平方向方格数*/
this.height=20;/*垂直方向方格数*/
this.speed=250;/*速度值越小越快*/
this.workThread=null;
};
varMain=newfunction(){
varcontrol=newControl();
window.onload=function(){
control.Init("pannel");
/*开始按钮*/
document.getElementById("btnStart").onclick=function(){
control.Start();
this.disabled=true;
document.getElementById("selSpeed").disabled=true;
document.getElementById("selSize").disabled=true;
};
/*调速度按钮*/
document.getElementById("selSpeed").onchange=function(){
Common.speed=this.value;
}
/*调大小按钮*/
document.getElementById("selSize").onchange=function(){
Common.width=this.value;
Common.height=this.value;
control.Init("pannel");
}
};
};
/*控制器*/
functionControl(){
this.snake=newSnake();
this.food=newFood();
/*初始化函数，创建表格*/
this.Init=function(pid){
varhtml=[];
html.push("<table>");
for(vary=0;y<Common.height;y++){
html.push("<tr>");
for(varx=0;x<Common.width;x++){
html.push("<tdid="box_"+x+"_"+y+""> </td>");
}
html.push("</tr>");
}
html.push("</table>");
this.pannel=document.getElementById(pid);
this.pannel.innerHTML=html.join("");
};
/*开始游戏-监听键盘、创建食物、刷新界面线程*/
this.Start=function(){
varme=this;
this.MoveSnake=function(ev){
varevt=window.event||ev;
me.snake.SetDir(evt.keyCode);
};
try{
document.attachEvent("onkeydown",this.MoveSnake);
}catch(e){
document.addEventListener("keydown",this.MoveSnake,false);
}
this.food.Create();
Common.workThread=setInterval(function(){
me.snake.Eat(me.food);me.snake.Move();
},Common.speed);
};
}
/*蛇*/
functionSnake(){
this.isDone=false;
this.dir=Direction.RIGHT;
this.pos=newArray(newPosition());
/*移动-擦除尾部，向前移动，判断游戏结束(咬到自己或者移出边界)*/
this.Move=function(){
document.getElementById("box_"+this.pos[0].X+"_"+this.pos[0].Y).className="";
//所有向前移动一步
for(vari=0;i<this.pos.length-1;i++){
this.pos[i].X=this.pos[i+1].X;
this.pos[i].Y=this.pos[i+1].Y;
}
//重新设置头的位置
varhead=this.pos[this.pos.length-1];
switch(this.dir){
caseDirection.UP:
head.Y--;
break;
caseDirection.RIGHT:
head.X++;
break;
caseDirection.DOWN:
head.Y++;
break;
caseDirection.LEFT:
head.X--;
break;
}
this.pos[this.pos.length-1]=head;
//遍历画蛇，同时判断游戏结束
for(vari=0;i<this.pos.length;i++){
varisExits=false;
for(varj=i+1;j<this.pos.length;j++)
if(this.pos[j].X==this.pos[i].X&&this.pos[j].Y==this.pos[i].Y){
isExits=true;
break;
}
if(isExits){this.Over();/*咬自己*/break;}
varobj=document.getElementById("box_"+this.pos[i].X+"_"+this.pos[i].Y);
if(obj)obj.className="snake";else{this.Over();/*移出边界*/break;}
}
this.isDone=true;
};
/*游戏结束*/
this.Over=function(){
clearInterval(Common.workThread);
alert("游戏结束！");
}
/*吃食物*/
this.Eat=function(food){
varhead=this.pos[this.pos.length-1];
varisEat=false;
switch(this.dir){
caseDirection.UP:
if(head.X==food.pos.X&&head.Y==food.pos.Y+1)isEat=true;
break;
caseDirection.RIGHT:
if(head.Y==food.pos.Y&&head.X==food.pos.X-1)isEat=true;
break;
caseDirection.DOWN:
if(head.X==food.pos.X&&head.Y==food.pos.Y-1)isEat=true;
break;
caseDirection.LEFT:
if(head.Y==food.pos.Y&&head.X==food.pos.X+1)isEat=true;
break;
}
if(isEat){
this.pos[this.pos.length]=newPosition(food.pos.X,food.pos.Y);
food.Create(this.pos);
}
};
/*控制移动方向*/
this.SetDir=function(dir){
switch(dir){
caseDirection.UP:
if(this.isDone&&this.dir!=Direction.DOWN){this.dir=dir;this.isDone=false;}
break;
caseDirection.RIGHT:
if(this.isDone&&this.dir!=Direction.LEFT){this.dir=dir;this.isDone=false;}
break;
caseDirection.DOWN:
if(this.isDone&&this.dir!=Direction.UP){this.dir=dir;this.isDone=false;}
break;
caseDirection.LEFT:
if(this.isDone&&this.dir!=Direction.RIGHT){this.dir=dir;this.isDone=false;}
break;
}
};
}
/*食物*/
functionFood(){
this.pos=newPosition();
/*创建食物-随机位置创建立*/
this.Create=function(pos){
document.getElementById("box_"+this.pos.X+"_"+this.pos.Y).className="";
varx=0,y=0,isCover=false;
/*排除蛇的位置*/
do{
x=parseInt(Math.random()*(Common.width-1));
y=parseInt(Math.random()*(Common.height-1));
isCover=false;
if(posinstanceofArray){
for(vari=0;i<pos.length;i++){
if(x==pos[i].X&&y==pos[i].Y){
isCover=true;
break;
}
}
}
}while(isCover);
this.pos=newPosition(x,y);
document.getElementById("box_"+x+"_"+y).className="food";
};
}
functionPosition(x,y){
this.X=0;
this.Y=0;
if(arguments.length>=1)this.X=x;
if(arguments.length>=2)this.Y=y;
}
</script>
</head>
<body>
<divid="pannel"style="margin-bottom:10px;"></div>
<selectid="selSize">
<optionvalue="20">20*20</option>
<optionvalue="30">30*30</option>
<optionvalue="40">40*40</option>
</select>
<selectid="selSpeed">
<optionvalue="500">速度-慢</option>
<optionvalue="250"selected="selected">速度-中</option>
<optionvalue="100">速度-快</option>
</select>
<inputtype="button"id="btnStart"value="开始"/>
</body>
</html>

相关文章