文章首发于我的个人博客
前言
上一篇文章：《Chrome 小恐龙游戏源码探究九 — 游戏碰撞检测》实现了游戏的碰撞检测，这一篇文章中将利用碰撞检测的结果，实现游戏的结束。
绘制 Game Over 面板
这个游戏结束时的 Game Over 面板是通过 GameOverPanel 类绘制的。
定义 GameOverPanel 类：
/**
* 游戏结束面板类
* @param {!HTMLCanvasElement} 画布元素
* @param {Object} textImgPos 文字 "Game Over" 在雪碧图中的位置
* @param {Object} restartImgPos 重置按钮在雪碧图中的位置
* @param {!Object} dimensions 游戏画布的尺寸
*/
function GameOverPanel(canvas, textImgPos, restartImgPos, dimensions) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.canvasDimensions = dimensions;
this.textImgPos = textImgPos;
this.restartImgPos = restartImgPos;
this.draw();};相关的配置参数，以及原型链上的方法：
// 配置参数
GameOverPanel.dimensions = {
TEXT_X: 0, // 文字 "Game Over" 的 x 坐标
TEXT_Y: 13,
TEXT_WIDTH: 191, // 文字 "Game Over" 的宽度
TEXT_HEIGHT: 11,
RESTART_WIDTH: 36, // 重置按钮的宽度
RESTART_HEIGHT: 32,
};
GameOverPanel.prototype = {draw: function() {
var dimensions = GameOverPanel.dimensions;
var centerX = this.canvasDimensions.WIDTH / 2;
// 文字 "Game Over"
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"
this.ctx.drawImage(Runner.imageSprite,
textSourceX, textSourceY, textSourceWidth, textSourceHeight,
textTargetX, textTargetY, textTargetWidth, textTargetHeight);
// 重置按钮
this.ctx.drawImage(Runner.imageSprite,
this.restartImgPos.x, this.restartImgPos.y,
restartSourceWidth, restartSourceHeight,
restartTargetX, restartTargetY, dimensions.RESTART_WIDTH,
dimensions.RESTART_HEIGHT);
}
}; 然后需要在游戏结束时，调用 GameOverPanel 类。
在 gameOver 方法中调用 GameOverPanel 类，并更新小恐龙的状态和一些标志位：
Runner.prototype = {
// 游戏结束
gameOver: function () {this.stop();
+ this.crashed = true; // 小恐龙撞到了障碍物
+ this.distanceMeter.achievement = false; // 结束分数闪动特效
+ // 更新小恐龙为碰撞状态
+ this.tRex.update(100, Trex.status.CRASHED);
+ // 绘制游戏结束面板
+ if (!this.gameOverPanel) {
+ this.gameOverPanel = new GameOverPanel(this.canvas,
+ this.spriteDef.TEXT_SPRITE, this.spriteDef.RESTART,
+ this.dimensions);
+ } else {+ this.gameOverPanel.draw();
+ }
if (this.distanceRan > this.highestScore) {this.highestScore = Math.ceil(this.distanceRan);
this.distanceMeter.setHighScore(this.highestScore); // 保存最高分
}
// 重置时间
this.time = getTimeStamp();},
};补充数据：
Runner.spriteDefinition = {
LDPI: {
// ...
+ RESTART: {x: 2, y: 2}, // 重置游戏按钮
},
}; 前面的文章中，为了演示效果，我们把 gameOver 方法的调用临时放在了判断页面是否失焦的 onVisibilityChange 方法中。现在我们就不需要这个临时调用了，删除即可。gameOver 实际的调用如下：
Runner.prototype = {update: function () {
// ...
if (this.playing) {
// ...
// 碰撞检测
var collision = hasObstacles &&
- checkForCollision(this.horizon.obstacles[0], this.tRex, this.ctx);
+ checkForCollision(this.horizon.obstacles[0], this.tRex);
+ if (!collision) {
this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
if (this.currentSpeed < this.config.MAX_SPEED) {this.currentSpeed += this.config.ACCELERATION;}
+ } else {+ this.gameOver();
+ }
var playAchievementSound = this.distanceMeter.update(deltaTime,
Math.ceil(this.distanceRan));
// ...
}
// ...
},
}; 这样就实现了结束游戏后，Game Over 面板的绘制，效果如下：
查看添加和修改的代码，戳这里
重新开始游戏
想要重新开始游戏，无非就是把保存的数据清零以及把标志位给重置：
Runner.prototype = {
// 重新开始游戏
restart: function() {if (!this.raqId) {
this.runningTime = 0; // 重置游戏运行时间
this.setPlayStatus(true); // 游戏重置为进行状态
this.paused = false; // 游戏没有暂停
this.crashed = false; // 小恐龙没有撞到障碍物
this.distanceRan = 0; // 重置游戏移动距离（分数）this.currentSpeed = this.config.SPEED; // 重置游戏当前的速度
this.time = getTimeStamp(); // 重置计时器
this.clearCanvas(); // 清空画布
this.distanceMeter.reset(); // 重置分数类
this.horizon.reset(); // 重置背景类
this.tRex.reset(); // 重置小恐龙类
this.invert(true); // 重置页面为没有进行颜色反转
this.update(); // 重置后更新游戏}
},
}; 其中 Trex 类上的 reset 方法已经定义过了。DistanceMeter、Horizon 类上的 reset 方法定义如下：
DistanceMeter.prototype = {
// 重置当前分数为 '00000'
reset: function() {this.update(0); // 更新分数
this.achievement = false; // 分数不进行闪动特效
}
};
Horizon.prototype = {
// 重置背景类
reset: function() {this.obstacles = []; // 清空障碍物
this.horizonLine.reset(); // 重置地面
this.nightMode.reset(); // 重置夜晚模式},
}; 同样的，HorizonLine、NightMode 类上的 reset 方法定义如下：
HorizonLine.prototype = {reset: function() {
// 重置两段地面的坐标
this.xPos[0] = 0;
this.xPos[1] = HorizonLine.dimensions.WIDTH;
},
};
NightMode.prototype = {reset: function() {
this.currentPhase = 0; // 重置月期
this.opacity = 0; // 重置夜晚模式中的物体透明度
this.update(false); // 重置夜晚模式位未激活状态
},
}; 最后，调用 restart 方法：
Runner.prototype = {onKeyUp: function(e) {var keyCode = String(e.keyCode);
var isjumpKey = Runner.keyCodes.JUMP[keyCode];
if (this.isRunning() && isjumpKey) { // 跳跃
this.tRex.endJump();} else if (Runner.keyCodes.DUCK[keyCode]) { // 躲避状态
this.tRex.speedDrop = false;
this.tRex.setDuck(false);
+ } else if (this.crashed) {+ var deltaTime = getTimeStamp() - this.time;
+
+ // 按下回车键或者等待 750 毫秒后，按下空格键，重新开始游戏
+ if (Runner.keyCodes.RESTART[keyCode] ||
+ (deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
+ Runner.keyCodes.JUMP[keyCode])) {+ this.restart();
+ }
+ }
},
};效果如下：
查看添加和修改的代码，戳这里
加载游戏音效
TODO
Demo 体验地址：[]() TODO
游戏的其他要素
到这里，我们已经把游戏的必要功能都实现了。原游戏中，还实现了移动端适配，高分屏的适配，是否需要进入街机模式的处理，游戏画布对浏览器窗口大小的自适应。
这些功能我们就不再实现，感兴趣的可以自行尝试。
结语
利用十多天的业余时间探究了小恐龙游戏的源码，收获很多，也为自己以后开发 H5 游戏提供了一定的思路。
由于水平有限，如果文章存在有歧义或错误的地方，欢迎评论指出。
（完）
| 上一篇 | 下一篇 | Chrome 小恐龙游戏源码探究九 — 游戏碰撞检测 | 无 |