贪吃蛇代码有错，大家一起来指错吧

最新推荐文章于 2024-08-06 20:47:18 发布

xxmzhumeng

最新推荐文章于 2024-08-06 20:47:18 发布

阅读量453

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/xxmzumeng/article/details/8205485

版权

个人总结专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>贪吃蛇</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#container{
  width:800px;
  margin:auto;
  margin_top:60px;

}
#map{
  width:800px;
  height:400px;
  background-color:#ccc;
  overflow:hidden;
  position:absolute;
}

</style>
<script type="text/javascript">
function Food()
{
  this.w=20;//对象的属性，不变的值，如果是var声明的变量则函数代码执行完就会释放
  this.h=20;
  this.color='red';
  //显示事物
  this.display=function()
  {
  //要显示一个食物，要知道大小，位置，属性
    var new_div=document.createElement('div');
    new_div.style.width=this.w+'px';
    new_div.style.height=this.h+'px';
    //还要求出有多少个空格
    this.x=Math.round(Math.random()*39);
    this.y=Math.round(Math.random()*19);

    new_div.style.left=(this.w*this.x)+'px';//绝对定位
    new_div.style.top=(this.h*this.y)+'px';//绝对定位
    new_div.style.backgroundColor=this.color;
    new_div.style.position='absolute';//绝对定位
    document.getElementById('map').appendChild(new_div);
    this.taiji=new_div;//生成食物是给他随便做个标记
    }
    this.reDisplay=function()
      {
        document.getElementById('map').removeChild(this.taiji);
       this.display();
      }
  }
  //显示蛇
  function Snake(){
  this.w=20;
  this.h=20;
  this.direct='right';
  //通过数组来生成蛇的身体，一个元素来代表一个蛇节
  this.body=[
      {x:5,
      y:3,
      color:"blue"
      },
      {
      x:4,
      y:3,
      color:"red"
      },
      {
      x:3,
      y:3,
      color:"red"
      }
      ];//json字符串
  this.display=function(){

      for (var i=0;i<this.body.length ;i++ )
      {
      //alert(i);
      var snake_div=document.createElement('div');
      snake_div.style.width=this.w+'px';
      snake_div.style.height=this.h+'px';
      snake_div.style.position='absolute';
      snake_div.style.left=(this.w*this.body[i].x)+'px';//绝对定位
      snake_div.style.top=(this.h*this.body[i].y)+'px';//绝对定位
      snake_div.style.backgroundColor=this.body[i].color;
      document.getElementById('map').appendChild(snake_div);
      this.body[i].div=snake_div;//给蛇节做记号
      //alert(this.body[i].div);
      }

   }
   this.move=function()
{
     //先移动蛇身
    for(var i=this.body.length-1;i>0;i--)
     {//从第三个蛇身开始向前循环先不循环蛇头
      this.body[i].x=this.body[i-1].x;//第三个蛇身的位置向前移动一个单位正好是第二个蛇身的位置
      this.body[i].y=this.body[i-1].y;
     }
     switch(this.direct)
     {
      case 'up':
      this.body[0].y-=1;
      break;
      case 'down':
      this.body[0].y+=1;
      break;
      case 'left':
      this.body[0].x-=1;
      break;
      case 'right':
      {this.body[0].x+=1;}
      break;
     }
     this.removeSnake();// 删除旧位置的蛇节
     this.display();//重新生成新位置的蛇节
     if(this.body[0].x < 0 || this.body[0].x > 39 || this.body[0].y < 0 || this.body[0].y >19)
     {
      alert('game over');
      clearInterval(snake_id);
     }
     //判断是否撞到自己，判断头的坐标是否会和身体的某一节重合，但是前四节肯定撞不上
     for(var i=(this.body.length-1);i>=4;i--)
     {
      if(this.body[0].x=this.body[i].x && this.body[0].y=this.body[i].y)
      {
       alert('game over');
       clearInterval(snake_id);
       break;
      }
     }
     if(this.body[0].x==food.x && this.body[0].y==food.y)
     {
      this.body[this.body.length]={x:0,y:0,color:'red',div:null};
      //吃了一个食物让旧的食物消失生成新的食物
     food.reDisplay();
     }

  }
     this.setDirect=function(keycode){
     //alert(this.body[0].x);
      switch(keycode){
      case 37:if(this.direct != 'right'){
      this.direct='left';
      }
      break;
      case 38:if(this.direct != 'down'){this.direct='up';}
      break;
      case 39:if(this.direct != 'left'){this.direct='right';}
      break;
      case 40:if(this.direct != 'up'){this.direct='down';}
      break;
      }

     }
  }
    this.removeSnake=function()
    {
    //删除一个div首先的找到它的父元素就是map
    var map=document.getElementById('map');
    for (var i=0;i<this.body.length ;i++)
     {
      if(this.body[i].div != null){
      map.removeChild(this.body[i].div);
      }
     }

    }

  function init(){

  food=new Food();//调用函数的方法，构造器
  food.display();
  snake=new Snake();
  snake.display();
  }
  function start(){
   //snake.move();
   snake_id=setInterval('snake.move()',300);//定时器
  }
  function changeDirect(evt)
  {
   //alert(evt.keyCode);
   snake.setDirect(evt.keyCode);
   //keyCode获取键盘的值
  }
</script>