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

江拥羡橙

于 2023-07-04 16:38:00 发布

阅读量431

点赞数 1

分类专栏：游戏前端 # JavaScript 文章标签： javascript 游戏前端

本文链接：https://blog.csdn.net/qq_37215621/article/details/131538104

版权

前端同时被 3 个专栏收录

56 篇文章 7 订阅

订阅专栏

JavaScript

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>