HTML5 2D 游戏开发 Snail Bait 简介（1）

look_w

软件开发的优势在于：在合理的范围内让任何您能想象到的事物在屏幕上变成现实。不像其他领域受一些物理条件的束缚，软件开发人长期以来一直使用图形化 API 和 UI 工具包来实现富有创造性和引人注目的应用程序。最富有创造性的软件开发大概是游戏编程；比起让游戏景愿变成现实，优秀的创意就可使您通过少许努力便可获得更多的收益。
平台视频游戏（Platform video games）Donkey Kong、Mario Bros.、Sonic the Hedgehog 和 Braid 是众所周知的畅销游戏，它们都是平台游戏。平台游戏曾一度占据视频游戏销售的三分之一。今天，它们的市场份额大幅下降，但仍有许多成功的平台游戏。

然而，有益的并不意味着容易的；事实上，恰恰相反。实现游戏（特别是视频游戏）需要对编程有着非凡的理解，能够很好地把握抓图和动画，还需要掌握大量数学知识、艺术和创造力的结合使用。而这仅仅只是一个开头，成功的游戏开发人员需要花费大量时间来雕琢其游戏，改良游戏玩法和图像，除此之外，还要实现很多与游戏玩法无关的方面，比如记分牌、指令、生命和级别之间的动画以及残局序列 (endgame sequences)。
本系列旨在向您显示如何实现一个 HTML5 视频游戏，这样您就可以开始创建自己的游戏了。
游戏：Snail Bait在本系列中，我首先会向您展示如何使用 HTML5 Canvas API 实现一个平台视频游戏。该游戏是 Snail Bait，如图 1 所示。您可以在线播放该游戏；请参阅 ，以获取该游戏的链接。确保您的浏览器中有 Canvas 硬件加速器（最近刚刚在大多数浏览器上实现，包括 Chrome V18 以上的版本）；否则，Snail Bait 性能会大幅降低（参阅  侧栏，获取有关的详细信息。）
图 1. Chorme 上运行的 Snail Bait Snail Bait 中使用的 HTML5 技术

• Canvas (2D API)
• 基于脚本的动画的定时控制
• Audio
• CSS3（转换和媒体查询）

Snail Bait 是一款经典的平台游戏，游戏的主人公，我通常将其简称为跑步小人，在水平移动的浮动平台奔跑跳跃。跑步小人的最终目标是到达一个有规律地跳动的平台，并在该级别结束时获得一枚黄金纽扣。 中显示了跑步小人、有规律地跳动的平台和黄金纽扣。
玩家使用键盘控制跑步小人：d 向左移动，k 向右移动，j 或 f 跳起，p 暂停游戏。
游戏开始时，您有 3 条生命。游戏画布左上方会显示代表剩余生命数的跑步小人图标，正如您在  中所看到的那样。在跑步小人达到该级别终点的过程中，她必须避开一些坏家伙（蜜蜂、蝙蝠和蜗牛），同时试着抓住贵重物品，比如硬币、红宝石和蓝宝石。如果跑步小人碰到坏家伙，就会流血并失去一条生命，并且您必须回到该级别的起点。当跑步小人碰到 “好人” 时，您的积分将会增加，并会听到一个令人愉悦的声音。
WASD？按照惯例，计算机游戏通常使用 w、a、s 和 d 键来控制游戏。该惯例的形成主要是为了让右手玩家同时使用鼠标和键盘。也可以让右手自由地按下空格键和修饰键（比如 CTRL 或 ALT）。Snail Bait 没有使用 WASD，因为它无法从鼠标或修饰键接收输入。但是您可以通过修改游戏代码来使用任意组合键，这个很容易。

