【JavaScript高級】貪吃蛇

面向對象的貪吃蛇實現

1 工具對象(Tools.js)

因爲要隨機生成食物，所以先將生成min-max範圍內隨機整數的方法提取出來。randomNum屬性就是生成的隨機數。

function Tools(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    this.randomNum=Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值

}

2 食物對象(Food.js)

//爲避免命名衝突，使用自調用函數
(function(){
    var foodDivs=[];
  //1 定義食物對象
  function Food(options){
      options=options||{};//封裝屬性的對象
      this.backgroundColor=options.backgroundColor||'green';
      this.width=options.width||20;
      this.height=options.height||20;
      this.x=options.x||0;
      this.y=options.y||0;
  }
  //2 渲染到map上
  Food.prototype.render=function(map){

      removeFood();
      var div=document.createElement('div');
      this.x=new Tools(0,map.offsetWidth/this.width-1).randomNum;
      this.y=new Tools(0,map.offsetHeight/this.height-1).randomNum;
      div.style.width=this.width+'px';
      div.style.height=this.height+'px';
      div.style.backgroundColor=this.backgroundColor;
      div.style.left=this.x*this.width+'px';
      div.style.top=this.y*this.height+'px';
      div.style.position = 'absolute';
      map.appendChild(div);
      foodDivs.push(div);
  }
  function removeFood(){
    for(var i=foodDivs.length-1;i>=0;i--){
        foodDivs[i].parentNode.removeChild(foodDivs[i]);//先從頁面刪除
        foodDivs.splice(i,1);//刪除指定位置元素  //再從數組實際刪除
    }
  }
  window.Food=Food;//暴露Food，外部才能訪問
})();

3 蛇對象(Snake.js)

(function(){
    var snakeDivs=[];
    //1 蛇構造函數
    function Snake(options){
        options=options||{};
        this.body=[
            {x:3,y:2,bgc:'red'},
            {x:2,y:2,bgc:'blue'},
            {x:1,y:2,bgc:'blue'}
        ];
        this.width=options.width||20;
        this.height=options.height||20;      
        this.direction=options.direction||'right';      
    }
    //2 渲染到map上
    Snake.prototype.render=function(map){
        removeSnake();
        for(var i=0;i<this.body.length;i++){
            var block=this.body[i];
            var div=document.createElement('div');
            div.style.width=this.width+'px';
            div.style.height=this.height+'px';
            div.style.backgroundColor=block.bgc;
            div.style.left=block.x*this.width+'px';
            div.style.top=block.y*this.height+'px';
            div.style.position = 'absolute';
            map.appendChild(div);
            snakeDivs.push(div);//添加蛇divs
        }
    }
    //3 蛇的移動
    Snake.prototype.move=function(food,map){
        //邏輯上從後往前 先蛇身再蛇頭
        //蛇身每一節替換上次的位置
        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;
        }
        //蛇頭移動
        var head=this.body[0];
        switch(this.direction){
              case 'left':
              head.x-=1;
              break;
              case 'up':
              head.y-=1;
              break;
              case 'right':
              head.x+=1;
              break;
              case 'down':
              head.y+=1;
              break;
        }
        if(head.x===food.x&&head.y===food.y){//蛇頭與食物重合
            var last=this.body[this.body.length-1];
            this.body.push({
                x:last.x,
                y:last.y,
                bgc:last.bgc
            });  
            food.render(map);//這裏就包括移除前面的食物這一操作           
        }        
    }
    function removeSnake(){
       for(var i=snakeDivs.length-1;i>=0;i--){
           snakeDivs[i].parentNode.removeChild(snakeDivs[i]);//先從頁面刪除
           snakeDivs.splice(i,1);//刪除指定位置元素  //再從數組實際刪除
       }
    }
    window.Snake=Snake;
})();

4 遊戲對象(Game.js)

主要是控制遊戲的開始，以及按鍵對應的行爲在遊戲中的含義，將蛇和食物這兩個對象組織在一起。

 
 (function(){
var that;
 function Game(){
     this.food=new Food();
     this.snake=new Snake();
     that=this;
 }
 Game.prototype.start=function(map){
    this.snake.render(map);
    this.food.render(map);
    var head=this.snake.body[0];
    var span=document.getElementById('tag');
    var timerId=setInterval(function(){
       that.snake.move(that.food,map);
       that.snake.render(map);

       if((head.x>map.offsetWidth/that.snake.width-2)||head.x<=0){
         clearInterval(timerId);
         span.style.display='block';//提示Game Over
       }
       if((head.y>map.offsetHeight/that.snake.height-2)||head.y<=0){
        clearInterval(timerId);
        span.style.display='block';//提示Game Over
      }
    },150);
  
    console.log(map.offsetWidth/this.snake.width-1);
    bindKey();
}
function bindKey(){
    document.addEventListener('keydown',function(e){
        switch(e.keyCode){//left 37 up 38 right 39 down 40
            case 37:
            that.snake.direction='left';
            break;
            case 38:
            that.snake.direction='up';
            break;
            case 39:
            that.snake.direction='right';
            break;
            case 40:
            that.snake.direction='down';
            break;
        }
    });
}
window.Game=Game;
})()
var Game=new Game();
var map=document.getElementById('map');
Game.start(map);

5 index.html

顯示的html頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #map{
        background-color: lightgray;
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }
    #tag{
    width: 200px;
    height: 100px;
    background-color: gray;
    position: absolute;
    left:300px;
    top:200px;
    line-height: 100px;
    text-align: center;
    display: none;
    }
    </style>
</head>
<body>
    <div id='map'>
        <span id='tag'>Game Over</span>
    </div>
    <script src="js/Tools.js"></script>
    <script src="js/Food.js"></script>
    <script src="js/Snake.js"></script>
    <script src="js/Game.js"></script>
</body>
</html>

6 運行界面