HTML 프로그램의 텍스트를 가로 및 중앙에 표시할 수 없는 이유는 무엇입니까?
<p>저는 현재 나만의 Snake 게임을 코딩하려고 하는데 제목과 실제 게임 이미지가 사이트 중앙에 오도록 하고 싶습니다. 게임을 다시 시작하기 위해 버튼을 삽입하려고 시도한 후 모든 것이 중단되었습니다. 모든 변경 사항을 취소하려고 해도 텍스트를 중앙으로 가져갈 수 없는 것 같습니다. 또한 <code>gameOverMessage</code> 1) 전혀 숨겨지지 않으며 2) JavaScript에서 적용한 스타일 변경 사항을 적용하지 않습니다. 저는 완전 초보자이므로 어떤 조언이라도 매우 감사하고 소중하게 생각합니다! </p>
<p>모든 관련 요소를 사용하는 CSS 스크립트는 다음과 같습니다. </p>
<pre class="brush:css;toolbar:false;">#snakeboard {
위치: 상대;
최고: 50%;
왼쪽: 500px;
변환: 변환(-50%, -50%);
Z-색인: -1;
}
#gameOver메시지 {
Z-색인: 1;
텍스트 정렬: 중앙;
위치: 상대;
글꼴 크기: 150px;
색상: rgb(235, 28, 28);
글꼴 두께: 굵게;
}
.숨겨진 {
디스플레이: 없음;
}
</pre>
<p>게임 오버 메시지에 발생한 문제의 경우, class = "hidden"을 삽입한 다음 <code>has_game_ended</code> 기능이 활성화된 후 이 태그를 제거했습니다. 그러나 어떤 이유로 등록되지 않았습니다. </p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p>'숨겨진' 클래스 삭제</p>
<pre class="brush:js;toolbar:false;">function main() {
변경 방향 = 거짓;
클리어_보드();
drawFood();
drawSnake();
move_snake();
if (!has_game_ended()) {
setTimeout(메인, 200);
} 또 다른 {
const gameOverMessage = document.getElementById("gameOverMessage");
gameOverMessage.classList.remove("hidden");
}
}
</pre>
<p><br /></p>
