<p>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, <code>gameOverMessage</code> 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é ! </p> <p>Voici mon script CSS utilisant tous les éléments pertinents : </p> <pre class="brush:css;toolbar:false;">#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é> <p>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 <code>has_game_ended</code> Cependant, pour une raison quelconque, cela n'a pas été enregistré. </p> <pre class="brush:html;toolbar:false;"><h1 class="h1">Mon jeu de serpent</h1> <p class="p1">Note :</p> <div id="score"></div> <id de toile="snakeboard" width="400" height="400"></canvas> <div id="gameOverMessage" class="hidden"> jeu terminé! </div> ≪/pré> <p>Supprimer la classe "cachée"</p> <pre class="brush:js;toolbar:false;">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é> <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>