<p>Saya sedang cuba mengekod permainan Ular saya sendiri dan ingin tajuk dan imej permainan sebenar berada di tengah-tengah tapak. Selepas saya cuba memasukkan butang untuk memulakan semula permainan, semuanya rosak. Walaupun saya cuba membuat asal semua perubahan, saya nampaknya tidak dapat membawa teks ke tengah. Selain itu, <code>gameOverMessage</code> 1) tidak disembunyikan sama sekali dan 2) tidak menggunakan sebarang perubahan gaya yang saya gunakan dalam JavaScript. Saya seorang pemula yang lengkap jadi sebarang nasihat akan sangat dihargai dan dihargai! </p> <p>Berikut ialah skrip CSS saya menggunakan semua elemen yang berkaitan: </p> <pre class="brush:css;toolbar:false;">#snakeboard { kedudukan: relatif; atas: 50%; kiri: 500px; mengubah: terjemah(-50%, -50%); indeks-z: -1; } #gameOverMessage { indeks-z: 1; text-align: tengah; kedudukan: relatif; saiz fon: 150px; color:rgb(235, 28, 28); font-weight: tebal; } .tersembunyi { paparan: tiada; } </pra> <p>Untuk masalah yang saya hadapi dengan mesej game over, saya memasukkan class = "hidden" dan kemudian mengalih keluar teg ini selepas fungsi <code>has_game_ended</code> Namun atas sebab tertentu ini tidak didaftarkan. </p> <pre class="brush:html;toolbar:false;"><h1 class="h1">Permainan Ular Saya</h1> <p class="p1">Skor:</p> <div id="skor"></div> <canvas id="snakeboard" width="400" height="400"></canvas> <div id="gameOverMessage" class="hidden"> permainan tamat! </div> </pra> <p>Padamkan kelas "tersembunyi"</p> <pre class="brush:js;toolbar:false;">function main() { menukar_arah = palsu; clear_board(); drawFood(); drawSnake(); move_snake(); jika (!telah_permainan_berakhir()) { setTimeout(utama, 200); } lain { const gameOverMessage = document.getElementById("gameOverMessage"); gameOverMessage.classList.remove("tersembunyi"); } } </pra> <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>