游戏开发的许多方面都和玩游戏没有关系。显示说明、暂停游戏、级别之间的过渡和滚动游戏分数,这些 都是游戏开发人员必须在游戏本身以外实现的一些特性。
当游戏的灵感来临时,这些灵感中通常不包 括显示高分数或级别之间的过渡的巧妙方式,开发人员会很自然地深入研究如何实现游戏机制,但对于游戏的 基础架构却没有太多的想法。但在大多数项目中,如果想在开发后添加功能,所需的工作量比从一开始就添加 功能要大得多。
在本系列的 上一期文章 中,我讨论了图形和动画,这些是 Snail Bait 游戏的基础 内容。在本文中,我将临时转向去实现该游戏的一些基础架构。首先,我将 Snail Bait 的代码封装在一个 Game 对象中。最初实现该游戏时,我就是从这一步开始的,但在上一期文章中,我不想在对象中实现它们而 混淆了对图形和动画的讨论,所以我将对 Game 对象的介绍推迟到了现在。
我还将告诉您如何暂停和 冻结 Snail Bait,以及随后如何利用动画倒计时解冻并重启游戏。在文章的结尾,我会回到游戏机制的主题 ,向您展示如何通过处理键盘事件来控制跑步小人的垂直位置。
在本文中,您将学习以下内容:
将游戏函数封装在一个对象中。
暂停和恢复游戏。
当窗口失去焦点时自动暂停游戏。
当窗口重新获得焦点时,利用动画的倒计时继续游戏。
暂时显示给用户的消息(被称为 toast)。
处理键盘输入。
在本文中,您将学习如何定义和实例化 JavaScript 对象,如何使用 CSS3 过渡,以及如何结合使用 setTimeout() 和这些过渡来实现分步动画。
游戏对象
在本系列文章中,到现在为止,我已经 实现了所有 Snail Bait 函数,并将它们的几个变量定义为全局变量。当然,我们以后不会再这样做。
从现在开始,我不再使用全局变量,而是将所有 Snail Bait 函数和变量封装在一个对象中。该对象 由两部分组成,如清单 1 和清单 2 所示。(本文的完整样例代码请参见 下载。)
清单 1 是本游戏 的构造函数,它定义了对象的属性:
清单 1. 本游戏的构造函数(部分清单)
- var
- SnailBait = function (canvasId) {
- this.canvas = document.getElementById(canvasId);
- this.context = this.canvas.getContext('2d');
- // html elements
- this.toast = document.getElementById('toast'),
- this.fpsElement = document.getElementById('fps');
- // Constants
- this.LEFT = 1;
- this.RIGHT = 2;
- ...
- // Many more attributes are defined in the rest of this function
- };
清单 2 是本游戏的原型,它定义了对象的方法:
清单 2. 是本游戏的原型(部分清单)
- SnailBait.prototype = {
- // The draw() and drawRunner() methods were
- // discussed in the second article in this series.
- draw
- function(now) {
- this.setPlatformVelocity();
- this.setOffsets();
- this.drawBackground();
- this.drawRunner();
- this.drawPlatforms();
- },
- drawRunner: function() {
- this.context.drawImage(this.runnerImage, this.STARTING_RUNNER_LEFT, this.calculatePlatformTop(this.runnerTrack) - this.RUNNER_HEIGHT);
- },
- ...
- // Many more methods are defined in the rest of this object
- };
来源: http://www.bianceng.cn/web/Html/201311/38446.htm