<p>我目前正在嘗試編寫自己的貪吃蛇遊戲，並希望標題和實際遊戲圖像位於網站的中心。在我嘗試插入重新開始遊戲的按鈕後，一切都出現了故障。即使我試圖撤消所有的更改，我似乎無法讓文字居中。此外，<code>gameOverMessage</code> 1)完全沒有被隱藏，2)沒有套用我在JavaScript中套用的任何樣式變更。我是一個完全初學者，所以任何建議都將非常感激和珍惜！ </p> <p>這是我使用所有相關元素進行的CSS腳本：</p> <pre class="brush:css;toolbar:false;">#snakeboard { position: relative; top: 50%; left: 500px; transform: translate(-50%, -50%); z-index: -1; } #gameOverMessage { z-index: 1; text-align: center; position: relative; font-size: 150px; color:rgb(235, 28, 28); font-weight: bold; } .hidden { display: none; } </pre> <p>對於我遇到的遊戲結束訊息的問題，我插入了class = "hidden"，然後在<code>has_game_ended</code>函數被啟動後刪除了此標記。然而由於某種原因，這並沒有被註冊。 </p> <pre class="brush:html;toolbar:false;"><h1 class="h1">我的貪吃蛇遊戲</h1> <p class="p1">分數:</p> <div id="score"></div> <canvas id="snakeboard" width="400" height="400"></canvas> <div id="gameOverMessage" class="hidden"> 遊戲結束！ </div> </pre> <p>刪除"hidden"類別</p> <pre class="brush:js;toolbar:false;">function main() { changing_direction = false; clear_board(); drawFood(); drawSnake(); move_snake(); if (!has_game_ended()) { setTimeout(main, 200); } else { const gameOverMessage = document.getElementById("gameOverMessage"); gameOverMessage.classList.remove("hidden"); } } </pre> <p><br /></p>

function toggleHiddenClass(){
  document.querySelector('#gameOverMessage').classList.toggle('hidden');
}

#gameOverMessage {
    z-index: 1;
    text-align: center; 
    position: relative;
    font-size: 150px; 
    color:rgb(235, 28, 28);
    font-weight: bold;
}

.hidden {
    display: none;
}

<button type="button" onclick="toggleHiddenClass()">toggle hidden class</button>

<div id="gameOverMessage" class="hidden">
    Game Over!
</div>