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);
    })();
};

运行效果：

 

这样地面的绘制及滚动就完成了。