html - 如何用 HTML5 实现不同的屏幕

Question

我曾使用 HTML5 创建一个单屏小游戏。这次我尝试制作一个具有多个屏幕的屏幕，例如菜单、游戏、结果屏幕。我不确定如何实现这一点。

游戏是一个测验，根据问题，一些测验屏幕可能必须显示文本、音频或视频（非硬编码，它们来自数据库）。出于这个原因，我担心稳定性。如何在 HTML5 中实现这些屏幕，以及如何以使我的游戏稳定的方式来实现？

我已经包含了一个屏幕流程图，以了解我正在实施哪些屏幕。

Answer 1

对于我的游戏，我使用“状态”系统。将每个屏幕视为一个状态：

• 状态“加载”
• 国家“学生茂”
• 状态“注册”
• 状态“查看您的测验”
• 状态“尝试”
• state "answer" 这只是一个枚举。

实际上，一个状态不仅是一个屏幕，还可以是多个屏幕（例如“玩游戏”状态，它包含“点击播放”子状态、“正在玩”子状态和“你输/赢”子状态。

每个状态都是一个类，有它的属性、方法、精灵……每个状态都封装了“setImage”、“render”、“processKeyboard”……方法。

应用程序的主类处理所有事件（键盘、鼠标、显示器、精灵表加载）并将它们分派到当前状态。如果要改变当前状态，调用主类的“setCurrentState”。

好吧，主类是应用程序的中心点，每个状态都只是一个插件。这样很容易添加新状态。

要获得完美的模板，您还需要一个工作流引擎，但这更适合大型游戏……您的应用程序中可能不需要这么大的功能。

对于帆布来说，它是完美的。加载状态是默认状态。它在主类加载 spritesheets 图像时呈现“加载”文本。当所有图像都加载完毕后，主类切换到“主页”状态。“主页”状态有自己的方法、按钮、...

您可以查看使用 cgSceneGraph 的示例（但无论有无框架，每个开发的设计都应该相同）： http: //gwennaelbuchet.github.com/cgSceneGraph/examples/05_Game_CatchTheFlowers/js/class.main。 js （链接到此处的示例，选择“游戏：全部抓住”）。可以在 GitHub 上找到模板peoject的代码（用于上一个游戏）：https ://github.com/GwennaelBuchet/cgSceneGraph/tree/master/examples/TEMPLATE_GAME

随时询问有关实施的更多细节；我很乐意提供帮助:)