HTML プログラム内のテキストを水平かつ中央に表示できないのはなぜですか?

Question

現在、独自の 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 関数がアクティブになった後にこのタグを削除しました。しかし、何らかの理由でこれは登録されませんでした。

<h1 class="h1">私のスネーク ゲーム</h1>
<p class="p1">スコア:</p>
<div id="スコア"></div>
<canvas id="スネークボード" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
    ゲームオーバー！
</div>

「非表示」クラスを削除

function main() {
    方向変更 = false;
    クリアボード();
    ドローフード();
    ドロースネーク();
    move_snake();

    if (!has_game_ended()) {
        setTimeout(main, 200);
    } それ以外 {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("hidden");
    }
}

Answer 1

これがあなたのコードです。私が見る限り、完全に機能しているようです。ここで行ったのは、hidden クラスを切り替えるボタンを追加したことだけです。

リーリー リーリー リーリー