基于HTML5技术的Web游戏设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
关键词 ：Ｈ Ｔ Ｍ Ｌ ５ ；Ｗ ｅ ｂ 游戏 ；Ｃ ａ ｎ ｖ ａ ｓ
１ Ｈ Ｔ ＭＬ ５ 技 术特 点
ｌ ｏ ａ ｄ ｉ ｎ ｇ Ｌ ａ ｙ ｅ ｒ ． ｓ ｅ ｔ Ｐ ｒ ｏ ｇ ｒ ｅ ｓ ｓ （ ｐ ｒ ｏ ｇ ｒ ｅ ｓ ｓ ） ；
Ｈ 茎
素 ，其 中包 括 与Ｗｅ ｂ 游 戏 设计 紧 密 相关 的Ｃａ ｎ ｖ ａ ｓ 元素 …。 从 文字 处理 到 电子游 戏 ，它们 所 需 的全部 图形功 能 ， Ｃａ ｎ ｖ ａ ｓ 元素 都会 提 供 。尽管 它在 各 个平 台中 的性 能有 所差
标 。相 关代 码如 下 ：
Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ ． ｐ ｒ ｏ ｔ ｏ ｔ ｙ ｐ ｅ ． ｕｎ ｒ ＝ ｆ ｕ ｎ ｃ ｔ ｉ ｏ ｎ （ ） ｆ
ｖ ａ ｒ ｓ ｅ ｌ ｆ ＝ ｔ ｈ ｉ ｓ ； ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｙ － ＝Ｓ Ｔ ＡＧＥ Ｓ Ｔ ＥＰ；
３ ． １游戏 初始 化
｛
ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ ２ ． Ｙ 一 ＝ Ｓ ＴＡＧＥ Ｓ ＴＥＰ；
—
ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ３ ． Ｙ 一 ＝Ｓ Ｔ ＡＧＥ Ｓ ＴＥＰ；
＿
ｉ ｆ （ ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｙ ＜ 一 ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｇ ｅ ｔ Ｈ ｅ ｉ ｇ ｈ ｔ ０）
码 良好 的Ｃ ａ ｎ ｖ ａ ｓ 应用 程序 无需 修 改即可 在兼 容ＨＴ ＭＬ ５ 的浏 览器 中运行 】 。
ｆ ｕ ｎ ｃ ｔ ｉ ｏ ｎ ｇ ａ ｍｅ Ｓ ｔ ａ ｒ ｔ ０｛
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ｄ ｉ ｅ （ ） ；
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ｒ ｅ ｍｏ ｖ ｅ Ａ ｌ ｌ Ｃ ｈ ｉ ｌ ｄ ０ ； ｝
— —Leabharlann 仿Ａｃ ｔ ｉ ｏ ｎ Ｓ ｃ ｒ ｉ ｐ ｔ ３ ． ０ 的 语 法 进 行 ＨＴ ＭＬ ５ 的开 发 ， 包 含 了
ＬＳ ｐ ｒ ｉ ｔ ｅ ，Ｌ Ｂｉ ｔ ｍａ ｐ Ｄａ ｔ ａ ，Ｌ Ｂｉ ｔ ｍａ ｐ 等 多个 ＡＳ 开 发人 员 熟悉 的类 ，支 持Ｇｏ ｏ ｇ ｌ ｅ Ｃ ｈ ｒ ｏ ｍｅ ，Ｆ ｉ ｒ ｅ ｆ ｏ ｘ ，Ｏｐ ｅ ｒ ａ ，Ｉ Ｅ ９ ，Ｉ ＯＳ ， Ａｎ ｄ ｒ ｏ ｉ ｄ 等 多种热 门环 境 ］ 。 ３ 利用 Ｈ Ｔ ＭＬ ５ 技 术来 设计 卷轴 类游戏
｝ ， ￣ ａ ｍｅ ｌ ｎ ｉ ｔ ） ； 当点击 游戏 画 面 的时候 ，首 先要 将背 景层 清 空 ，然后 添 加 背 景 图 片 。Ｌ Ｓ ｐ ｒ ｉ ｔ ｅ 的ｄ ｉ ｅ 函数 表 示移 除所 有 的 事件 监
听 ，ｒ ｅ ｍ ｏ ｖ ｅ Ａ ｌ ｌ Ｃ ｈ ｉ ｌ ｄ 函 数表 示 移除 所 有 子对 象 。主 要 代码
如下 ：
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ａ ｄ ｄ Ｅ ｖ ｅ ｎ ｔ Ｌ ｉ ｓ ｔ ｅ ｎ ｅ ｒ （ Ｌ Ｍｏ ｕ ｓ ｅ Ｅｖ ｅ ｎ ｔ ， Ｍ ＯＵ
Ｓ Ｅ ＵＲ ｇ ａ ｍｅ Ｓ ｔ ａ ｒ ｔ ） ；
＿
异，不过总的来说，Ｃ ａ ｎ ｖ ａ ｓ 的运行速度还是很快的。浏览 器 厂 商们在 遵循Ｈ Ｔ ＭＬ ５ 规 范方面 做得 都相 当好 ，所 以 ，编
２ ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ ￣发框 架 现 在 的游戏 开 发变 得越 来越 复杂 ，需要制 作 各种 炫丽 的效 果 ，还 要制 作 各 种基 于 ２ Ｄ或 者 ３ Ｄ的场 景 。为 了节 省 游 戏 开发 者 的时 间 ，让开 发 者集 中精 力在 游戏 的创 新 上 ， 出现 了许许 多 多的游 戏引擎 】 。
在 本 游 戏 制 作 中 ，可 以将 游 戏 层 次划 分 为 ： 进 度 条
显示 层 、背 景层 、人 物层 、障碍 层 。进 度条 显示 层用 来 显 示 图片读 取 时 的进度 ， 背景 层用 来显 示 不断 卷动 的 背景 图 片 ，人物 层 用来 显示 游戏 中的主 角 ，障碍 层 用来 显 示不 断 出现 的各种 地板 。 本 游 戏 利 用ＨＴ ＭＬ５ 的跨 平 台特 点 ，分 别给 游 戏 添加 键盘 事件 和触 屏 事件 ， 以使游 戏在 电脑 上和 智 能手机 上都 能运 行 。
ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ 是 一 个 ＨＴＭＬ５ 开源 引擎 ，它 实现 了 利用
３ ． ２ 显 示卷轴 背景 新 建 一 个 Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 类 ，在 其 构 造 器 内 建 立 ３ 个
ＬＢ ｉ ｔ ｍａ ｐ 对 象 ，并 依 次 显示 。因 为背 景 图片 是 可 以无 缝衔 接 的，所 以显示 到画面 上就 好像 一张 图片一 样 。 Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 类 的ｒ ｕ ｎ 函数 是 将Ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 对 象 中 的３ 个 子 图片 向上 移动 一 个Ｓ Ｔ ＡＧＥ Ｓ Ｔ Ｅ Ｐ 步长 ，这 个 步长会 在 定 义部 分 提 前定 义 好 相应 的 值 ，待 第一 个 Ｌ Ｂ ｉ ｔ ｍａ ｐ 对 象 移 出 屏幕 后 ，就会 把 第 二个ＬＢ ｉ ｔ ｍａ ｐ 对 象 的 坐标 赋 值给 第 一个 Ｌ Ｂｉ ｔ ｍａ ｐ 对象 ，然 后再 重新 计算 其他 两个 Ｌ Ｂｉ ｔ ｍａ ｐ 对象 的坐
基 于Ｈ Ｔ ＭＬ ５ 技术 的Ｗｅ ｂ 游 戏设计
郑逸 凡 ， 福 州 外 语 外 贸 学 院
摘 要 ：Ｈ Ｔ Ｍ Ｌ ５ 技 术的兴起有 多方 面的原 因，其中比较重要 的一点就是 ，越来越 多的开发者选择以 网页的形式来制作应
用软件与游戏。本文通过设计一款卷轴类游戏，介绍 了如何利用ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ ￣戏 引擎来开发基 于Ｈ Ｔ Ｍ Ｌ ５ 的ｗ ｅ ｂ 游戏。
１ Ｈ Ｔ ＭＬ ５ 技 术特 点
ｌ ｏ ａ ｄ ｉ ｎ ｇ Ｌ ａ ｙ ｅ ｒ ． ｓ ｅ ｔ Ｐ ｒ ｏ ｇ ｒ ｅ ｓ ｓ （ ｐ ｒ ｏ ｇ ｒ ｅ ｓ ｓ ） ；
Ｈ 茎
素 ，其 中包 括 与Ｗｅ ｂ 游 戏 设计 紧 密 相关 的Ｃａ ｎ ｖ ａ ｓ 元素 …。 从 文字 处理 到 电子游 戏 ，它们 所 需 的全部 图形功 能 ， Ｃａ ｎ ｖ ａ ｓ 元素 都会 提 供 。尽管 它在 各 个平 台中 的性 能有 所差
标 。相 关代 码如 下 ：
Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ ． ｐ ｒ ｏ ｔ ｏ ｔ ｙ ｐ ｅ ． ｕｎ ｒ ＝ ｆ ｕ ｎ ｃ ｔ ｉ ｏ ｎ （ ） ｆ
ｖ ａ ｒ ｓ ｅ ｌ ｆ ＝ ｔ ｈ ｉ ｓ ； ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｙ － ＝Ｓ Ｔ ＡＧＥ Ｓ Ｔ ＥＰ；
３ ． １游戏 初始 化
｛
ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ ２ ． Ｙ 一 ＝ Ｓ ＴＡＧＥ Ｓ ＴＥＰ；
—
ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ３ ． Ｙ 一 ＝Ｓ Ｔ ＡＧＥ Ｓ ＴＥＰ；
＿
ｉ ｆ （ ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｙ ＜ 一 ｓ ｅ ｌ ｆ ． ｂ ｉ ｔ ｍａ ｐ １ ． ｇ ｅ ｔ Ｈ ｅ ｉ ｇ ｈ ｔ ０）
码 良好 的Ｃ ａ ｎ ｖ ａ ｓ 应用 程序 无需 修 改即可 在兼 容ＨＴ ＭＬ ５ 的浏 览器 中运行 】 。
ｆ ｕ ｎ ｃ ｔ ｉ ｏ ｎ ｇ ａ ｍｅ Ｓ ｔ ａ ｒ ｔ ０｛
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ｄ ｉ ｅ （ ） ；
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ｒ ｅ ｍｏ ｖ ｅ Ａ ｌ ｌ Ｃ ｈ ｉ ｌ ｄ ０ ； ｝
— —Leabharlann 仿Ａｃ ｔ ｉ ｏ ｎ Ｓ ｃ ｒ ｉ ｐ ｔ ３ ． ０ 的 语 法 进 行 ＨＴ ＭＬ ５ 的开 发 ， 包 含 了
ＬＳ ｐ ｒ ｉ ｔ ｅ ，Ｌ Ｂｉ ｔ ｍａ ｐ Ｄａ ｔ ａ ，Ｌ Ｂｉ ｔ ｍａ ｐ 等 多个 ＡＳ 开 发人 员 熟悉 的类 ，支 持Ｇｏ ｏ ｇ ｌ ｅ Ｃ ｈ ｒ ｏ ｍｅ ，Ｆ ｉ ｒ ｅ ｆ ｏ ｘ ，Ｏｐ ｅ ｒ ａ ，Ｉ Ｅ ９ ，Ｉ ＯＳ ， Ａｎ ｄ ｒ ｏ ｉ ｄ 等 多种热 门环 境 ］ 。 ３ 利用 Ｈ Ｔ ＭＬ ５ 技 术来 设计 卷轴 类游戏
｝ ， ￣ ａ ｍｅ ｌ ｎ ｉ ｔ ） ； 当点击 游戏 画 面 的时候 ，首 先要 将背 景层 清 空 ，然后 添 加 背 景 图 片 。Ｌ Ｓ ｐ ｒ ｉ ｔ ｅ 的ｄ ｉ ｅ 函数 表 示移 除所 有 的 事件 监
听 ，ｒ ｅ ｍ ｏ ｖ ｅ Ａ ｌ ｌ Ｃ ｈ ｉ ｌ ｄ 函 数表 示 移除 所 有 子对 象 。主 要 代码
如下 ：
ｂ ａ ｃ ｋ Ｌ ａ ｙ ｅ ｒ ． ａ ｄ ｄ Ｅ ｖ ｅ ｎ ｔ Ｌ ｉ ｓ ｔ ｅ ｎ ｅ ｒ （ Ｌ Ｍｏ ｕ ｓ ｅ Ｅｖ ｅ ｎ ｔ ， Ｍ ＯＵ
Ｓ Ｅ ＵＲ ｇ ａ ｍｅ Ｓ ｔ ａ ｒ ｔ ） ；
＿
异，不过总的来说，Ｃ ａ ｎ ｖ ａ ｓ 的运行速度还是很快的。浏览 器 厂 商们在 遵循Ｈ Ｔ ＭＬ ５ 规 范方面 做得 都相 当好 ，所 以 ，编
２ ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ ￣发框 架 现 在 的游戏 开 发变 得越 来越 复杂 ，需要制 作 各种 炫丽 的效 果 ，还 要制 作 各 种基 于 ２ Ｄ或 者 ３ Ｄ的场 景 。为 了节 省 游 戏 开发 者 的时 间 ，让开 发 者集 中精 力在 游戏 的创 新 上 ， 出现 了许许 多 多的游 戏引擎 】 。
在 本 游 戏 制 作 中 ，可 以将 游 戏 层 次划 分 为 ： 进 度 条
显示 层 、背 景层 、人 物层 、障碍 层 。进 度条 显示 层用 来 显 示 图片读 取 时 的进度 ， 背景 层用 来显 示 不断 卷动 的 背景 图 片 ，人物 层 用来 显示 游戏 中的主 角 ，障碍 层 用来 显 示不 断 出现 的各种 地板 。 本 游 戏 利 用ＨＴ ＭＬ５ 的跨 平 台特 点 ，分 别给 游 戏 添加 键盘 事件 和触 屏 事件 ， 以使游 戏在 电脑 上和 智 能手机 上都 能运 行 。
ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ 是 一 个 ＨＴＭＬ５ 开源 引擎 ，它 实现 了 利用
３ ． ２ 显 示卷轴 背景 新 建 一 个 Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 类 ，在 其 构 造 器 内 建 立 ３ 个
ＬＢ ｉ ｔ ｍａ ｐ 对 象 ，并 依 次 显示 。因 为背 景 图片 是 可 以无 缝衔 接 的，所 以显示 到画面 上就 好像 一张 图片一 样 。 Ｂａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 类 的ｒ ｕ ｎ 函数 是 将Ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ 对 象 中 的３ 个 子 图片 向上 移动 一 个Ｓ Ｔ ＡＧＥ Ｓ Ｔ Ｅ Ｐ 步长 ，这 个 步长会 在 定 义部 分 提 前定 义 好 相应 的 值 ，待 第一 个 Ｌ Ｂ ｉ ｔ ｍａ ｐ 对 象 移 出 屏幕 后 ，就会 把 第 二个ＬＢ ｉ ｔ ｍａ ｐ 对 象 的 坐标 赋 值给 第 一个 Ｌ Ｂｉ ｔ ｍａ ｐ 对象 ，然 后再 重新 计算 其他 两个 Ｌ Ｂｉ ｔ ｍａ ｐ 对象 的坐
基 于Ｈ Ｔ ＭＬ ５ 技术 的Ｗｅ ｂ 游 戏设计
郑逸 凡 ， 福 州 外 语 外 贸 学 院
摘 要 ：Ｈ Ｔ Ｍ Ｌ ５ 技 术的兴起有 多方 面的原 因，其中比较重要 的一点就是 ，越来越 多的开发者选择以 网页的形式来制作应
用软件与游戏。本文通过设计一款卷轴类游戏，介绍 了如何利用ｌ ｕ ｆ ｙ ｌ ｅ ｇ ｅ ｎ ｄ ￣戏 引擎来开发基 于Ｈ Ｔ Ｍ Ｌ ５ 的ｗ ｅ ｂ 游戏。