为HTML5 Canvas游戏创建开始屏幕

Creating a start screen for a HTML5 Canvas Game?

本文关键字：开始 屏幕 创建 游戏 HTML5 Canvas      更新时间：2023-09-26

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

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

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

在Javascript游戏中如何设置开始屏幕?任何帮助将是有用的，谢谢!

更新:感谢您的快速回复!你们中的许多人建议在游戏加载前放置一个img，等等。所以我需要写一个资产管理器或某种类型-检查当所有的图像等加载?

在启动画面中填充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>

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

function startGame() {
    alert('Are you sure you want to make a new Game?');
}
function continueGame() {
    alert('Continue Game?');
}
body, button {
    color: blue;
    text-align: center;
    font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Game Title</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>Game Title</h1>
  <script src="script.js">startGame()</script>
  <button onclick="startGame()">New Game</button>
  <button onclick="continueGame()">Continue Game</button>
</body>
</html>

相关文章：