Chrome自带恐龙小游戏的源码研究(完)

　　在上一篇《Chrome自带恐龙小游戏的源码研究(七)》中研究了恐龙与障碍物的碰撞检测，这一篇主要研究组成游戏的其它要素。

游戏分数记录

　　如图所示，分数及最高分记录显示在游戏界面的右上角，每达到100分就会出现闪烁特效，游戏第一次gameover时显示历史最高分。分数记录器由DistanceMeter构造函数实现，以下是它的全部代码：

DistanceMeter.dimensions = {
    WIDTH: 10,    //每个字符的宽度
    HEIGHT: 13,    //每个字符的高
    DEST_WIDTH: 11 //间隙
};
DistanceMeter.config = {
    // 初始时记录的分数上限为5位数，即99999
    MAX_DISTANCE_UNITS: 5,

    // 每隔100米距离记录器的数字出现闪动特效
    ACHIEVEMENT_DISTANCE: 100,

    // 将移动距离转化为合理的数值所用的转化系数
    COEFFICIENT: 0.025,

    // 每250ms闪动一次
    FLASH_DURATION: 1000 / 4,

    // 闪动次数
    FLASH_ITERATIONS: 3
};
/**
         * 距离记录器
         * @param {HTMLCanvasElement} canvas
         * @param {Object} spritePos 雪碧图上的坐标.
         * @param {number} canvasWidth
         * @constructor
         */
function DistanceMeter(canvas, spritePos, canvasWidth) {
    this.canvas = canvas;
    this.canvasCtx = canvas.getContext('2d');
    this.image = imgSprite;
    this.spritePos = spritePos;
    //相对坐标
    this.x = 0;
    this.y = 5;

    //最大分数
    this.maxScore = 0;
    //高分榜
    this.highScore = 0;

    this.digits = [];
    //是否进行闪动特效
    this.acheivement = false;
    this.defaultString = '';
    //闪动特效计时器
    this.flashTimer = 0;
    //闪动计数器
    this.flashIterations = 0;
    this.invertTrigger = false;

    this.config = DistanceMeter.config;
    //最大记录为万位数
    this.maxScoreUnits = this.config.MAX_DISTANCE_UNITS;
    this.init(canvasWidth);
}

DistanceMeter.prototype = {
    /**
             * 初始化距离记录器为00000
             * @param canvasWidth canvas的宽度
             */
    init: function(canvasWidth) {
        var maxDistanceStr = '';

        this.calcXPos(canvasWidth);
        for (var i = 0; i < this.maxScoreUnits; i++) {
            this.draw(i, 0);
            this.defaultString += '0';
            maxDistanceStr += '9';
        }

        //99999
        this.maxScore = parseInt(maxDistanceStr);
    },
    /**
             * 计算出xPos
             * @param canvasWidth
             */
    calcXPos: function(canvasWidth) {
        this.x = canvasWidth - (DistanceMeter.dimensions.DEST_WIDTH * (this.maxScoreUnits + 1));
    },
    draw: function(digitPos, value, opt_highScore) {
        var sourceWidth = DistanceMeter.dimensions.WIDTH;
        var sourceHeight = DistanceMeter.dimensions.HEIGHT;
        var sourceX = DistanceMeter.dimensions.WIDTH * value;
        var sourceY = 0;

        var targetX = digitPos * DistanceMeter.dimensions.DEST_WIDTH;
        var targetY = this.y;
        var targetWidth = DistanceMeter.dimensions.WIDTH;
        var targetHeight = DistanceMeter.dimensions.HEIGHT;

        sourceX += this.spritePos.x;
        sourceY += this.spritePos.y;

        this.canvasCtx.save();

        if (opt_highScore) {
            // 将最高分放至当前分数的左边
            var highScoreX = this.x - (this.maxScoreUnits * 2) * DistanceMeter.dimensions.WIDTH;
            this.canvasCtx.translate(highScoreX, this.y);
        } else {
            this.canvasCtx.translate(this.x, this.y);
        }

        this.canvasCtx.drawImage(this.image, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);

        this.canvasCtx.restore();
    },
    /**
             * 将像素距离转化为“真实距离”
             * @param distance  像素距离
             * @returns {number} “真实距离”
             */
    getActualDistance: function(distance) {
        return distance ? Math.round(distance * this.config.COEFFICIENT) : 0;
    },
    /**
             * 更新距离记录器
             * @param {number} deltaTime
             * @param {number} distance
             * @returns {boolean} 是否播放声音
             */
    update: function(deltaTime, distance) {
        var paint = true;
        var playSound = false;

        if (!this.acheivement) {
            distance = this.getActualDistance(distance);
            // 分数超过最大分数时增加至十万位999999
            if (distance > this.maxScore && this.maxScoreUnits === this.config.MAX_DISTANCE_UNITS) {
                this.maxScoreUnits++;
                this.maxScore = parseInt(this.maxScore + '9');
            }

            if (distance > 0) {
                // 每100距离开始闪动特效并播放声音
                if (distance % this.config.ACHIEVEMENT_DISTANCE === 0) {
                    this.acheivement = true;
                    this.flashTimer = 0;
                    playSound = true;
                }

                // 让数字以0开头
                var distanceStr = (this.defaultString + distance).substr( - this.maxScoreUnits);
                this.digits = distanceStr.split('');
            } else {
                this.digits = this.defaultString.split('');
            }
        } else {
            // 到达目标分数时闪动分数
            if (this.flashIterations <= this.config.FLASH_ITERATIONS) {
                this.flashTimer += deltaTime;

                if (this.flashTimer < this.config.FLASH_DURATION) {
                    paint = false;
                } else if (this.flashTimer > this.config.FLASH_DURATION * 2) {
                    this.flashTimer = 0;
                    this.flashIterations++;
                }
            } else {
                this.acheivement = false;
                this.flashIterations = 0;
                this.flashTimer = 0;
            }
        }

        // 非闪动时绘制分数
        if (paint) {
            for (var i = this.digits.length - 1; i >= 0; i--) {
                this.draw(i, parseInt(this.digits[i]));
            }
        }

        this.drawHighScore();
        return playSound;
    },
    //绘制高分榜
    drawHighScore: function() {
        this.canvasCtx.save();
        this.canvasCtx.globalAlpha = .8; //让字符看起来颜色稍浅
        for (var i = this.highScore.length - 1; i >= 0; i--) {
            this.draw(i, parseInt(this.highScore[i], 10), true);
        }
        this.canvasCtx.restore();
    },
    setHighScore: function(distance) {
        distance = this.getActualDistance(distance);
        var highScoreStr = (this.defaultString + distance).substr( - this.maxScoreUnits);
        //10和11分别对应雪碧图中的H、I
        this.highScore = ['10', '11', ''].concat(highScoreStr.split(''));
    },
    //重置记录器为00000
    reset: function() {
        this.update(0);
        this.acheivement = false;
    }
};

