3.4　第四步：绘制鼹鼠

画好鼠洞之后，游戏环境就准备好了。现在轮到游戏中的敌人（鼹鼠，mole）登场了。由于我们在本步骤中只是试着绘制一下，所以无论把它画到何处都可以。按照程序清单3.9中的粗体代码修改draw函数，令鼹鼠出现在画面左上方。

程序清单3.9　在game.draw函数中绘制鼹鼠

现在还没有game.mole对象。为了使这段代码能正常运行，我们需要创建mole对象，并在其中编写它的draw方法。将程序清单3.10中的代码加入game.js。这段代码放在哪里都可以，但是不要嵌套在已有的那些函数或对象之中。

程序清单3.10　具备draw方法的mole对象

首先定义几个简单的整数及字符串属性，供其后的函数用。接下来，在mole对象中定义draw函数，游戏引擎的主draw函数会调用它。此函数的参数表示鼹鼠的坐标，它把实际绘制工作交给具体的小函数来执行，那些函数负责绘制鼹鼠的各个部位（头、鼻子、眼睛、胡须）。由于绘制圆形的步骤大家已经非常熟悉了，所以绘制头部、鼻子、眼睛所用的这三个函数就不用多说了，但是绘制胡须所用的drawWhiskers却调用了几个新函数，在这需要讲一下。

从概念上来说，moveTo函数可以理解为“把画笔移至此处”，而lineTo函数则可以理解为“把画笔从其所在之处拖动至此”。但这两个函数用的都是“隐形墨水”，所以还需调用stroke方法。该方法会“把隐藏的墨迹显示出来”。

mole对象的属性列表看上去有点长。可以把它拆分成几小块，不过在接下来的步骤中，我们还是会将其视为一个整体。这段程序有好几个地方都出现了重复代码（比如drawWhiskers方法里面），所以大家可能想把它们精简一下。如果你觉得自己已经无法驾驭某段代码了，那就尽快重构，然而要注意：应该把代码写得通用一些，不要太过局限，而且要保持明晰，不要模糊了代码的本意。清理代码，使其更易于理解，这个想法是好的，不过，一般情况下，只有等到程序变得稍微复杂一些时，我们才能看出来应该如何精简它。

提示

使用纯canvas方法来绘图时，画一只如此简单的鼹鼠，竟然需要这么多行代码。许多程序库都提供了封装程度更高的绘制函数，可以减少绘制图形时所需的代码量。如果不想写这么多代码，那还有个办法，就是用图片来代替。这种方式也有其复杂之处，所幸大部分游戏库（包括atom.js）都会把图片组织为“精灵”（sprite），而精灵可以复用，绘制效率也比较高。本书其余章节将会频繁使用精灵，不过现在我们还是先来学习如何用纯canvas来绘图吧。

实现好mole对象，令主绘制函数调用其draw方法，然后保存game.js文件，用浏览器打开index.html，即可看到如图3.3所示的画面了。

图3.3　绘于画面左上方的鼹鼠