8.9 创建HTML文档并启动游戏

现在，我们有了游戏的所有东西，包括图形、每种角色的类、关卡、生命值条、及完整的游戏引擎，是时候创建HTML文档把它们联系起来，并启动游戏了。

操作步骤

按照以下步骤，创建HTML文档，并启动游戏：

1. 链接到JavaScript文件：

<script src="animation.js"></script>
<script src="Controller.js"></script>
<script src="Model.js"></script>
<script src="View.js"></script>
<script src="Level.js"></script>
<script src="Actor.js"></script>
<script src="HealthBar.js"></script>

2. 初始化控制器：

<script>
  window.onload  = function(){
  new Controller("myCanvas");
};
</script>

3. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="900" height="600"> </canvas>

工作原理

正如你所看到的，HTML标记非常简单，其目的仅仅是链接到所需要的JavaScript文件，嵌入canvas标签，并初始化控制器。由控制器来初始化模型和视图。由模型来初始化英雄、坏人、关卡、生命值条。一旦图像加载完成，游戏状态就变到就绪状态，玩家按回车键，游戏就开始。

了解更多

现在，你可以玩游戏来拯救世界了！如果你用模型那一节定义的三个生命值来初始化游戏中的英雄和坏人，则英雄被击中三次游戏就会结束，而坏人被击中三次就会被击败。我已经发现击败坏人比较容易的方法是，跳过它们的头顶，并在背后连续击打，直到它们变成吐司（我知道，便宜，但管用）。我也发现，跳进悬浮仓并在空中漂浮片刻，等候恰当的时机，然后像日本武士一样攻击坏人，也很好玩。

如果你把本章作为开发你自己的卷轴游戏的基础，下面是你可能需要考虑的其他特性：

• 使用HMTL5的audio标签，为跳跃、着陆、出拳等创建音效
• 增加暂停特性来冻结游戏直到重新开始
• 计时器和最高得分榜
• 更多关卡、敌人、大怪
• 道具
• 使用HTML5的本地存储，或把游戏状态保存到在线数据库，来提供保存游戏状态的选项
• 任何你可以想象的东西

更多参考

• 第5章 创建Animation类