GameOver

　　恐龙和障碍物碰撞后，游戏结束，游戏界面显示gameover面板，该功能由GameOverPanel构造函数实现：

GameOverPanel.dimensions = {
    TEXT_X: 0,
    TEXT_Y: 13,
    TEXT_WIDTH: 191,
    TEXT_HEIGHT: 11,
    RESTART_WIDTH: 36,
    RESTART_HEIGHT: 32
};

function GameOverPanel(canvas, textImgPos, restartImgPos, dimensions) {
    this.canvas = canvas;
    this.canvasCtx = canvas.getContext('2d');
    this.canvasDimensions = dimensions;
    this.textImgPos = textImgPos;
    this.restartImgPos = restartImgPos;
    this.draw();
}

GameOverPanel.prototype = {
    draw: function() {
        var dimensions = GameOverPanel.dimensions;

        var centerX = this.canvasDimensions.WIDTH / 2;

        // Game over text
        var textSourceX = dimensions.TEXT_X;
        var textSourceY = dimensions.TEXT_Y;
        var textSourceWidth = dimensions.TEXT_WIDTH;
        var textSourceHeight = dimensions.TEXT_HEIGHT;

        var textTargetX = Math.round(centerX - (dimensions.TEXT_WIDTH / 2));
        var textTargetY = Math.round((this.canvasDimensions.HEIGHT - 25) / 3);
        var textTargetWidth = dimensions.TEXT_WIDTH;
        var textTargetHeight = dimensions.TEXT_HEIGHT;

        var restartSourceWidth = dimensions.RESTART_WIDTH;
        var restartSourceHeight = dimensions.RESTART_HEIGHT;
        var restartTargetX = centerX - (dimensions.RESTART_WIDTH / 2);
        var restartTargetY = this.canvasDimensions.HEIGHT / 2;

        textSourceX += this.textImgPos.x;
        textSourceY += this.textImgPos.y;

        // Game over text from sprite.
        this.canvasCtx.drawImage(imgSprite, textSourceX, textSourceY, textSourceWidth, textSourceHeight, textTargetX, textTargetY, textTargetWidth, textTargetHeight);

        // Restart button.
        this.canvasCtx.drawImage(imgSprite, this.restartImgPos.x, this.restartImgPos.y, restartSourceWidth, restartSourceHeight, restartTargetX, restartTargetY, dimensions.RESTART_WIDTH, dimensions.RESTART_HEIGHT);
    }
};

