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

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") {
    startOrRestart();
  }
});

// 画面クリック・タップ対応
canvas.addEventListener("click", startOrRestart);
canvas.addEventListener("touchstart", (e) => {
  e.preventDefault();
  startOrRestart();
});

// スペースキー or 画面クリック/タップでスタート＆リスタート
function startOrRestart() {
  if (!gameStarted) {
    gameStarted = true;
    gameOver = false;
    update();
  } else if (gameCleared || gameOver) {
    currentStage = 0;
    loadStage(currentStage);
    gameCleared = false;
    gameOver = false;
    gameStarted = true;
    update();
  }
}

ゲーム開始ボタン

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") {
    startOrRestart();
  }
});

clickイベント、touchstartイベント

click → クリック、またはタップで発動

touchstart → タップで発動

スマホやタブレットでの click は 少し遅れて（約300ms）発生します。
理由：ユーザーが「ダブルタップ」するかどうか待っているからです。

そのため…

瞬時に反応させたい → touchstart を使う方が快適

preventDefault（組み込み関数）

✅ 意味：ブラウザの「標準の動作」を止める

スマホやタブレットで指を使うと通常は

• スクロール
• ズーム
• ダブルタップ拡大
• テキスト選択 などが 自動で起こることがある。
• この e.preventDefault(); を入れることで、それらの標準動作をキャンセルして、
  自分のゲームが正しく動くようにする。

startOrRestart　を実装する

function startOrRestart() {
  if (!gameStarted) {
    gameStarted = true;
    gameOver = false;
    update();
  } else if (gameCleared || gameOver) {
    currentStage = 0;
    loadStage(currentStage);
    gameCleared = false;
    gameOver = false;
    gameStarted = true;
    update();
  }
}

if (!gameStarted) {
まずこれで、もしgameStartedがfalseなら中身を実行ってことがわかるね。

gameStarted = true;
gameOver = false;
update();

let gameStarted = false; // 108行目 gameStartedを定義

function mainLoop() { // 350行目 ゲーム開始画面のループ再生
  if (gameStarted) return; //もし、gameStartedがtrueなら中断
  drawStartScreen();
  requestAnimationFrame(mainLoop);
}
mainLoop();

function startOrRestart() { // 371行目　startOrRestartを定義
  if (!gameStarted) { // もし、gameStartedがfalseなら中身を実行
    gameStarted = true; // trueに変更
    gameOver = false;
    update();
  }...

  } else if (gameCleared || gameOver) {
    currentStage = 0;
    loadStage(currentStage);
    gameCleared = false;
    gameOver = false;
    gameStarted = true;
    update();
  }

gameCleared || gameOver

|| は、「または」を意味する論理演算子（OR）

どちらか一方でも真（true）なら実行。

// 109行目
let gameCleared = false;
let gameOver = false;

else if まとめ

  // gameStartedがtrueで、gameCleared か gameOver のどちらかがtrueなら実行
  else if (gameCleared || gameOver) {
    currentStage = 0;         // ステージを最初（0）に戻す
    loadStage(currentStage);  // ステージ0のデータを読み込む
    gameCleared = false;
    gameOver = false;
    gameStarted = true;
    update();
  }
}