HTML5 Canvas实战
8.9 创建HTML文档并启动游戏
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建图表

通过游戏开发来拯救世界

创建英雄和敌人的精灵表

创建关卡图像和边界地图

创建英雄和敌人的Actor类

创建Level类

创建Health Bar类

创建Controller类

创建Model类

创建View类

创建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类

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验