Warum kann Text in HTML-Programmen nicht horizontal und zentriert angezeigt werden?

Question

Ich versuche gerade, mein eigenes Snake-Spiel zu programmieren und möchte, dass der Titel und das eigentliche Spielbild in der Mitte der Website stehen. Nachdem ich versucht hatte, den Knopf zum Neustarten des Spiels einzuführen, brach alles zusammen. Selbst wenn ich versuche, alle Änderungen rückgängig zu machen, schaffe ich es scheinbar nicht, den Text zu zentrieren. Darüber hinaus wird gameOverMessage 1) überhaupt nicht ausgeblendet und 2) wendet keine Stiländerungen an, die ich in JavaScript anwende. Da ich ein absoluter Anfänger bin, wäre ich für jeden Rat sehr dankbar!

Hier ist mein CSS-Skript mit allen relevanten Elementen:

#snakeboard {
    Position: relativ;
    oben: 50 %;
    links: 500px;
    transform: Translate(-50%, -50%);
    Z-Index: -1;
}

#gameOverMessage {
    Z-Index: 1;
    Textausrichtung: Mitte;
    Position: relativ;
    Schriftgröße: 150px;
    Farbe: RGB (235, 28, 28);
    Schriftdicke: fett;
}

.versteckt {
    Anzeige: keine;
}

Für das Problem, das ich mit der Game Over-Meldung hatte, habe ich class = „hidden“ eingefügt und dann dieses Tag entfernt, nachdem die Funktion has_game_ended aktiviert wurde. Aus irgendeinem Grund wurde dies jedoch nicht registriert.

<h1 class="h1">Mein Schlangenspiel</h1>
<p class="p1">Ergebnis:</p>
<div id="score"></div>
<canvas id="snakeboard" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
    Spiel vorbei!
</div>

„versteckte“ Klasse löschen

function main() {
    Changing_direction = false;
    clear_board();
    drawFood();
    drawSnake();
    move_snake();

    if (!has_game_ended()) {
        setTimeout(main, 200);
    } anders {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("hidden");
    }
}

Answer 1

这是你的代码，从我所看到的来看，它似乎完全正常工作。我在这里所做的只是添加了一个按钮来切换hidden类。

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>