function gameOver() {
    cancelAnimationFrame(raq);
    raq = 0;
    crashed = true;
    trex.update(0, Trex.status.CRASHED);

    distanceMeter.acheivement = false;
    if (distanceRan > highestScore) {
        highestScore = Math.ceil(distanceRan);
        distanceMeter.setHighScore(highestScore);
    }

    if (!gameOverPanel) {
        gameOverPanel = new GameOverPanel(c, spriteDefinition.TEXT_SPRITE, spriteDefinition.RESTART, dimensions);
    } else {
        gameOverPanel.draw();
    }
}

游戏重新开始

　　GameOver后，按下Spacebar游戏重新开始，restart方法负责将游戏各个元素或数据重置：

function restart() {
    trex.reset();
    Obstacle.obstacles = [];
    h.reset();
    night.reset();
    crashed = false;
    time = performance.now();
    distanceRan = 0;
    ctx.clearRect(0, 0, 600, 150);
    distanceMeter.reset();
    raq = requestAnimationFrame(draw, c);
}

游戏暂停

　　当游戏窗口失去焦点时，游戏暂停，得到焦点时游戏继续。游戏通过注册三个事件来实现：

document.addEventListener('visibilitychange',onVisibilityChange);
window.addEventListener('blur',onVisibilityChange);
window.addEventListener('focus',onVisibilityChange);

onVisibilityChange: function(e) {
    if (document.hidden || document.webkitHidden || e.type == 'blur' || document.visibilityState != 'visible') {
        this.stop();
    } else if (!this.crashed) {
        this.tRex.reset();
        this.play();
    }
},
stop: function() {
    this.activated = false;
    this.paused = true;
    cancelAnimationFrame(this.raqId);
    this.raqId = 0;
},
play: function() {
    if (!this.crashed) {
        this.activated = true;
        this.paused = false;
        this.tRex.update(0, Trex.status.RUNNING);
        this.time = getTimeStamp();
        this.update();
    }
}

开场动画

　　第一次开始游戏时，会有一个过渡动画，效果是地面逐渐展开，并且恐龙向前移动50像素。

// CSS animation definition.
var keyframes = '@-webkit-keyframes intro { ' + 'from { ' + Trex.config.WIDTH + 'px }' + 'to {  ' + this.dimensions.WIDTH + 'px }' + '}';
document.styleSheets[0].insertRule(keyframes, 0);

this.containerEl.addEventListener('webkitAnimationEnd', this.startGame.bind(this));

this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
this.containerEl.style.width = this.dimensions.WIDTH + 'px';


//向前移动50像素
if (this.playingIntro && this.xPos < this.config.START_X_POS) {
    this.xPos += Math.round((this.config.START_X_POS / this.config.INTRO_DURATION) * deltaTime);
}

游戏音效

　　游戏准备了三种音效，分别是游戏点击空格键开始时、与障碍物碰撞时、每到达100分时。游戏在代码中放置了三个audio标签来存放音效，并且是base64形式，所以在播放时要经过解码，可以查阅文档了解AudioContext API的用法：

function decodeBase64ToArrayBuffer(base64String) {
    var len = (base64String.length / 4) * 3;
    var str = atob(base64String);
    var arrayBuffer = new ArrayBuffer(len);
    var bytes = new Uint8Array(arrayBuffer);

    for (var i = 0; i < len; i++) {
        bytes[i] = str.charCodeAt(i);
    }
    return bytes.buffer;
}

var data = '........base64String.......';
var soundFx = {};
var soundSrc = data.substr(data.indexOf(',')+1);
var buffer = decodeBase64ToArrayBuffer(soundSrc);
var audioContext = new AudioContext();
audioContext.decodeAudioData(buffer,function(index,audioData) {
    soundFx[index] = audioData;
}.bind(this,'audio1'));

function playSound(soundBuffer) {
    if (soundBuffer) {
        var sourceNode = audioContext.createBufferSource();
        sourceNode.buffer = soundBuffer;
        sourceNode.connect(audioContext.destination);
        sourceNode.start(0);
    }
}

window.onload = function() {
    playSound(soundFx['audio1']);
};

对移动设备的处理　　

　　游戏还专门对移动设备进行了处理，包括屏幕大小的自适应，游戏速度调节，为高清屏加载高清素材等等。具体代码就不一一列出了。

　　至此，对这个小游戏的代码研究结束，下面是完整的游戏：

 

总结

　　通过对这个游戏的源码进行研究，从中收获了不少干货，对2d游戏的制作思路有一定的启发，特别是基于时间的运动有了进一步的认识。游戏大致可以划分为以下功能：

大部分构造函数里都包含了一个名为update的方法，在每次GameLoop里调用以更新该游戏元件的状态，并根据条件判断是否在画布上绘制(draw)。

暂时就想到这么多，接下来就是以开发一个2D游戏为目标努力了。