javascript 为 HTML5 Canvas 游戏创建开始屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8619619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a start screen for a HTML5 Canvas Game?
提问by Dropped43
Most of us know that HTML5 Canvas element is having much better support with these amazingly fast Javascript Engines from Firefox, Safari and Chrome.
我们大多数人都知道 HTML5 Canvas 元素对来自 Firefox、Safari 和 Chrome 的这些速度惊人的 Javascript 引擎有更好的支持。
So recently I have been experimenting with game development with Javascript and the Canvas, and I am wondering what would be a good approach to be creating a Start Screen for a Javascript Game.
所以最近我一直在尝试使用 Javascript 和 Canvas 进行游戏开发，我想知道为 Javascript 游戏创建开始屏幕的好方法是什么。
So far, the only idea I have would be creating a UI before the game and stuff with Javascript and use Event Listeners to track the mouse and when they click buttons. But I'm not sure if this a wise thing to do.
到目前为止，我唯一的想法是在游戏开始前创建一个 UI 并使用 Javascript 和使用事件侦听器来跟踪鼠标和单击按钮的时间。但我不确定这是否明智。
What would a good way to go about a Starting Screen, etc. in a Javascript game? Any help would be useful, thanks!
在 Javascript 游戏中处理起始屏幕等的好方法是什么？任何帮助都会有用，谢谢！
UPDATE: Thanks for the blazing fast reply(s)! A lot of you are suggesting placing a img until the game loads, etc. So do I need to write a asset manager or some sort - to check when all the images etc. are loaded?
更新：感谢您的快速回复！你们中的很多人都建议在游戏加载之前放置一个 img 等等。那么我是否需要编写一个资产管理器或某种类型的 - 检查所有图像等何时加载？
采纳答案by Matt Cashatt
Populate a div tag with your splash screen. Have it showing on page load and have your canvas hidden. Add a 'start' button to the div tag and on it's click event, hide the splash screen div tag and show the canvas using either jQuery or classic JavaScript.
使用启动画面填充 div 标签。让它在页面加载时显示并隐藏你的画布。向 div 标签添加一个“开始”按钮，在它的点击事件上，隐藏启动屏幕 div 标签并使用 jQuery 或经典 JavaScript 显示画布。
Here is some sample code using jQuery:
下面是一些使用 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>
回答by ColinE
Simple, use a regular HTML imgthat is located 'above' your canvas until everything is loaded / initialised.
简单，使用img位于画布“上方”的常规 HTML ，直到加载/初始化所有内容。
