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.

Mein Schlangenspiel

Ergebnis:

„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"); } }