Question

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

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

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

在Javascript游戏中使用启动画面等有什么好办法？任何帮助都会有用，谢谢！

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

Answer 1

使用启动画面填充div标签。让它显示在页面加载并隐藏您的画布。在div标签及其click事件上添加一个“开始”按钮，隐藏启动画面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>

Answer 2

简单，使用位于画布“上方”的常规HTML img，直到加载/初始化所有内容。

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

2 个答案: