HTML プログラム内のテキストを水平かつ中央に表示できないのはなぜですか?
<p>現在、独自の Snake ゲームをコーディングしようとしていますが、タイトルと実際のゲーム画像をサイトの中央に配置したいと考えています。ゲームを再起動するためにボタンを挿入しようとした後、すべてが故障しました。すべての変更を元に戻そうとしても、テキストを中央に配置することができないようです。さらに、<code>gameOverMessage</code> 1) はまったく隠されておらず、2) JavaScript で適用したスタイルの変更は適用されません。私は完全な初心者なので、アドバイスをいただければ幸いです。 </p>
<p>関連するすべての要素を使用した CSS スクリプトは次のとおりです。</p>
<pre class="brush:css;toolbar:false;">#snakeboard {
位置: 相対的;
トップ: 50%;
左: 500ピクセル;
変換: 変換(-50%, -50%);
z インデックス: -1;
}
#ゲームオーバーメッセージ {
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="スコア"></div>
<canvas id="スネークボード" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
ゲームオーバー！
</div>
</pre>
<p>「非表示」クラスを削除</p>
<pre class="brush:js;toolbar:false;">function main() {
方向変更 = false;
クリアボード();
ドローフード();
ドロースネーク();
move_snake();
if (!has_game_ended()) {
setTimeout(main, 200);
} それ以外 {
const gameOverMessage = document.getElementById("gameOverMessage");
gameOverMessage.classList.remove("hidden");
}
}
</pre>
<p><br /></p>
