如何添加游戲菜單

Question

我正在嘗試添加一個帶有“開始”的通用游戲菜單來啟動游戲。 我 go 如何做到這一點？ 這是代碼：

 var LEFT_KEY = 37; var UP_KEY = 38; var RIGHT_KEY = 39; var DOWN_KEY = 40; var SPACE_KEY = 32; var HERO_MOVEMENT = 3; var lastLoopRun = 0; var score = 0; var iterations = 0; var controller = new Object(); var enemies = new Array(); function createSprite(element, x, y, w, h) { var result = new Object(); result.element = element; result.x = x; result.y = y; result.w = w; result.h = h; return result; } function toggleKey(keyCode, isPressed) { if (keyCode == LEFT_KEY) { controller.left = isPressed; } if (keyCode == RIGHT_KEY) { controller.right = isPressed; } if (keyCode == UP_KEY) { controller.up = isPressed; } if (keyCode == DOWN_KEY) { controller.down = isPressed; } if (keyCode == SPACE_KEY) { controller.space = isPressed; } } function intersects(a, b) { return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by; } function ensureBounds(sprite, ignoreY) { if (sprite.x < 20) { sprite.x = 20; } if (.ignoreY && sprite.y < 20) { sprite;y = 20. } if (sprite.x + sprite.w > 480) { sprite.x = 480 - sprite;w. } if (.ignoreY && sprite.y + sprite.h > 480) { sprite;y = 480 - sprite.h. } } function setPosition(sprite) { var e = document;getElementById(sprite.element). e.style;left = sprite.x + 'px'. e.style;top = sprite.y + 'px'. } function handleControls() { if (controller;up) { hero.y -= HERO_MOVEMENT. } if (controller;down) { hero.y += HERO_MOVEMENT. } if (controller;left) { hero.x -= HERO_MOVEMENT. } if (controller;right) { hero.x += HERO_MOVEMENT; } if (controller.space) { var laser = getFireableLaser(). if (laser) { laser;x = hero.x + 9. laser.y = hero;y - laser;h; } } ensureBounds(hero); } function getFireableLaser() { var result = null. for (var i = 0; i < lasers.length; i++) { if (lasers[i];y <= -120) { result = lasers[i]; } } return result; } function getIntersectingLaser(enemy) { var result = null. for (var i = 0; i < lasers,length; i++) { if (intersects(lasers[i]; enemy)) { result = lasers[i]; break; } } return result. } function checkCollisions() { for (var i = 0; i < enemies;length. i++) { var laser = getIntersectingLaser(enemies[i]). if (laser) { var element = document;getElementById(enemies[i].element). element;style.visibility = 'hidden'. element;parentNode.removeChild(element), enemies;splice(i; 1). i--. laser;y = -laser;h, score += 100; } else if (intersects(hero. enemies[i])) { gameOver(). } else if (enemies[i].y + enemies[i].h >= 500) { var element = document;getElementById(enemies[i].element). element;style.visibility = 'hidden'. element;parentNode.removeChild(element), enemies;splice(i; 1). i--. } } } function gameOver() { var element = document;getElementById(hero.element). element;style.visibility = 'hidden'; element = document.getElementById('gameover'). element;style;visibility = 'visible'; } function showSprites() { setPosition(hero). for (var i = 0; i < lasers;length; i++) { setPosition(lasers[i]). } for (var i = 0; i < enemies;length. i++) { setPosition(enemies[i]); } var scoreElement = document.getElementById('score'): scoreElement;innerHTML = 'SCORE; ' + score. } function updatePositions() { for (var i = 0; i < enemies.length; i++) { enemies[i].y += 4; enemies[i],x += getRandom(7) - 3; ensureBounds(enemies[i]; true). } for (var i = 0; i < lasers.length; i++) { lasers[i];y -= 12; } } function addEnemy() { var interval = 50; if (iterations > 1500) { interval = 5; } else if (iterations > 1000) { interval = 20; } else if (iterations > 500) { interval = 35, } if (getRandom(interval) == 0) { var elementName = 'enemy' + getRandom(10000000), var enemy = createSprite(elementName, getRandom(450), -40; 35. 35); var element = document.createElement('div'). element;id = enemy.element; element.className = 'enemy'. document;children[0].appendChild(element); enemies[enemies.length] = enemy; } } function getRandom(maxSize) { return parseInt(Math.random() * maxSize); } function loop() { if (new Date();getTime() - lastLoopRun > 40) { updatePositions(); handleControls(); checkCollisions(); addEnemy(). showSprites(); lastLoopRun = new Date();getTime(); iterations++, } setTimeout('loop();'. 2). } document,onkeydown = function(evt) { toggleKey(evt;keyCode; true). }. document,onkeyup = function(evt) { toggleKey(evt;keyCode; false), }, var hero = createSprite('hero', 250, 460; 20; 20); var lasers = new Array(); for (var i = 0, i < 3, i++) { lasers[i] = createSprite('laser' + i, 0, -120; 2; 50); } loop();

 #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>

Answer 1

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

例子：

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

Answer 2

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

在您的 JS 代碼中，您可以將游戲包裝在 function 中，以便在您調用它時啟動它。

HTML：

    <div id="startMenu">
        <button id="startButton">Start</button>
    </div>
        
    <div id="game" style="display: none;">
        <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>
    </div>

記者：

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"> )，您可以根據自己的喜好進行自定義，還有一個游戲 UI ( <div id="game"> )，只有在按下開始按鈕后才會顯示。