坏家伙通常只是在附近徘徊，等待跑步小人撞上它。但是，蜗牛会定期发射蜗牛炸弹（ 中心显示的银球），炸弹和其他坏家伙一样，碰到跑步小人就时会炸毁她。
结束游戏的方法有两种：您失去 3 次生命，或者您到达有规律地跳动的平台（击中黄金纽扣就会有奖励积分）。不管采用哪种方式，游戏结束积分均如图 2 所示：
图 2. 游戏积分您在  中无法看到的是：所有一切都在不停的滚动，除了跑步小人，她的运动由您来控制。因为有滚动，所以将 Snail Bait 归类为 side-scroller 平台游戏。虽然这不是游戏中惟一的动作，但它引导我发现了 sprite 及其行为。
sprite：演员表HTML5 Canvas 性能就在不久之前，大多数浏览器已经为 CSS 转换实现了硬件加速，但尚未对 Canvas 实现此转换。Canvas 发展一直相对较快，尤其在与其他图形系统（比如 Scalable Vector Graphics (SVG)）相比时，但是没有硬件加速的 Canvas 是无法与有加速硬件的系统相匹敌的。
现在，所有现代浏览器都实现了 Canvas 元素硬件加速。iOS 5 也是如此，这意味着有着流畅动画的基于 Canvas 的视频游戏现在不仅可以出现在桌面系统上，还可以在移动设备上实现。

除了背景之外，Snail Bait 中的一切都是 sprite，一个 sprite 是一个您可以在游戏画布上绘画的对象。sprite 不是 Canvas API 的一部分，但是易于实现，该游戏的 sprite 是：

• 平台（无生命对象）
• 跑步小人（主角）
• 蜜蜂和蝙蝠（坏）
• 纽扣（好）
• 红宝石和蓝宝石（好）
• 硬币（好）
• 蜗牛（坏）
• 蜗牛炸弹（坏）

除了从右向左滚动之外，几乎所有的游戏 sprite 都有其自己独立的行为。例如，红宝石和蓝宝石以不同的速率上下跳动，纽扣和蜗牛沿着它们所在的平台来回徘徊。
Replica Islandsprite 行为（是设计模式的一个示例）的想法来自 Replica Island，这是一款流行的开源 Android platform 游戏。多数 Snail Bait 图形来自 Replica Island（已得到使用许可）。请参阅 ，获取 Wikipedia 和 Replica Island 主页上的 Strategy 设计模式链接。

独立运动是诸多 sprite 行为之一。Sprite 可以具有与运动无关的其他行为；例如，除了上下跳动之外，红宝石和蓝宝石还会闪闪发光。
每个 sprite 都有一个行为阵列。行为只是一个具有 execute() 方法的对象。在每个动画帧中，游戏都会调用每个行为的 execute() 方法。在该方法中，行为以某种方式（具体情况视游戏条件而定）操控其相关 sprite。例如，您按下 k 键让跑步小人向右移动，跑步小人的横向移动行为随后会在每个动画帧中将跑步小人向右移动，直至更改其方向。另一个行为是在正确位置跑动，该行为会定期改变跑步小人图像，使得跑步小人看起来像是在正确位置上跑动。这两个行为组合在一起使得跑步小人看起来似乎正在向左或向右跑动。
表 1 列出了游戏的 sprite 及其相应行为：
表 1. Snail Bait 的 sprite 和行为Sprite行为平台

• 水平移动（所有 sprite，除了跑步小人和蜗牛炸弹，都以与平台一致的方式移动）

跑步小人

• 在正确位置跑动
• 横向移动
• 跳跃
• 坠落
• 与坏家伙相撞并爆炸
• 碰到 “好人” 并得分

蜜蜂和蝙蝠

• 盘旋
• 扇动翅膀

纽扣

• 踱步
• 倒塌
• 变化：使坏家伙爆炸并结束游戏

硬币、红宝石和蓝宝石

• 闪耀
• 上下跳动
• 踱步

蜗牛

• 踱步
• 射击炸弹

蜗牛炸弹

• 从右向左移动（比平台快）
• 撞到跑步小人并消失

本系列的后续文章将深入研究 sprite 和 sprite 行为。现在，为了向您提供一个高度概述，清单 1 展示了该游戏如何创建 runner sprite：
清单 1. 创建 sprite

1 2 3 4 5 6 7 8 9

var runInPlace = {  // Just an object with an execute method    execute: function (sprite, time, fps) {       // Update the sprite's attributes based on the time and frame rate    } }; var runner = new Sprite('runner', // name                         runnerPainter, // painter                         [ runInPlace,... ]); // behaviors

runInPlace 对象是在包含其他行为的数组中定义的，并给传递给跑步小人 sprite 的构造函数。在运行的时候，该游戏调用每个动画帧的 runInPlace 对象的 execute() 方法。