第4章　解谜游戏

解谜游戏代表作有《宝石迷阵》（Bejeweled） 。

在玩《宝石迷阵》、《Snood》 和《Tetris Attack》这种游戏时，玩家要通过“增加”、“消除”、“移动”、“交换”等操作，尽快把各色方块按相关规则匹配起来。对于休闲式的网页游戏来说，这种形式很流行，不过其他游戏平台也会出现此类作品。

这类游戏有个特点，就是构建起来相对较为容易一些。除了可以单独发行之外，我们也可以将之改编为解谜类游戏，或是把它做成“迷你小游戏”（minigame），嵌套在其他大型游戏里面。SNES游戏机（Super Nintendo console system）上面有款游戏叫做《Lufia 2》 ，此游戏尤以频繁使用“地下城式的解谜机制”（dungeon puzzle）而著称，比方说，游戏中需要通过移动色块来解谜。在大家更为熟悉的《塞尔达传说》（Legend of Zelda）系列中，玩家也经常需要通过此类解谜机制来打开门锁或开启宝箱，解谜要素贯穿于整个游戏流程里面。

除了虚拟的电子游戏之外，真实世界里也有这种游戏。比如“十六格数字推盘游戏” 正属于此类。我们可以为游戏中的“方块”设定一些新的能力，令规则逐渐复杂起来，同时还可以增设一些判定胜负及平局的机制，这样一来，就可以演变为井字棋 、围棋、国际象棋之类的游戏了（若想做成一款类似国际象棋的游戏，还需要向其中加入某些中世纪风格的要素才行）。

本章将构建一款小朋友们经常玩的游戏，它叫做Memory，规则很简单：点击内容相同的两张图，令其消失，直至消去全部图片。我们采用名为easel.js的JavaScript游戏引擎来制作此游戏。

在编程中经常听到“高层抽象”（high-level abstraction）与“底层抽象”（low-level abstraction）这两个说法。如果许多小细节都要由开发者自己来处理，那就叫做“底层抽象” ，反之，如果这些细节都由程序库、编程语言，或本书所提到的JavaScript游戏引擎来处理，那就叫做“高层抽象” 。书里所讲的各个游戏引擎，其抽象程度会越来越高，不过，本章所用到的这个easel.js却显得相当底层，也就是说，与其称之为游戏引擎，倒不如把它看成一套便捷而通用的接口，这套接口背后封装着渲染canvas所用的API。由于本章要制作的“图片记忆游戏”相当简单，所以采用easel.js这个底层引擎正合适，在使用底层引擎的过程中，还会碰见一些其他章节所接触不到的细节问题。

我们从程序清单4.1所列的这个index.html文件开始，它位于范例代码的puzzle/initial目录下。这段代码设置了doctype、加载了easel.js引擎，并创建了制作本章游戏所需的canvas元素。

程序清单4.1　刚开始制作游戏时所用的HTML文件

现在用Firefox或Chrome浏览器打开此文件会看到空白画面。下一步我们就开始使用easel.js引擎，向屏幕上渲染一些内容。