<html><head> <meta http-equiv='content-type' content='text/html;charset=utf-8'><title>贪吃蛇</title><script type="text/ja

this.x=Math.floor(Math.random()*map.width/this.width); this.y=Math.floor(Math.random()*map.height/this.width); this._food.style.left=this.x*this.width; this._food.style.top=this.y*this.height; x、y 是坐标，你可以把地图想成若干个 20*20 的小格子，坐标指定了食物在哪个格子里。后面两句用来将坐标转换为实际的像素位置（坐标×宽度）。坐标的意义在于可以防止食物出现在“奇怪”的位置。 for(var i=0;i<this.body.length;i++){ 蛇身（包括蛇头）由若干个节组成，数据定义在 this.body 这个数组中。数组中的每一项就是蛇身上的每一节，其中包括该节的坐标、颜色、以及在地图上显示的 p 元素。这段代码就是用来显示贪吃蛇的，也就是在地图上把蛇给画出来（创建每个 p 并设置显示位置）。

javascript - 最近下载了贪吃蛇的代码，里面有些东西不大懂，求大神分析？

<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>贪吃蛇</title>
<script type="text/javascript">
var map; //地图
var snake; //蛇
var food; //食物
var timer; //定时器
var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度
var nowSpeed=initSpeed; //游戏进行时蛇移动速度
var grade=0; //积分
var flag=1; //（可间接看做）关卡

//地图类
function Map(){

this.width=800;
this.height=800;
this.position='relative';
this.color='#EEEEEE';
this._map=null;
//生成地图
this.show=function(){
  this._map=document.createElement('p');//创建一个p元素用于创建地图
  this._map.style.width=this.width+'px';
  this._map.style.height=this.height+'px';
  this._map.style.position=this.position;
  this._map.style.backgroundColor=this.color;
  document.getElementsByTagName('body')[0].appendChild(this._map);//在body下创建p（地图）
}

}

//食物类
function Food(){

this.width=20;
this.height=20;
this.position='absolute';
this.color='#00FF00';
this.x=0;
this.y=0;
this._food;
//生成食物
this.show=function(){
  this._food=document.createElement('p');
  this._food.style.width=this.width+'px';
  this._food.style.height=this.height+'px';
  this._food.style.position=this.position;
  this._food.style.backgroundColor=this.color;

  this.x=Math.floor(Math.random()*map.width/this.width);//问题一：食物出现的x轴坐标 但它为什么要要除以他自己的x呢？

  this.y=Math.floor(Math.random()*map.height/this.height);//问题二：食物出现的y轴坐标 但它为什么要要除以他自己的y呢？
  
  this._food.style.left=this.x*this.width;
  this._food.style.top=this.y*this.height;

  map._map.appendChild(this._food);
}

}

//蛇类
function Snake(){

this.width=20;
this.height=20;
this.position='absolute';
this.direct=null;//移动方向
//初始蛇身
this.body=new Array(
    [3,2,'red',null],//蛇头
    [2,2,'blue',null],
    [1,2,'blue',null]
  );
//生成蛇身
this.show=function(){
  for(var i=0;i<this.body.length;i++){//?
    if(this.body[i][3]==null){//问题三：如果这里的i相同了  蛇身和蛇头不就在一个点上了吗
      this.body[i][3]=document.createElement('p');
      this.body[i][3].style.width=this.width;
      this.body[i][3].style.height=this.height;
      this.body[i][3].style.position=this.position;
      this.body[i][3].style.backgroundColor=this.body[i][2];
      map._map.appendChild(this.body[i][3]);
    }
    this.body[i][3].style.left=this.body[i][0]*this.width+'px';
    this.body[i][3].style.top=this.body[i][1]*this.height+'px';
  }
}
//控制蛇移动
this.move=function(){
   
  var length=this.body.length-1;
  for(var i=length;i>0;i--){
    this.body[i][0]=this.body[i-1][0];
    this.body[i][1]=this.body[i-1][1];
  }

  switch(this.direct){
    case 'right':
      this.body[0][0]=this.body[0][0]+1;
      break;
    case 'left':
      this.body[0][0]=this.body[0][0]-1;
      break;
    case 'up':
      this.body[0][1]=this.body[0][1]-1;
      break;
    case 'down':
      this.body[0][1]=this.body[0][1]+1;
      break;
  }
   
  this.condition();
  this.show();
}
//定时器，开始游戏时，调用
this.speed=function(){
  timer=setInterval('snake.move()',initSpeed);//蛇移动的速度跟定时器
}
//条件处理
this.condition=function(){
  //吃食物
  if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
    grade++;//积分
    this.body[[this.body.length]]=[0,0,'blue',null];
    map._map.removeChild(food._food)
    food.show();
  }
  //判断是否撞墙
  if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){
    alert('game over');
    clearInterval(timer);
    return ;
  }
  //判断是否撞到自身
  for(var i=1;i<this.body.length;i++){
    if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
      alert('game over');
      clearInterval(timer);
      return ;
    }
  }
  //速度提升处理，积分每曾2分，速度提升一倍
  if(grade/2==flag){
    clearInterval(timer);
    flag++;//关卡
    nowSpeed=initSpeed/flag;//速度
    timer=setInterval('snake.move()',nowSpeed);
  }
  document.title='贪吃蛇 积分'+grade+' 速度等级'+initSpeed/nowSpeed;
  /**在这个地方可以添加一个p元素用于存储积分和等级*/

}

}

document.onkeydown=function(event){

//按下任意键，开始游戏
if(snake.direct===null){//问题四：这里的null是怎么个说法？
  snake.direct='right';
  snake.speed();
}
//控制方向，W S D A分别代表 上下右左
switch(window.event?window.event.keyCode:event.keyCode){//浏览器兼容处理
  case 87 :
    snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移动，触发死亡bug
    break;
  case 83 :
    snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down';
    break;
  case 68 :
    snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right';
    break;
  case 65 :
    snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left';
    break;
}

}
//自动加载游戏
window.onload=function(){

map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();

}
</script>
</head>
<body>
</body>
</html>

大家讲道理2902 days ago562

javascript - 最近下载了贪吃蛇的代码，里面有些东西不大懂，求大神分析？

reply all(1)I'll reply