現在、独自の Snake ゲームをコーディングしようとしていますが、タイトルと実際のゲーム画像をサイトの中央に配置したいと考えています。ゲームを再起動するためにボタンを挿入しようとした後、すべてが故障しました。すべての変更を元に戻そうとしても、テキストを中央に配置することができないようです。さらに、gameOverMessage 1) はまったく隠されておらず、2) JavaScript で適用したスタイルの変更は適用されません。私は完全な初心者なので、アドバイスをいただければ幸いです。

関連するすべての要素を使用した CSS スクリプトは次のとおりです。

#snakeboard { 位置: 相対的; トップ: 50%; 左: 500ピクセル; 変換: 変換(-50%, -50%); z インデックス: -1; } #ゲームオーバーメッセージ { z インデックス: 1; テキスト整列: 中央; 位置: 相対的; フォントサイズ: 150px; 色:rgb(235, 28, 28); フォントの太さ: 太字; } 。隠れた { 表示: なし。 }

ゲームオーバーメッセージで発生した問題については、class = "hidden" を挿入し、has_game_ended 関数がアクティブになった後にこのタグを削除しました。しかし、何らかの理由でこれは登録されませんでした。

私のスネークゲーム

スコア:

「非表示」クラスを削除

function main() { 方向変更 = false; クリアボード(); ドローフード(); ドロースネーク(); move_snake(); if (!has_game_ended()) { setTimeout(main, 200); } それ以外 { const gameOverMessage = document.getElementById("gameOverMessage"); gameOverMessage.classList.remove("hidden"); } }