レッスン24 リトライできるようにしよう | レーシングゲーム開発 | ゲーム開発で学ぶプログラミング

リトライできるようにしよう

ゲームのリトライができるようにしましょう。
ゲームオーバー画面でマウスクリックすると、ゲームを最初から開始できるようにしていきます。

マウスクリックを検知するためには、mousePressed 関数が使えるのでした。

mousePressed 関数の部分を、次のように変更してください。

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else if (gameState === "gameover") {
    gameState = "play";
  }
}

これで、ゲームオーバー画面のときにマウスクリックするとゲームが開始するようになります。
ゲームを起動して、確かめてみましょう。

どうでしたか？
ゲームは動いたけれど、何かおかしいですね。
どうやら、ゲームの続きから再開してしまっているようです。

現時点では、コースもスコアもそのままの状態で、ゲームが再開してしまいます。
そこで、リトライのときはコースとスコアを初期状態にリセットするようにしましょう。

まず、setup 関数を次のように変更してください。

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  resetGame();
}

function resetGame() {
  score = 0;
  createRoads();
}

新しくresetGame 関数を定義し、setup 関数から呼び出すようにしました。
そして元々 setup 関数から呼び出していた createRoads 関数を、 resetGame 関数から呼び出すようにしました。
さらに、score を0にリセットする処理も追加しました。

次に、mousePressed 関数の部分を、次のように変更してください。

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else if (gameState === "gameover") {
    resetGame();
    gameState = "play";
  }
}

リトライのときは、 resetGame 関数を実行するようにしました。

ここまでできたらゲームを起動してみましょう。
無事にリトライができるようになったと思います！

リトライ

いよいよ大詰めです。
最後に、プレイヤーとして画像を表示しましょう！

let gameState = "start";
let score = 0;
let roads = [];

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  resetGame();
}

function draw() {
  updateGame();
  drawGame();
}

function resetGame() {
  score = 0;
  createRoads();
}

function createRoads() {
  roads = [];
  for (let i = 0; i < 21; i++) {
    roads.push({
      x: 200,
      y: 20 * i,
    });
  }
}

function updateGame() {
  if (gameState === "start" || gameState === "gameover") {
    return;
  }
  updateRoads();
  detectGameover();
  score++;
}

function updateRoads() {
  for (let i = 0; i < roads.length; i++) {
    roads[i].y += 1;
    if (roads[i].y >= 410) {
      roads[i].x = 200 + 100 * sin(score * 0.01);
      roads[i].y = -10;
    }
  }
}

function detectGameover() {
  let gameover = true;
  for (let i = 0; i < roads.length; i++) {
    let distanceX = abs(mouseX - roads[i].x);
    let distanceY = abs(mouseY - roads[i].y);
    if (distanceX <= 75 && distanceY <= 10) {
      gameover = false;
    }
  }
  if (gameover) {
    gameState = "gameover";
  }
}

function drawGame() {
  background(0);
  drawRoads();
  drawPlayer();
  drawScore();
  if (gameState === "start") {
    drawStart();
  } else if (gameState === "gameover") {
    drawGameover();
  }
}

function drawRoads() {
  fill(255);
  for (let i = 0; i < roads.length; i++) {
    rect(roads[i].x, roads[i].y, 150, 20);
  }
}

function drawPlayer() {
  fill(255, 0, 0);
  rect(mouseX, mouseY, 30, 30);
}

function drawScore(){
  fill(255, 0, 0);
  textSize(15);
  text(score, 320, 30);
}

function drawStart() {
  fill(255, 0, 0);
  textSize(30);
  text("レーシングゲーム", 200, 200);
  textSize(15);
  text("タップしてスタート", 200, 250);
}

function drawGameover() {
  fill(255, 0, 0);
  textSize(30);
  text("ゲームオーバー", 200, 200);
  textSize(15);
  text("タップしてリスタート", 200, 250);
}

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  }else if (gameState === "gameover") {
    resetGame();
    gameState = "play";
  }
}