为HTML5 Canvas游戏创建一个开始屏幕？

Question

我们大多数人都知道HTML5 Canvas元素可以通过Firefox,Safari和Chrome这些惊人的快速Javascript引擎获得更好的支持.

所以最近我一直在尝试使用Javascript和Canvas进行游戏开发,我想知道为Javascript游戏创建一个开始屏幕的好方法.

到目前为止,我唯一的想法是在游戏之前创建一个UI,并使用Javascript和使用事件监听器来跟踪鼠标以及何时单击按钮.但我不确定这是否是明智之举.

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

更新:感谢您的快速回复!很多人建议在游戏加载之前放置一个img等.所以我需要写一个资产管理器或某种类型 - 检查所有图像等何时加载？

Answer 1

使用您的初始屏幕填充 div 标签。让它在页面加载时显示并隐藏画布。将“开始”按钮添加到 div 标签，并在其单击事件中，隐藏启动屏幕 div 标签并使用 jQuery 或经典 JavaScript 显示画布。

下面是一些使用 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>