Pourquoi le texte des programmes HTML ne peut-il pas être affiché horizontalement et centré ?

Question

J'essaie actuellement de coder mon propre jeu Snake et j'aimerais que le titre et l'image du jeu soient au centre du site. Après avoir essayé d'insérer le bouton pour redémarrer le jeu, tout est tombé en panne. Même si j'essaie d'annuler toutes les modifications, je n'arrive pas à centrer le texte. De plus, gameOverMessage 1) n'est pas du tout masqué et 2) n'applique aucun changement de style que j'applique en JavaScript. Je suis un débutant complet donc tout conseil serait grandement apprécié et valorisé !

Voici mon script CSS utilisant tous les éléments pertinents :

#snakeboard {
    position : relative ;
    haut : 50 % ;
    gauche : 500 px ;
    transformer : traduire (-50 %, -50 %);
    indice z : -1 ;
}

#gameOverMessage {
    indice z : 1 ;
    alignement du texte : centre ;
    position : relative ;
    taille de police : 150 px ;
    couleur : RVB (235, 28, 28) ;
    poids de la police : gras ;
}

.caché {
    affichage : aucun ;
}
≪/pré>
Pour le problème que j'ai eu avec le message de fin de jeu, j'ai inséré class = "hidden", puis j'ai supprimé cette balise après l'activation de la fonction has_game_ended Cependant, pour une raison quelconque, cela n'a pas été enregistré. 
Mon jeu de serpent
Note :



    jeu terminé!

≪/pré>
Supprimer la classe "cachée"
function main() {
    changement_direction = faux ;
    clear_board();
    drawFood();
    dessinerSnake();
    move_snake();

    si (!has_game_ended()) {
        setTimeout(principal, 200);
    } autre {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("caché");
    }
}
≪/pré>

Answer 1

Voici votre code, d'après ce que je peux voir, il semble fonctionner complètement. Tout ce que j'ai fait ici, c'est d'ajouter un bouton pour basculer la classe 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>