当前位置：文江博客话题详情

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

发布于 2024-12-22 14:10:07 字数 411 浏览 2 评论 0原文

我们大多数人都知道，Firefox、Safari 和 Chrome 的速度惊人的 Javascript 引擎对 HTML5 Canvas 元素提供了更好的支持。

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

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

在 Javascript 游戏中设置起始屏幕等的好方法是什么？任何帮助都会有用，谢谢！

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风和你 2024-12-29 14:10:07

使用您的初始屏幕填充 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>

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.

Here is some sample code using 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>

回复收藏 0 原文

朦胧时间 2024-12-29 14:10:07

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

回复收藏 0 原文

御弟哥哥 2024-12-29 14:10:07

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>

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>

回复收藏 0 原文

~没有更多了~