JavaScript面向對象編程小遊戲---貪吃蛇

時間 2019-11-30

標籤 javascript 面向對象編程遊戲貪吃欄目 JavaScript 简体版

原文原文鏈接

1 面向對象編程思想在程序項目中有着很是明顯的優點:javascript

1- 1 代碼可讀性高.因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊html

1- 2 維護很是方便而且成本較低。前端

2 這個demo是採用了面向對象的編程思想. 用JavaScript 語言編寫的遊戲小程序--貪吃蛇.java

代碼註釋詳細,邏輯清晰 . 很是適合新手前端開發者, 鍛鍊JavaScript語言的面向對象的編程思想.git

該小Demo已上傳GitHub,歡迎下載! 以爲好的話,隨手給個star, 您的star是我最大的動力!github

https://github.com/XingJYGo/snakePlay#javascript-經典面向對象demo-貪吃蛇算法

代碼結構:編程

--index.html 地圖頁面,展現蛇和食物,進行遊戲小程序

--food.js 構造食物對象數組

--game.js 構造遊戲對象

--snake.js 構造蛇對象

--tool.js 經常使用數據工具封裝

代碼展現

--index.html 地圖頁面,展現蛇和食物,進行遊戲

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #map{
      width: 500px;
      height: 500px;
      background-color: lightblue;
      position: relative;
    }
   
  </style>
</head>
<body>
<div id="map">
  
</div>
<button id="btn">模擬蛇吃到食物</button>
<script src="tool.js"></script>
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="game.js"></script>
<script>

////==========先後方向設定後 ==================
var game = new Game();
game.start();



</script>

</body>
</html>
複製代碼

--food.js 構造食物對象

// 封裝一個食物對象
//沙箱模式
(function(){
  var container; //用於存儲以前的食物
  function Food(option) {
    //防止用戶不傳參數會報錯
    option = option || {};
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.bgc = option.bgc || 'orange';
    this.x = option.x || 0;
    this.y = option.y || 0;
    this.borderRadius = option.borderRadius |10;
  }

  Food.prototype.render = function () {
    //每一次渲染新的以前就把原來的移除掉
    if(container){
      map.removeChild(container);
    }
    // 建立食物對象
    var food = document.createElement('div');
    //存到全局變量裏
    container = food;
    food.style.width = this.width + 'px';
    food.style.height = this.height + 'px';
    food.style.backgroundColor = this.bgc;
    food.style.position = 'absolute';
      //得到隨機位置
      //因爲要讓食物的位置在每個格子裏面,全部獲取隨機數的算法要從新計算
    this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width;
    this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height;
    food.style.left = this.x + 'px';
    food.style.top = this.y + 'px';
    food.style.borderRadius = this.borderRadius + 'px';
    //渲染上食物
    map.appendChild(food);
  }

  //由於要在全局使用Food,須要把Food拿到全局中
  window.Food = Food;
})();
複製代碼

--game.js 構造遊戲對象

