【１４】アリクイあくしょんコード解説　676行目〜

// タッチデバイスのときだけタッチ操作用ボタン表示
function updateTouchControlsVisibility() {
  const controls1 = document.getElementById("touch-controls");  //CSSで設定したID名(方向ボタン)
  const controls2 = document.getElementById("touch-controls-2");  //CSSで設定したID名(ジャンプ・攻撃ボタン)
    // タッチデバイスであれば
  if (isTouchDevice()) {
    if (controls1) controls1.style.display = "flex";  // controls1 が存在すれば表示（flexで表示）
    if (controls2) controls2.style.display = "flex";
  } else {
    if (controls1) controls1.style.display = "none";  // タッチデバイスでなければ非表示
    if (controls2) controls2.style.display = "none";
  }
}
// HTMLの読み込みが終わったタイミングで updateTouchControlsVisibility 関数を実行
window.addEventListener("DOMContentLoaded", updateTouchControlsVisibility);
// ウィンドウのサイズが変わったときも実行（画面回転などに対応）
window.addEventListener("resize", updateTouchControlsVisibility);

DOMContentLoaded イベント

HTMLの構造（DOM）が全部読み込まれたタイミングで発生。
CSS や画像の読み込みが終わってなくてもいい。

😟 CSSの読み込みがまだでも平気？

通常は同時並行で問題ない。遅い場合はHTMLが画面上に描画されたあとに適用される。

resize イベント

ブラウザのウィンドウ（画面サイズ）が変わったときに発生するイベント。