貪吃蛇完整版小案例

一宅發表於2019-03-05
/**
 * 貪吃蛇
 * 
 * 1.地圖
 * 1.1 在html中建立一個div class為map
 * 1.2 在style中 寫樣式 寬  高 背景顏色 相對定位
 * 1.3 獲取map元素
 * 
 * 2.食物
 * 2.1 新建一個空陣列 用來儲存食物
 * 2.2 建立一個食物建構函式 用來建立食物物件
 * 2.2.1 設定食物建構函式的寬的屬性和預設值
 * 2.2.2 設定食物建構函式的高的屬性和預設值
 * 2.2.3 設定食物建構函式的背景顏色的屬性和預設值
 * 2.2.4 設定食物建構函式的橫縱座標的預設值
 * 2.3 建立一個食物的初始化方法 用來刪除舊食物 新建新食物 
 * 2.3.1 刪除舊食物
 * 2.3.2 建立新食物元素
 * 2.3.3 給新食物元素新增定位
 * 2.3.4 給新食物元素新增寬高
 * 2.3.5 給新食物新增背景顏色
 * 2.3.6 給新食物新增橫縱座標(x和y)
 * 2.3.7 把新食物放到地圖上
 * 2.3.8 把新食物放到陣列中
 * 2.4 建立一個食物的刪除方法
 * 2.4.1 迴圈遍歷2.1 新建的空陣列
 * 2.4.1.1 找到新建的空陣列中的每一項
 * 2.4.1.2 找到某一項的父節點 刪除地圖上的自己
 * 2.4.1.3 去空陣列中刪除自己
 * 2.5 把食物的建構函式暴露出去
 * 
 * 3.小蛇
 * 3.1 新建一個空陣列 用來儲存小蛇
 * 3.2 建立一個小蛇建構函式 用來建立小蛇物件
 * 3.2.1 設定小蛇建構函式的屬性 寬  和寬的預設值
 * 3.2.2 設定小蛇建構函式的屬性 高  和高的預設值
 * 3.2.3 設定小蛇建構函式的屬性 身體(body) 和身體的預設值(x, y , color)
 * 3.2.4 設定小蛇的建構函式的屬性  方向(direction) 和方向的預設值
 * 3.3 建立一個小蛇的初始化方法 用來刪除舊小蛇 新建新小蛇 
 * 3.3.1 刪除舊小蛇
 * 3.3.2 迴圈遍歷body
 * 3.3.2.1 建立新小蛇元素
 * 3.3.2.2 給新小蛇元素新增絕對定位
 * 3.3.2.3 給新小蛇元素新增寬
 * 3.3.2.4 給新小蛇元素新增高
 * 3.3.2.5 給新小蛇元素新增背景顏色
 * 3.3.2.6 給新小蛇元素新增橫座標
 * 3.3.2.7 給新小蛇元素新增縱座標
 * 3.3.2.8 把新小蛇新增到地圖中
 * 3.3.2.9 把新小蛇新增到3.1 的空陣列中
 * 3.4 建立一個小蛇的移動方法
 * 3.4.1 遍歷小蛇的身體(body屬性)
 * 3.4.2 給小蛇的每節改變座標
 * 3.4.3 判斷小蛇的頭和食物的座標是否一致
 * 3.4.3.1 獲取小蛇的頭的座標
 * 3.4.3.2 判斷小蛇的頭的座標和食物額座標是否一致 如果一致
 * 3.4.3.2.1 獲取小蛇的尾巴
 * 3.4.3.2.1.1 把尾巴新增到身體的最後 push
 * 3.4.3.2.2 刪除舊食物  新建新食物(食物的init方法)
 * 3.5 建立一個小蛇的刪除方法
 * 3.5.1 迴圈遍歷陣列(倒著遍歷) 倒序遍歷
 * 3.5.1.1 找到陣列中的每一項
 * 3.5.1.2 找到某一項的父節點刪除自己 在地圖上
 * 3.5.1.3 在陣列中刪除自己
 * 3.6 把小蛇的建構函式暴露出去
 * 
 * 4.遊戲
 * 4.1 建立一個 變數 用來儲存遊戲例項
 * 4.2 建立一個遊戲建構函式 用來建立遊戲物件
 * 4.2.1 把食物的例項化物件 給遊戲建構函式的food屬性
 * 4.2.2 把小蛇的例項化物件 給遊戲建構函式的snake屬性
 * 4.2.3 把地圖給遊戲建構函式的map屬性
 * 4.3.4 把this儲存到that變數中
 * 4.3 建立一個遊戲初始化方法 用來呼叫
 * 4.3.1 呼叫食物的初始化方法(初始化食物)
 * 4.3.2 呼叫小蛇的初始化方法(初始化小蛇)
 * 4.3.3 呼叫小蛇跑起來的方法
 * 4.3.4 呼叫按鍵繫結的方法
 * 4.4 建立一個小蛇跑起來的方法
 * 4.4.0 清理定時器
 * 4.4.1 新增一個定時器 (別忘了改變this的指向   如果不改變 是window 如果改變時game)
 * 4.4.1.1 呼叫小蛇的移動方法
 * 4.4.1.2 呼叫小蛇的初始化方法
 * 4.4.1.3 獲取地圖的最大邊界(橫座標 縱座標)
 * 4.4.1.4 獲取小蛇頭的橫縱座標
 * 4.4.1.5 判斷小蛇的蛇頭座標是否小於0 或 小蛇的蛇頭座標大於等於地圖的最大邊界
 * 4.4.1.5.1 如果是這樣的 那麼就停止定時器 彈框 遊戲結束
 * 4.4.1.6 判斷小蛇的蛇頭座標是否小於0 或 小蛇的蛇頭座標大於等於地圖的最大邊界
 * 4.4.1.6.1 如果是這樣的 那麼就停止定時器 彈框 遊戲結束
 * 4.5 建立一個小蛇按鍵繫結的方法
 * 4.5.1 直接就給document新增keydonw事件 (別忘了改變this的指向 如果不改變是document 改變時game)
 * 4.5.2 switch語句 去重新給小蛇的方向設定屬性值 
 * 4.6 把遊戲的建構函式暴露出去
 */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .map {
      position: relative;
      width: 800px;
      height: 600px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="map"></div>
  <script>
    var map = document.querySelector('.map');
    (function () {
      var elements = [];

      function Food(x, y, width, height, color) {
        this.x = x || 0;
        this.y = y || 0;
        this.width = width || 20;
        this.height = height || 20;
        this.color = color || "green";

      }
      Food.prototype.init = function (map) {
        this.remove();
        var cib = document.createElement('div');
        cib.style.position = "absolute";
        cib.style.width = this.width + "px";
        cib.style.height = this.height + "px";
        cib.style.backgroundColor = this.color;
        this.x = Math.floor(Math.random() * (map.offsetWidth) / this.width) * this.width;
        this.y = Math.floor(Math.random() * (map.offsetHeight) / this.height) * this.height;
        cib.style.top = this.y + "px";
        cib.style.left = this.x + "px";
        map.appendChild(cib);
        elements.push(cib);
      }
      Food.prototype.remove = function () {
        for (var i = 0; i < elements.length; i++) {
          var ele = elements[i];
          ele.parentNode.removeChild(ele);
          elements.splice(i, 1);
        }
      }
      window.Food = Food;
    }());
    (function () {
      var elements = [];

      function Snake(width, height, direction) {
        this.width = width || 20;
        this.height = height || 20;
        
        this.body = [{
            x: 3,
            y: 2,
            color: "red"
          },
          {
            x: 2,
            y: 2,
            color: "orange"

          },
          {
            x: 1,
            y: 2,
            color: "orange"
          }
        ];
        this.direction = direction || "right";
      }
      Snake.prototype.init = function (map) {
        this.remove();
        for (var i = 0; i <this.body.length; i++) {
          var div = document.createElement('div');
          div.style.position = "absolute";
          div.style.borderRadius = "50%";
          div.style.width = this.width + "px";
          div.style.height = this.height + "px";
          div.style.backgroundColor = this.body[i].color;
          div.style.left = this.body[i].x * this.width + "px";
          div.style.top = this.body[i].y * this.height + "px";
          map.appendChild(div);
          elements.push(div);
        }
      }
      Snake.prototype.move = function (map, food) {
        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.direction) {
          case "top":
            this.body[0].y -= 1;
            break;
          case "right":
            this.body[0].x += 1;
            break;
          case "bottom":
            this.body[0].y += 1;
            break;
          case "left":
            this.body[0].x -= 1;
            break;
        }
        var HeadX = this.body[0].x * this.width;
        var HeadY = this.body[0].y * this.height;
        if (HeadX == food.x && HeadY == food.y) {
          var last = this.body[this.body.length - 1];
          this.body.push({
            x: last.x,
            y: last.y,
            color: last.color
          });
          food.init(map);
        }
      }
      Snake.prototype.remove = function () {
        for (var i = elements.length-1; i >= 0; i--) {
          var ele = elements[i];
          ele.parentElement.removeChild(ele);
          elements.splice(i, 1);
        }
      }
      window.Snake = Snake;
    }());
    //game
    (function () {
      var that = null;
      function Game(map) {
        this.food = new Food();
        this.snake = new Snake();
        this.map = map;
        that = this;
      }
      //初始化
      Game.prototype.init = function(){
        this.snake.init(this.map);
        this.food.init(this.map);
        this.runSnake(this.map,this.food);
        this.bindKey();
      }
      //runSnake方法
      Game.prototype.runSnake = function(map,food){
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function(){
          this.snake.move(map,food);
          this.snake.init(map);
          var maxX = map.offsetWidth/this.snake.width;
          var maxY = map.offsetHeight/this.snake.height;
          var HeadX = this.snake.body[0].x;
          var HeadY = this.snake.body[0].y;
          console.log(HeadX,HeadY,maxX,maxY);
          if(HeadX < 0 || HeadX >= maxX){
            clearInterval(timer);
            alert("game over");
          } 
          if(HeadY < 0 || HeadY >= maxY){
            clearInterval(timer);
            alert("game over");
          }
        }.bind(that),150);
        //bindKey方法
        Game.prototype.bindKey = function(e){
          document.addEventListener("keydown",function(e){
            switch(e.keyCode){
              case 37 :
              this.snake.direction = "left";
              break;
              case 38 :
              this.snake.direction = "top";
              break;
              case 39 :
              this.snake.direction = "right";
              break;
              case 40 :
              this.snake.direction = "bottom";
              break;

            }
          }.bind(that),false)
        }
      }
      window.Game = Game;
    }());
    var game = new Game(map);
    game.init();
  </script>
</body>

</html>
複製程式碼

相關文章