快捷導(dǎo)航

javascript實現(xiàn)簡單的貪吃蛇游戲

更新時間：2015年03月31日 08:56:21 投稿：hebedich

本文很簡單，給大家分享了一段使用javascript實現(xiàn)簡單的貪吃蛇游戲的代碼，算是對自己學(xué)習(xí)javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對大家能夠有所幫助。

javascript實現(xiàn)簡單的貪吃蛇游戲，功能很簡單，代碼也很實用，就不多廢話了，小伙伴們參考注釋吧。

<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;   //（可間接看做）關(guān)卡
  //地圖類
  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();
    }
    //定時器，開始游戲時，調(diào)用
    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?window.event.keyCode:event.keyCode){//瀏覽器兼容處理
      case 87 :
        snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移動，觸發(fā)死亡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>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: