HTML 프로그램의 텍스트를 가로 및 중앙에 표시할 수 없는 이유는 무엇입니까?

Question

저는 현재 나만의 Snake 게임을 코딩하려고 하는데 제목과 실제 ​​게임 이미지가 사이트 중앙에 오도록 하고 싶습니다. 게임을 다시 시작하기 위해 버튼을 삽입하려고 시도한 후 모든 것이 중단되었습니다. 모든 변경 사항을 취소하려고 해도 텍스트를 중앙으로 가져갈 수 없는 것 같습니다. 또한 gameOverMessage 1) 전혀 숨겨지지 않으며 2) JavaScript에서 적용한 스타일 변경 사항을 적용하지 않습니다. 저는 완전 초보자이므로 어떤 조언이라도 매우 감사하고 소중하게 생각합니다!

모든 관련 요소를 사용하는 CSS 스크립트는 다음과 같습니다.

#snakeboard {
    위치: 상대;
    최고: 50%;
    왼쪽: 500px;
    변환: 변환(-50%, -50%);
    Z-색인: -1;
}

#gameOver메시지 {
    Z-색인: 1;
    텍스트 정렬: 중앙;
    위치: 상대;
    글꼴 크기: 150px;
    색상: rgb(235, 28, 28);
    글꼴 두께: 굵게;
}

.숨겨진 {
    디스플레이: 없음;
}

게임 오버 메시지에 발생한 문제의 경우, class = "hidden"을 삽입한 다음 has_game_ended 기능이 활성화된 후 이 태그를 제거했습니다. 그러나 어떤 이유로 등록되지 않았습니다.

<h1 class="h1">나의 스네이크 게임</h1>
<p class="p1">점수:</p>
<div id="score"></div>
<canvas id="snakeboard" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
    게임 끝!
</div>

'숨겨진' 클래스 삭제

function main() {
    변경 방향 = 거짓;
    클리어_보드();
    drawFood();
    drawSnake();
    move_snake();

    if (!has_game_ended()) {
        setTimeout(메인, 200);
    } 또 다른 {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("hidden");
    }
}

Answer 1

이것은 귀하의 코드입니다. 제가 볼 때 완전히 작동하는 것 같습니다. 여기서 내가 한 일은 hidden 클래스를 전환하는 버튼을 추가하는 것뿐이었습니다.

으아악 으아악 으아악