如何使用HTML5实现不同的屏幕

Question

我使用HTML5创建了一个带有单个屏幕的小游戏。这次我试图用多个屏幕制作一个，例如菜单，游戏，结果屏幕。我不知道如何实现这一点。

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

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

Answer 1

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

• 陈述“loading”
• 州“学生妈”
• 州“注册”
• 陈述“查看你的quizz”
• 陈述“企图”
• 状态“回答” 这只是一个枚举。

实际上，状态不仅是一个屏幕，而且可以是几个屏幕（比如“玩游戏”状态，包含“点击播放”子状态，“播放”子状态和“你松散” / win“substate。

每个州都是一个具有属性，方法，精灵......的类。 每个州封装“setImage”，“render”，“processKeyboard”，...... methods。

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

嗯，主类是应用程序的中心点，每个州都是一个插件。通过这种方式，可以轻松添加新状态。

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

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

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

随意询问有关实施的更多细节;我很乐意帮忙:)。