javascript - 为 HTML5 Canvas 游戏创建开始屏幕？

Question

我们大多数人都知道 HTML5 Canvas 元素得到了来自 Firefox、Safari 和 Chrome 的这些速度惊人的 Javascript 引擎的更好支持。

最近我一直在尝试使用 Javascript 和 Canvas 进行游戏开发，我想知道为 Javascript 游戏创建开始屏幕的好方法是什么。

到目前为止，我唯一的想法是在游戏开始之前创建一个 UI 并使用 Javascript 进行填充，并使用事件监听器来跟踪鼠标和鼠标单击按钮的时间。但我不确定这样做是否明智。

在 Javascript 游戏中处理启动屏幕等的好方法是什么？任何帮助都会有用，谢谢!

更新:感谢您的快速回复!你们中的很多人建议在游戏加载之前放置一个 img 等。那么我是否需要编写一个 Assets 管理器或某种类型的程序来检查所有图像等何时加载？

Answer 1

用启动画面填充一个 div 标签。让它在页面加载时显示并隐藏您的 Canvas 。将“开始”按钮添加到 div 标记，并在其点击事件上隐藏启动画面 div 标记并使用 jQuery 或经典 JavaScript 显示 Canvas 。

下面是一些使用 jQuery 的示例代码:

   <div id="SplashScreen">
<h1>Game Title</h1>
<input id="StartButton" type="button" value="Start"/>
</div>

<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas>

<script>
    $("#StartButton").click(function () {
        $("#SplashScreen").hide();
        $("#GameCanvas").show();
    });
</script>