(function () {
//    1 因爲遊戲對象要控制蛇和食物,
//     因此遊戲對象應該擁有蛇的實例和食物的實例
    //存儲定時器的id
    var timeid;
    function Game() {
        this.snake = new Snake();
        this.food = new Food();
    }

    //2 開始遊戲
    Game.prototype.start = function () {
        this.snake.render();
        this.food.render();

        // 2-1 遊戲一開始,蛇和食物就渲染出來
        timeid = setInterval(function () {
            //2-2 -1 蛇的數據改變
            this.snake.move();
           // 2-3 判斷蛇是否到達邊界
            var snakeHead = this.snake.body[0];
            //2-3-1 求蛇頭能夠移動的水平/垂直座標的最大位置
            var maxX = map.offsetWidth/this.snake.width -1;
            var maxY = map.offsetHeight/this.snake.height -1;
            if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){
                clearInterval(timeid);
                alert("gave over");
                //注:當X超出範圍,代碼應當即終止,
                // 防止2-2-2 渲染出下一個盒子.展現出來
                return;
            }


            //2-4 蛇吃食物
            //依據: 蛇頭的座標 和 食物的座標重合
            var snakeX = snakeHead.x * this.snake.width;
            var snakeY = snakeHead.y * this.snake.height;
            var foodX =  this.food.x;
            var foodY = this.food.y;

            //若是符合條件, 證實吃到了食物
             if (snakeX === foodX && snakeY === foodY){
                 // 2-4-1 食物消失, 渲染新食物
                 this.food.render();
                 // 2-4-2 蛇,變長
                 //    其實就是往snake.body.push個新對象
                 //    bug: 爲了解決新添加蛇節閃下的問題, 把蛇的最後一節對象,做爲新的對象.
                 var last = this.snake.body[this.snake.body.length -1];
                 this.snake.body.push({
                     x:last.x,
                     y:last.y,
                     col:last.col
                 })
                 // this.snake.body.push(last);
                 // 注:last自己已經在數組中了,
             }
            //2-2 -2渲染到頁面上,真正看到的蛇動起來
            this.snake.render();

        }.bind(this), 150)

        // 3 給頁面註冊鍵盤按下的事件
        // 3-1 監聽用戶是否按下了上,下,左,右的按鍵

        document.onkeydown = function(e){
            // console.log(this);
            e = e || window.event;
            console.log(e.keyCode);
            // 左37  上38  右39   下40
            switch(e.keyCode){

                case 37:
                    //3-11 須要找到蛇,修改蛇的direction屬性
                    //防止原地掉頭
                    if(this.snake.direction === 'right'){
                        return;
                    }
                    this.snake.direction = 'left';
                    break;
                case 38:
                    if(this.snake.direction === 'bottom'){
                        return;
                    }
                    this.snake.direction = 'top';
                    break;
                case 39:
                    if(this.snake.direction === 'left'){
                        return;
                    }
                    this.snake.direction = 'right';
                    break;
                case 40:
                    if(this.snake.direction === 'top') return; //若是if中只有一行代碼就能夠不寫花括號,而後這一行代碼要緊跟在if後面記得加分號
                    this.snake.direction = 'bottom';
                    break;

            }
        }.bind(this);



    };

    //2-2 蛇變量賦予全局
    window.Game = Game;

})();
複製代碼

--snake.js 構造蛇對象

(function () {
    var arr = []; //用於存儲蛇的每一節數據

    // 1 建立蛇對象
    function Snake(option) {
        option = option || {};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.body = [
            {x: 3, y: 2, col: 'green'},//蛇頭的位置和顏色
            {x: 2, y: 2, col: 'orange'},//蛇頭身體的位置和顏色
            {x: 1, y: 2, col: 'orange'}];
        this.direction = option.direction || 'right';
    }


    //2 渲染蛇的方法
    Snake.prototype.render = function () {
        // 2-3 爲了防止多個sanke渲染到頁面上,一渲染以前先清除掉原來的
        for (var i = 0; i < arr.length; i++) {
            map.removeChild(arr[i]);//移除頁面上的蛇節
        }
        arr.splice(0,arr.length);//蛇節都被移除掉了,那麼數組中也應該都移除.

        //2-1 根據body中的個數,動態的建立蛇節
        this.body.forEach(function (item, index) {
            //2-0 動態的建立蛇節
            var snakeNode = document.createElement('div');
            //2-4 遍歷添加蛇節新數據
            arr.push(snakeNode);
            snakeNode.style.width = this.width + 'px';
            snakeNode.style.height = this.height + 'px';
            snakeNode.style.position = 'absolute';
            snakeNode.style.left = item.x * this.width + 'px';
            snakeNode.style.top = item.y * this.height + 'px';
            snakeNode.style.backgroundColor = item.col;
            map.appendChild(snakeNode);

        }.bind(this))
        //    2-2 上面的this是在snake裏面,指向snake.`
        //    不然,默認指向window
    };



    //3 蛇移動的方法:body 頭數組賦值給身體.
    Snake.prototype.move = function () {
        //3-1 蛇後面的數據給前面
        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;
        }
    //   3-2暫時蛇頭往右走
    //     this.body[0].x +=1;
    //
    //3-2蛇頭必定的位置,要根據蛇的方向來決定
        switch(this.direction){

            case 'left':
                this.body[0].x -= 1;
                break;
            case 'right':
                this.body[0].x += 1;
                break;
            case 'top':
                this.body[0].y -= 1;
                break;
            case 'bottom':
                this.body[0].y += 1;
                break;
        }
    };



    //賦予全局變量
    window.Snake = Snake;
})();
複製代碼

--tool.js 經常使用數據工具封裝

//用於存放一些經常使用的功能性的函數
  
//   function getRandom(){
//
// }
var Tool = {
  //獲取min - max之間的隨機整數
  getRandom: function(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

// Tool.getRandom()
複製代碼