贪吃蛇案例

最新推荐文章于 2022-12-08 21:55:35 发布

yjx_43750162

最新推荐文章于 2022-12-08 21:55:35 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/96201750

版权

HTML页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
ript src="js/Snake1.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 
 </body>
</html>

js中的代码

// 1,创建地图对象  div 
var _map;
var _snake;
var _food;
function Map(){
 // this关键字表示当前这个对象 Map
 // 创建对象的属性
 this.width=800;
 this.height=600;
 this.color='green';
 // 用来存储 具体的地图节点
 this.div_map=null;// 空值
 // 创建一个用来显示地图的 方法
 this.display=function(){
  this.div_map=document.createElement('div');
  // console.log(div_map);
  this.div_map.style.width=this.width+'px';
  this.div_map.style.height=this.height+'px';
  this.div_map.style.background=this.color;
  this.div_map.style.margin='100px auto';
  this.div_map.style.position='relative';
  // div_map.setAttribute('class','map');
  // 将该div 添加进 body(获取);
  document.getElementsByTagName('body')[0].appendChild(this.div_map);
 }
}
// 2,创建食物  对象
function Food(){
 this.width=20;
 this.height=20;
 this.color='red';
 
 // 定义两个属性x,y 用来存储食物的坐标(所占据的格子)
 this.x=0;
 this.y=0;
 
 this.food=null;
 // 创建 一个用来显示食物的方法
 this.display=function(){
  if(this.food==null){
   this.food=document.createElement('div');
   this.food.style.width=this.width+'px';
   this.food.style.height=this.height+'px';
   this.food.style.background=this.color;
   // 设置食物的位置是指地图div中的left  top
   this.food.style.position='absolute';
   // 在地图_map对象中获取属性div_map，从而将食物元素添加进去
   _map.div_map.appendChild(this.food);
  }
  this.x=Math.round(Math.random()*39);
  this.y=Math.round(Math.random()*29);
  this.food.style.left=this.x*this.width+'px';
  this.food.style.top=this.y*this.height+'px';
  
 }
}
// 3,创建蛇对象
function Snake(){
 this.width=20;
 this.height=20;
 var time;
 // 创建一个记录方向的属性
 this.directStr=null;
 this.snakeArr=[
  [8,5,'blue',null],
  [7,5,'yellow',null],
  [6,5,'yellow',null]
 ];
 // 创建一个显示蛇的方法
 this.display=function(){
  for(var i=0;i<this.snakeArr.length;i++){
   // 加if的原因: 是因为设移动时调用了显示蛇的方法display,所以创建了多个蛇div
   if(this.snakeArr[i][3]==null){
    this.snakeArr[i][3]=document.createElement('div');
    this.snakeArr[i][3].style.width=this.width+'px';
    this.snakeArr[i][3].style.height=this.height+'px';
    this.snakeArr[i][3].style.backgroundColor=this.snakeArr[i][2];
    this.snakeArr[i][3].style.borderRadius=this.width+'px';
    this.snakeArr[i][3].style.position='absolute';
    _map.div_map.appendChild(this.snakeArr[i][3]);
   }
   this.snakeArr[i][3].style.left=this.snakeArr[i][0]*this.width+'px';
   this.snakeArr[i][3].style.top=this.snakeArr[i][1]*this.height+'px';
  }
 }
 this.setDirect=function(direct){
  switch (direct){
   case 37:
     this.directStr='left';
    break;
   case 38:
    this.directStr='up';
    break;
   case 39:
    this.directStr='right';
    break;
   case 40:
    this.directStr='down';
    break;
   default:
    break;
  }
 }
 // 创建一个方法控制蛇的移动
 this.move=function(){
  if(this.directStr!=null){
   // 控制蛇身移动
   for (var i=this.snakeArr.length-1;i>0;i--) {
    this.snakeArr[i][0]=this.snakeArr[i-1][0];
    this.snakeArr[i][1]=this.snakeArr[i-1][1];
   }
   switch (this.directStr){
    case 'left':
     this.snakeArr[0][0]-=1;
     break;
    case 'up':
     this.snakeArr[0][1]-=1;
     break;
    case 'right':
     this.snakeArr[0][0]+=1;
     break;
    case 'down':
     this.snakeArr[0][1]+=1;
    default:
     break;
   }
  }
  // 蛇迟到食物身体加一节
  if(this.snakeArr[0][0]==_food.x  && this.snakeArr[0][1]==_food.y){
   _food.display();
   // 添加一节蛇身到snakeArr中
   var x=this.snakeArr[this.snakeArr.length-1][0];
   var y=this.snakeArr[this.snakeArr.length-1][1];
   this.snakeArr.push([x,y,'pink',null]);
  }
   // 判断碰到墙壁
  if(this.snakeArr[0][0]<0 || this.snakeArr[0][0]>39 || this.snakeArr[0][1]<0 || this.snakeArr[0][1]>29){
   alert('Game Over!');
   return false;
  }
  //判断碰到自己本身
  for(var i=1;i<this.snack.length;i++){
   if(this.snack[0][0]==this.snack[i][0] && this.snack[0][1]==this.snack[i][1]){
    alert('自己吃自己');
    return ;
   }
  }
  // 通过对象  调用显示蛇的方法
  _snake.display();
  time= setTimeout('_snake.move()',200);
 }
}
window.onload=function(){
_map=new Map(); // 实例化
 // 通过实例化对象调用显示地图的方法 
 _map.display();
 console.log(_map.div_map);
 _food=new Food();
 _food.display();
 
 _snake=new Snake();
 _snake.display();
 _snake.move();
 
 // 事件对象 event
 document.getElementsByTagName('body')[0].onkeydown=function(event){
  // 通过事件对象event  提供与事件关联的详细信息    提取键码 keyCode
_snake.setDirect(event.keyCode);
 }