3.5　第五步：将鼹鼠放入鼠洞

本步骤将要大幅修改与鼠洞相关的代码。现在为鼠洞所写的这部分代码只能简单地把鼠洞画到屏幕上而已。如果要实现打地鼠的功能，还要再增加一些逻辑代码才行。有好几种实现方式，其中一种是为mole对象增加“bopped”属性，并记录鼹鼠当前位于哪个鼠洞里。不过在真实的打地鼠游戏机上，鼹鼠只不过是藏在每个鼠洞里的塑料娃娃而已。所以不要做得太复杂了，把鼹鼠当成鼠洞里的装饰物就行了，在鼠洞处于激活状态时，将其显示出来，否则将其隐藏。

现在开始修改game.js，首先，需要将程序清单3.11中的这行粗体代码添加到文件中，请把它放在run函数调用语句的上方。

程序清单3.11　调用makeHoles函数

这行粗体代码是刚加进来的。尽管我们仍然要在游戏每次循环时于draw函数中绘制鼠洞，但绘制所需的那些对象却只需创建一次就够了。所以，这段代码要把调用makeHoles的语句放在draw、update、run等函数外面。现在看看程序清单3.12所列的实现代码，此函数可以紧随game.draw函数而置于其后。

程序清单3.12　定义makeHoles函数

此函数先创建了名为game.holes的数组，用于存放新构建出来的鼠洞对象。每构建完一个鼠洞，就为其设置几项属性，并把它加入holes数组里。由于这次是逐个绘制鼠洞，因此现在可以把drawHoles函数删掉了。

然后需要把程序清单3.13中的这一大段代码加入game.hole对象中。该对象现在不仅要封装draw方法，而且还得包含重要的逻辑代码，以便将标签、鼠洞、鼹鼠等物件绘制到屏幕上。

程序清单3.13　将更多的绘制任务交由hole对象完成

在这段代码中，第一处改动即是加入了名为moleOffset的变量，因为稍后在绘制鼹鼠时，我们想把鼹鼠稍稍放在鼠洞上方一点，所以要用这个变量来表示偏移量。早前在绘制鼹鼠时，我们是将鼹鼠拆分成几个部位分别绘制的，而接下来，我们也要采用类似方式，将hole对象的绘制任务拆分为绘制鼠洞、绘制标签、绘制鼹鼠等三个部分。只有在hole对象的active属性为“真”时（也就是鼹鼠从洞中探出头来的时候），才需要绘制鼹鼠。与绘制鼹鼠有关的那些细节都在game.mole对象中写好了，所以到时只需将这些复杂的任务都交由mole对象来完成即可。而mole对象的draw方法则无须修改。

在本步骤最后，我们按照程序清单3.14来修改game.draw函数。

程序清单3.14　新版draw方法

修改后的draw与原来一样，也是先绘制背景，但绘制完背景之后，旧版函数是继续绘制各个洞穴，最后画一只鼹鼠，而新版函数则是遍历holes里的各个hole对象，并调用其draw方法。

如果一切正常，那么所有鼠洞都处于激活状态，也就是说，每个鼠洞中都会有鼹鼠探出头来。用浏览器打开index.html文件，即可看到如图3.4所示画面。

图3.4　所有鼠洞中都有鼹鼠钻出来

技巧

本步骤中改动的代码很多。若运行程序时遇到了问题，请仔细检查，尤其要检查调用每个函数时所传入的参数。如果实在无法解决，请将所写的代码同本书范例代码中的party/after_recipe5/game.js文件相比对。

与绘制相关的部分已经做好了，大家现在可以看到，夕阳下出现了好几个可爱的鼹鼠，然而这还不能称为游戏。所以在下一步里，我们还要加入一些动态代码，用以表现鼹鼠从洞中钻出来的过程。