JS面向对象--贪吃蛇游戏

13 篇文章 2 订阅
1 篇文章 0 订阅

在线预览

https://1024code.com/codecubes/gpsubu9

代码

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="1">-->
<title>无标题文档</title>
<script>
 window.onload=function(){
	 map=new Map();
	 map.showMap();
	 food=new Food();
	 food.showfood();
	 snake=new Snake();
	 snake.showsnake();
	 snake.snakeMove();
 document.getElementsByTagName('body')[0].onkeydown=function(event){
	s1=snake.snakebody.length;
			
			if(event.keyCode==39){
				 snake.snakebody[s1-1][2]="right";
				}
				
			if(event.keyCode==37){
				snake.snakebody[s1-1][2]="left";
				}
					
			if(event.keyCode==38){
			    snake.snakebody[s1-1][2]="up";
				}
				
			if(event.keyCode==40){
				snake.snakebody[s1-1][2]="down";
				}
	  }
	 }
function Map(){
	  this.showMap=function(){
	  this.mapdiv=document.createElement('div');
	  this.mapdiv.style.width=840+'px';
	  this.mapdiv.style.height=440+'px';
	  this.mapdiv.style.backgroundColor='pink';
	  this.mapdiv.style.border="10px solid #666";
	  this.mapdiv.style.position='absolute';
 document.getElementsByTagName('body')[0].appendChild(this.mapdiv);
	}	   
  }   
function Food(){
	this.foodWidth=20;
	this.foodHeight=20;
	this.foodX=Math.ceil(Math.random()*40);
	this.foodY=Math.ceil(Math.random()*20);
	this.showfood=function(){
	this.fooddiv=document.createElement('div');
	  this.fooddiv.style.width=this.foodWidth+'px';
	  this.fooddiv.style.height=this.foodHeight+'px';
	  this.fooddiv.style.backgroundColor='green';
	  this.fooddiv.style.position='absolute';
	  this.fooddiv.style.left=this.foodX*this.foodWidth+'px';
      this.fooddiv.style.top=this.foodY*this.foodHeight+'px';
      map.mapdiv.appendChild(this.fooddiv);	
		}
		
	}
