Chrome自帶恐龍小游戲的源碼研究(四)

　　在上一篇《Chrome自帶恐龍小游戲的源碼研究(三)》中實現了讓游戲晝夜交替，這一篇主要研究如何繪制障礙物。

　　障礙物有兩種：仙人掌和翼龍。仙人掌有大小兩種類型，可以同時並列多個；翼龍按高、中、低的隨機飛行高度出現，不可並行。仙人掌和地面有着相同的速度向左移動，翼龍則快一些或慢一些，因為添加了隨機的速度修正。我們使用一個障礙物列表管理它們，當它們移出屏幕外時則將其從列表中移除。同時再用一個列表記錄它們的類型：

Obstacle.obstacles = [];    //存儲障礙物的數組
Obstacle.obstacleHistory = [];  //記錄障礙物數組中障礙物的類型

障礙物的出現不能太頻繁，也不能太稀少，太頻繁立刻就gameover了，太稀少則沒有挑戰性，因此需要一定的規則來生成障礙物。每組障礙物之間應該有一段間隔作為落腳點，新生成的障礙物在這個間隔之外生成。如示意圖所示：

因此，先定義一個最大間距系數，下面會用這個系數生成隨機間距：

Obstacle.MAX_GAP_COEFFICIENT = 1.5; //障礙物最大間距系數

另外，還需要對障礙物進行一些約束及配置：

//每組障礙物的最大數量
Obstacle.MAX_OBSTACLE_LENGTH = 3;   
//相鄰的障礙物類型的最大重復數
Obstacle.MAX_OBSTACLE_DUPLICATION = 2;

Obstacle.types = [
    {
        type: 'CACTUS_SMALL', //小仙人掌
        width: 17,  //寬
        height: 35, //高
        yPos: 105,  //在畫布上的y坐標
        multipleSpeed: 4, 
        minGap: 120,    //最小間距
        minSpeed: 0    //最低速度
    },
    {
        type: 'CACTUS_LARGE',   //大仙人掌
        width: 25,
        height: 50,
        yPos: 90,
        multipleSpeed: 7,
        minGap: 120,
        minSpeed: 0
    },
    {
        type: 'PTERODACTYL',    //翼龍
        width: 46,
        height: 40,
        yPos: [ 100, 75, 50 ], //有高、中、低三種高度
        multipleSpeed: 999,
        minSpeed: 8.5,  
        minGap: 150,
        numFrames: 2,   //有兩個動畫幀
        frameRate: 1000/6,  //動畫幀的切換速率，這里為一秒6幀
        speedOffset: .8 //速度修正
    }
];

障礙物的所有實現由構造函數Obstacle完成，下面是它的實現代碼：

/**
 * 繪制障礙物構造函數
 * @param canvas
 * @param type 障礙物的類型
 * @param spriteImgPos 雪碧圖坐標
 * @param dimensions 屏幕尺寸
 * @param gapCoefficient 障礙物間隙
 * @param speed 障礙物移動速度
 * @param opt_xOffset 障礙物水平偏移量
 * @constructor
 */
