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

目錄

Chrome自帶恐龍小游戲的源碼研究(一)——繪制地面

Chrome自帶恐龍小游戲的源碼研究(二)——繪制雲朵

Chrome自帶恐龍小游戲的源碼研究(三)——晝夜交替

Chrome自帶恐龍小游戲的源碼研究(四)——繪制障礙物

Chrome自帶恐龍小游戲的源碼研究(五)——繪制霸王龍

Chrome自帶恐龍小游戲的源碼研究(六)——跳躍

Chrome自帶恐龍小游戲的源碼研究(七)——碰撞檢測

Chrome自帶恐龍小游戲的源碼研究(完)——游戲高分與其它要素

　　

　　眾所周知，Chrome瀏覽器在網絡不通的情況下，會出現一個霸王龍翻越障礙的小游戲： 

　　這個游戲做得小巧精致，於是探究了一下它的源碼，發現代碼寫得相當嚴謹並且富有技巧性，用來學習再好不過了。

　　游戲雖然看起來簡單，但也有幾千行的代碼量。主要包括五個構造函數：

• 游戲邏輯控制函數Runner

• 背景管理函數Horizon

  • 地面 (HorizonLine)
  • 雲朵 (Cloud)
  • 晝夜更替 (NightMode)
  • 障礙物 (Obstacle)

• 霸王龍函數Trex

• 分數記錄函數DistanceMeter

• 游戲結束操作面板函數GameOverPanel

　　其余的方法還包含一些對移動設備的適配、針對不同屏幕加載不同的資源 、聲音的播放等等。這是游戲用到的雪碧圖：

 

　　為方便研究，從簡單的背景管理函數開始。首先是地面的繪制。地面繪制通過HorizonLine完成：

//定義屬性

HorizonLine.dimensions = {
    WIDTH:600,    //寬600
    HEIGHT:12,    //高12像素
    YPOS:127    //在canvas中的位置
};

var spriteDefinition = {
    HORIZON: {x: 2, y: 54}//地面在雪碧圖中的位置
};



/**
* canvas 地面將繪制到此畫布上
* spritePos 地面在雪碧圖中的坐標
*/
function HorizonLine(canvas,spritePos) {
    this.spritePos = spritePos;
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    this.dimensions = HorizonLine.dimensions;

    //在雪碧圖中坐標為2和602處分別為不同的地形
    this.sourceXPos = [this.spritePos.x,this.spritePos.x + this.dimensions.WIDTH];

    this.xPos = []; //地面在畫布中的x坐標
    this.yPos = 0;  //地面在畫布中的y坐標

    this.bumpThreshold = 0.5;    //隨機地形系數

    this.setSourceDimesions();
    this.draw();
}

再來看看HorizonLine原型鏈中的方法：

HorizonLine.prototype = {
    setSourceDimesions:function() {
        //地面在畫布上的位置
        this.xPos = [0,this.dimensions.WIDTH];//0,600
        this.yPos = this.dimensions.YPOS;
    },
    //隨機地形
    getRandomType:function() {
        //返回第一段地形或者第二段地形
        return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0;
    },
    draw:function() {
        //使用9參數的drawImage方法
        this.ctx.drawImage(imgSprite,
            this.sourceXPos[0], this.spritePos.y,
            this.dimensions.WIDTH, this.dimensions.HEIGHT,
            this.xPos[0],this.yPos,
            this.dimensions.WIDTH,this.dimensions.HEIGHT);

        this.ctx.drawImage(imgSprite,
            this.sourceXPos[1], this.spritePos.y,
            this.dimensions.WIDTH, this.dimensions.HEIGHT,
            this.xPos[1],this.yPos,
            this.dimensions.WIDTH,this.dimensions.HEIGHT);
    },
    updateXPos:function(pos,increment) {
        var line1 = pos,
            line2 = pos === 0 ? 1 : 0;

        this.xPos[line1] -= increment;
        this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;

        //若第一段地面完全移出canvas外
        if(this.xPos[line1] <= -this.dimensions.WIDTH) {
            //則將其移動至canvas外右側
            this.xPos[line1] += this.dimensions.WIDTH * 2;
            //同時將第二段地面移動至canvas內
            this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH;

            //選擇隨機地形
            this.sourceXPos[line1] = this.getRandomType() + this.spritePos.x;
        }
    },
    update:function(deltaTime,speed) {
        var increment = Math.floor(speed * (FPS / 1000) * deltaTime);

        if(this.xPos[0] <= 0) {//交換地面一和二
            this.updateXPos(0, increment);
        } else {
            this.updateXPos(1, increment);
        }
        this.draw();
    },
    reset:function() {
        this.xPos[0] = 0;
        this.xPos[1] = this.dimensions.WIDTH;
    }
};

原型鏈中的方法實現了地面的運動和隨機地形。

最后測試一下這一段代碼：

window.onload = function () {
    var h = new HorizonLine(canvas,spriteDefinition.HORIZON);
    var startTime = 0;
    (function draw(time) {
        ctx.clearRect(0,0,600,150);
        time = time || 0;
        h.update(time - startTime,3);
        startTime = time;
        window.requestAnimationFrame(draw);
    })();
};

運行效果：

 

這樣地面的繪制及滾動就完成了。