function Snake(){
	this.snakeWidth=20;
	this.snakeHeight=20;
	this.snakebody=[
					[0,10,'right','blue',null],	
					[1,10,'right','blue',null],
					[2,10,'right','blue',null],
					[3,10,'right','blue',null],
					[4,10,'right','red',null]
					 ];
  this.showsnake=function(){
		for(var i=0;i<this.snakebody.length;i++)
		{ 
		 if(this.snakebody[i][4]==null){
		  this.snakebody[i][4]=document.createElement('div');
	      this.snakebody[i][4].style.width=this.snakeWidth+'px';
		  this.snakebody[i][4].style.height=this.snakeHeight+'px';
		  this.snakebody[i][4].style.backgroundColor=this.snakebody[i][3];
		  this.snakebody[i][4].style.position='absolute';
		  this.snakebody[i][4].style.left=this.snakebody[i][0]*this.snakeWidth+"px";
		  this.snakebody[i][4].style.top=this.snakebody[i][1]*this.snakeHeight+"px";
		  this.snakebody[i][4].style.borderRadius=this.snakeWidth+'px';
		  map.mapdiv.appendChild(this.snakebody[i][4]);
			}
		  }
		}
  this.snakeMove=function(){
	  for(var i=0;i<this.snakebody.length;i++)
	  {
		  if(this.snakebody[i][2]=='right')
		  {this.snakebody[i][0]+=1;}
		  else if(this.snakebody[i][2]=='left')
		  {this.snakebody[i][0]-=1;}
		  else if(this.snakebody[i][2]=='up')
		  {this.snakebody[i][1]-=1;}
		  else if(this.snakebody[i][2]=='down')
		  {this.snakebody[i][1]+=1;}
		  
	  this.snakebody[i][4].style.left=this.snakebody[i][0]*this.snakeWidth+"px";
	  this.snakebody[i][4].style.top=this.snakebody[i][1]*this.snakeHeight+"px";}
		  for(var j=0;j<this.snakebody.length-1;j++)
		     {
			this.snakebody[j][2]=this.snakebody[j+1][2];
			 }		
       if(this.snakebody[this.snakebody.length-1][1]<0
	    ||this.snakebody[this.snakebody.length-1][1]>21
		||this.snakebody[this.snakebody.length-1][0]<0
		||this.snakebody[this.snakebody.length-1][0]>41)
		  {alert("OVER");
			 return;}		 
	  if(this.snakebody[this.snakebody.length-1][0]==food.foodX
	  &&this.snakebody[this.snakebody.length-1][1]==food.foodY){
					var newX;
					var newY;
					var newD=this.snakebody[0][2];
					if(this.snakebody[0][2]=="right"){
						 newX=this.snakebody[0][0]-1;
						 newY=this.snakebody[0][1];
						}
					if(this.snakebody[0][2]=="left"){
						newX=this.snakebody[0][0]+1;
						newY=this.snakebody[0][1];
						}
					if(this.snakebody[0][2]=="up"){
						 newX=this.snakebody[0][0];
						 newY=this.snakebody[0][1]+1;
						}	
					if(this.snakebody[0][2]=="down"){
						 newX=this.snakebody[0][0];
						 newY=this.snakebody[0][1]-1;
						}
						//unshift()加到数组的头部的方法
						this.snakebody.unshift([newX,newY,newD,"black",null]);
						this.showsnake();
						//食物随机
				food.foodX=Math.ceil(Math.random()*40);
		        food.foodY=Math.ceil(Math.random()*20);
			    food.fooddiv.style.left=food.foodX*food.foodWidth+"px";
			    food.fooddiv.style.top=food.foodY*food.foodHeight+"px";
					}			
					
	 setTimeout("snake.snakeMove()",200);	
	  }	
	  
}	  
</script>
</head>
<body>
</body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
利用面向对象的方法,实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候,一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。 3. 在underscore中,使用_.random(a,b)即可获得a-b中的一个随机数。 4. 在求食物的随机位置的时候,用到了panel.clientHeight/this.height - 1) * this.height。 原理是使用盒子的高度/小球的高度,可以算得最多放多少个小球。因为要控制小球不能超过边界,所以总数量要减去1,数量×高度即为随机位置的最大值。 5. 在蛇对象中,用body数组存放蛇身体每一个部分对象。蛇的绘制过程就是遍历body,在面板上绘制。 6. 蛇的移动分为两部分。 ① 蛇节移动到前一个蛇节的位置。直到蛇头后一个蛇节移动到蛇头的位置。 ② 根据direction判断蛇头如何移动。 注意:在游戏绘制的过程中,界面的每一次绘制都要**删除**之前的绘制,不然会叠加到一起。 7. 在蛇的闭包中建一个局部数组,存储蛇对象,可以更加方便的删除操作。 8. 只有在原型对象中的方法和属性,外界是可以调用的。 9. 蛇的移动(动画)必然需要定时器协助。定时器的时间,即象征着刷新速度,也就是难度。 10. this所在的函数在哪一个对象中,this就指向谁。单独写一个函数的时候,如果调用之前对象的this,需要备份指针(将对象的this赋值给另一个变量)。 11. JavaScript原生的键盘按下事件(keydown) 中,事件有一个keyCode属性,其值代表按下的键。其中:37—left、38—top、39—right、40—bottom。 12. 边界控制。通过判断蛇头与最大X和Y的关系,判断是否碰到边界。 13. confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。 14. window.location.reload(); 重新加载当前文档 15. window.close() 方法用于关闭浏览器窗口。 16. 与食物的碰撞检测:如果蛇头和食物坐标重叠,将蛇尾添加到body中。并重新绘制一个食物点,将之前的食物删掉。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江拥羡橙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值