Home > Article > Web Front-end > javascript实现简单的贪吃蛇游戏_javascript技巧

javascript实现简单的贪吃蛇游戏_javascript技巧

WBOYOriginal: 2016-05-16 16:06:531076browse

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=400;
    this.position='absolute';
    this.color='#EEEEEE';
    this._map=null;
    //生成地图
    this.show=function(){
      this._map=document.createElement('div');
      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);
    }
  }
  //食物类
  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('div');
      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);
      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;
 
      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){
          this.body[i][3]=document.createElement('div');
          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;
 
    }
  }
 
  document.onkeydown=function(event){
    //按下任意键，开始游戏
    if(snake.direct===null){
      snake.direct='right';
      snake.speed();
    }
    //控制方向，W S D A分别代表 上下右左
    switch(window.event&#63;window.event.keyCode:event.keyCode){//浏览器兼容处理
      case 87 :
        snake.direct=snake.body[0][0]==snake.body[1][0]&#63;snake.direct:'up';//避免反向移动，触发死亡bug
        break;
      case 83 :
        snake.direct=snake.body[0][0]==snake.body[1][0]&#63;snake.direct:'down';
        break;
      case 68 :
        snake.direct=snake.body[0][1]==snake.body[1][1]&#63;snake.direct:'right';
        break;
      case 65 :
        snake.direct=snake.body[0][1]==snake.body[1][1]&#63;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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS实现为表格动态添加标题的方法_javascript技巧Next article：JS实现从表格中动态删除指定行的方法_javascript技巧

See more

javascript实现简单的贪吃蛇游戏_javascript技巧

Related articles