首頁猿問如何添加游戲菜單

如何添加游戲菜單

JavaScript

繁花不似錦 2024-01-18 14:38:07

我正在嘗試添加帶有“開始”的通用游戲菜單來啟動游戲。我該怎么做呢？這是代碼：#hero { /* background: #ff0000; */ background-image: url("man-of-space.png"); width: 40px; height: 40px; position: absolute;}#background { background-image: url("space.png"); /* background: #000000; */ width: 500px; height: 500px; position: absolute; left: 0px; top: 0px;}.laser { background: #00ff00; width: 2px; height: 50px; position: absolute;}.enemy { background-image: url("spaceship.png"); background-size: 40px 40px; width: 40px; height: 40px; position: absolute;}#score { color: #ffffff; font-size: 18pt; position: absolute; left: 20px; top: 20px;}#gameover { color: #ff0000; font-size: 20px; position: absolute; left: 160px; top: 200px; visibility: hidden;}<div id="background"></div><div id="hero"></div><div class="laser" id="laser0"></div><div class="laser" id="laser1"></div><div class="laser" id="laser2"></div><div id="score"></div><div id="gameover">GAME OVER</div>

查看完整描述

2 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

您可以將游戲 UI 包裝在一個<div id="game" style="display: none;">元素中，以便在加載頁面時它將隱藏。然后將開始菜單包裝在一個<div id="startMenu">帶有 a 的元素中，該元素<button id="startButton">Start</button>將用于隱藏開始菜單并顯示游戲 UI。

在 JS 代碼中，您可以將游戲包裝在一個函數中，以便在您調用它時啟動它。

HTML：

<button id="startButton">Start</button>

</div>

</div>

JS：

function startGame() {

var LEFT_KEY = 37;

var UP_KEY = 38;

var RIGHT_KEY = 39;

var DOWN_KEY = 40;

var SPACE_KEY = 32;

var HERO_MOVEMENT = 3;

[...Your game code...]

loop();

}

document.getElementById('startButton').onclick = function() {

document.getElementById('startMenu').style.display = "none";

document.getElementById('game').style.display = "";

startGame();

};

<div id="startMenu">現在您有了一個可以根據需要自定義的開始菜單 ( )，以及<div id="game">僅在按下開始按鈕后才會顯示的游戲 UI ( )。

反對回復 2024-01-18

慕少森

TA貢獻2019條經驗獲得超9個贊

我的建議是添加更多 HTML。也許制作一個div包含您需要的所有開始屏幕元素的項目。當啟動函數發生時，將該 div 的 innerHTML 設置為"".

例子：

document.getElementById('yourDivIdHere').innerHTML = '';

反對回復 2024-01-18

2 回答
0 關注
183 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何添加游戲菜單

如何添加游戲菜單

2 回答

添加回答