function Obstacle(canvas,type,spriteImgPos,dimensions,gapCoefficient,speed,opt_xOffset) {
    this.ctx = canvas.getContext('2d');
    this.spritePos = spriteImgPos;
    //障礙物類型(仙人掌、翼龍)
    this.typeConfig = type;
    this.gapCoefficient = gapCoefficient;
    //每個障礙物的數量(1~3)
    this.size = getRandomNum(1,Obstacle.MAX_OBSTACLE_LENGTH);
    this.dimensions = dimensions;
    //表示該障礙物是否可以被移除
    this.remove = false;
    //水平坐標
    this.xPos = dimensions.WIDTH + (opt_xOffset || 0);
    this.yPos = 0;
    this.width = 0;
    this.gap = 0;
    this.speedOffset = 0;   //速度修正

    //障礙物的動畫幀
    this.currentFrame = 0;
    //動畫幀切換的計時器
    this.timer = 0;

    this.init(speed);
}
```

實例方法：
```javascript
Obstacle.prototype = {
    init:function(speed) {
        //如果隨機障礙物是翼龍，則只出現一只
        //翼龍的multipleSpeed是999，遠大於speed
        if (this.size > 1 && this.typeConfig.multipleSpeed > speed) {
            this.size = 1;
        }
        //障礙物的總寬度等於單個障礙物的寬度乘以個數
        this.width = this.typeConfig.width * this.size;

        //若障礙物的縱坐標是一個數組
        //則隨機選取一個
        if (Array.isArray(this.typeConfig.yPos))  {
            var yPosConfig = this.typeConfig.yPos;
            this.yPos = yPosConfig[getRandomNum(0, yPosConfig.length - 1)];
        } else {
            this.yPos = this.typeConfig.yPos;
        }

        this.draw();

        //對翼龍的速度進行修正，讓它看起來有的飛得快一些，有些飛得慢一些
        if (this.typeConfig.speedOffset) {
            this.speedOffset = Math.random() > 0.5 ? this.typeConfig.speedOffset :
                -this.typeConfig.speedOffset;
        }

        //障礙物之間的間隙，與游戲速度有關
        this.gap = this.getGap(this.gapCoefficient, speed);
    },
    //障礙物之間的間隔，gapCoefficient為間隔系數
    getGap: function(gapCoefficient, speed) {
        var minGap = Math.round(this.width * speed +
            this.typeConfig.minGap * gapCoefficient);
        var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);
        return getRandomNum(minGap, maxGap);
    },
    //判斷障礙物是否移出屏幕外
    isVisible: function() {
        return this.xPos + this.width > 0;
    },
    draw:function() {
        //障礙物寬高
        var sourceWidth = this.typeConfig.width;
        var sourceHeight = this.typeConfig.height;

        //根據障礙物數量計算障礙物在雪碧圖上的x坐標
        //this.size的取值范圍是1~3
        var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1)) +
            this.spritePos.x;

        // 如果當前動畫幀大於0，說明障礙物類型是翼龍
        // 更新翼龍的雪碧圖x坐標使其匹配第二幀動畫
        if (this.currentFrame > 0) {
            sourceX += sourceWidth * this.currentFrame;
        }
        this.ctx.drawImage(imgSprite,
            sourceX, this.spritePos.y,
            sourceWidth * this.size, sourceHeight,
            this.xPos, this.yPos,
            sourceWidth * this.size, sourceHeight);
    },
    //單個障礙物的移動
    update:function(deltaTime, speed) {
        //如果障礙物還沒有移出屏幕外
        if (!this.remove) {
            //如果有速度修正則修正速度
            if (this.typeConfig.speedOffset) {
                speed += this.speedOffset;
            }
            //更新x坐標
            this.xPos -= Math.floor((speed * FPS / 1000) * deltaTime);

            // Update frame
            if (this.typeConfig.numFrames) {
                this.timer += deltaTime;
                if (this.timer >= this.typeConfig.frameRate) {
                    //在兩個動畫幀之間來回切換以達到動畫效果
                    this.currentFrame =
                        this.currentFrame == this.typeConfig.numFrames - 1 ?
                            0 : this.currentFrame + 1;
                    this.timer = 0;
                }
            }
            this.draw();

            if (!this.isVisible()) {
                this.remove = true;
            }
        }
    },
    //管理多個障礙物移動
    updateObstacles: function(deltaTime, currentSpeed) {
        //保存一個障礙物列表的副本
        var updatedObstacles = Obstacle.obstacles.slice(0);

        for (var i = 0; i < Obstacle.obstacles.length; i++) {
            var obstacle = Obstacle.obstacles[i];
            obstacle.update(deltaTime, currentSpeed);

            //移除被標記為刪除的障礙物
            if (obstacle.remove) {
                updatedObstacles.shift();
            }
        }
        Obstacle.obstacles = updatedObstacles;

        if(Obstacle.obstacles.length > 0) {
            //獲取障礙物列表中的最后一個障礙物
            var lastObstacle = Obstacle.obstacles[Obstacle.obstacles.length - 1];

            //若滿足條件則添加障礙物
            if (lastObstacle &&
                lastObstacle.isVisible() &&
                (lastObstacle.xPos + lastObstacle.width + lastObstacle.gap) <
                this.dimensions.WIDTH) {
                this.addNewObstacle(currentSpeed);
            }
        } else {//若障礙物列表中沒有障礙物則立即添加
            this.addNewObstacle(currentSpeed);
        }
    },
    //隨機添加障礙
    addNewObstacle:function (currentSpeed) {
        //隨機選取一種類型的障礙
        var obstacleTypeIndex = getRandomNum(0,Obstacle.types.length - 1);
        var obstacleType = Obstacle.types[obstacleTypeIndex];

        //檢查隨機取到的障礙物類型是否與前兩個重復
        //或者檢查其速度是否合法，這樣可以保證游戲在低速時不出現翼龍
        //如果檢查不通過，則重新再選一次直到通過為止
        if(this.duplicateObstacleCheck(obstacleType.type) || currentSpeed < obstacleType.minSpeed) {
            this.addNewObstacle(currentSpeed);
        } else {
            //檢查通過后，獲取其雪碧圖中的坐標
            var obstacleSpritePos = this.spritePos[obstacleType.type];
            //生成新的障礙物並存入數組
            Obstacle.obstacles.push(new Obstacle(c,obstacleType,obstacleSpritePos,this.dimensions,
                this.gapCoefficient,currentSpeed,obstacleType.width));
            //同時將障礙物的類型存入history數組
            Obstacle.obstacleHistory.unshift(obstacleType.type);
        }

        //若history數組的長度大於1，則清空最前面的兩個
        if (Obstacle.obstacleHistory.length > 1) {
            Obstacle.obstacleHistory.splice(Obstacle.MAX_OBSTACLE_DUPLICATION);
        }
    },
    //檢查障礙物是否超過允許的最大重復數
    duplicateObstacleCheck:function(nextObstacleType) {
        var duplicateCount = 0;
        //與history數組中的障礙物類型比較，最大只允許重得兩次
        for(var i = 0; i < Obstacle.obstacleHistory.length; i++) {
            duplicateCount = Obstacle.obstacleHistory[i] === nextObstacleType ? duplicateCount + 1 : 0;
        }
        return duplicateCount >= Obstacle.MAX_OBSTACLE_DUPLICATION;
    }
};

最后在此前的基礎上添加一段測試代碼：

window.onload = function () {
            var h = new HorizonLine(c,spriteDefinition.HORIZON);
            var cloud = new Cloud(c,spriteDefinition.CLOUD,DEFAULT_WIDTH);
            var night = new NightMode(c,spriteDefinition.MOON,DEFAULT_WIDTH);
            var obstacle = new Obstacle(c,Obstacle.types[0],spriteDefinition,{WIDTH:600},0.6,1);
            var startTime = 0;
            var deltaTime;
            var speed = 3;
            (function draw(time) {
                gameFrame++;
                if(speed < 13.5) {
                    speed += 0.01;
                }
                ctx.clearRect(0,0,600,150);
                time = time || 0;
                deltaTime = time - startTime;
                h.update(deltaTime,speed);
                cloud.updateClouds(0.2);
                night.invert(deltaTime);
                obstacle.updateObstacles(deltaTime,speed);
                startTime = time;
                window.requestAnimationFrame(draw,c);
            })();
        };

最終得到的效果：