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

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

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

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

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

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else if (gameState === "gameover") {
    gameState = "play";
  } else {
    player.ay *= -1;
  }
}

else if 文を追加して、ゲームオーバーのときは変数 gameState を "play" に戻すようにしました。

ゲームを起動して、確かめてみましょう。

どうでしたか？
何かおかしいですね。またすぐゲームオーバー画面になってしまいます。
これは、ゲームの続きから再開してしまっていることが原因です。

そこで、リトライのときはゲームを初期状態にリセットするようにしましょう。

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

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  textAlign(CENTER, CENTER);
  skyImage = loadImage("sky.jpeg");
  airplaneUpImage = loadImage("airplaneUp.png");
  airplaneDownImage = loadImage("airplaneDown.png");
  blockImage = loadImage("block.jpeg");
  resetGame();
}

function resetGame() {
  player = { y: 100, vy: 0, ay: 0.05 };
  block = { x: 450, y: 200, w: 30, h: 30 };
}

新しくresetGame 関数を定義し、setup 関数から呼び出すようにしました。
そして元々 setup 関数で行っていたプレイヤーとブロックの変数に初期値を設定する処理を、 resetGame 関数で行うようにしました。

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

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else if (gameState === "gameover") {
    resetGame();
    gameState = "play";
  } else {
    player.ay *= -1;
  }
}

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

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

let gameState = "start";

let player;
let block;

let skyImage;
let airplaneUpImage;
let airplaneDownImage;
let blockImage;

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  textAlign(CENTER, CENTER);
  skyImage = loadImage("sky.jpeg");
  airplaneUpImage = loadImage("airplaneUp.png");
  airplaneDownImage = loadImage("airplaneDown.png");
  blockImage = loadImage("block.jpeg");
  resetGame();
}

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

function resetGame() {
  player = { y: 100, vy: 0, ay: 0.05 };
  block = { x: 450, y: 200, w: 30, h: 30 };
}

function updateGame() {
  if (gameState === "start" || gameState === "gameover") {
    return;
  }
  updatePlayer();
  updateBlock();
  detectGameover();
}

function updatePlayer() {
  player.vy += player.ay;
  player.y += player.vy;
}

function updateBlock() {
  block.x--;
  if (block.x < -block.w / 2) {
    block.x = 400 + block.w / 2;
    block.y = random(0, 400);
    block.h = random(30, 100);
  }
}

function detectGameover() {
  if (player.y < 0 || player.y > 400) {
    gameState = "gameover";
  }
  let distanceX = abs(100 - block.x);
  let distanceY = abs(player.y - block.y);
  if (distanceX <= 25 + block.w / 2 && distanceY <= 25 + block.h / 2) {
    gameState = "gameover";
  }
}

function drawGame() {
  image(skyImage, 200, 200, 400, 400);
  if (player.vy >= 0) {
    image(airplaneDownImage, 100, player.y, 50, 50);
  } else {
    image(airplaneUpImage, 100, player.y, 50, 50);
  }
  image(blockImage, block.x, block.y, block.w, block.h);
  if (gameState === "start") {
    drawStart();
  } else if (gameState === "gameover") {
    drawGameover();
  }
}

function drawStart() {
  fill(17, 113, 155);
  textSize(30);
  text("フライトゲーム", 200, 200);
  textSize(15);
  text("タップしてスタート", 200, 250);
}

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

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else if (gameState === "gameover") {
    resetGame();
    gameState = "play";
  } else {
    player.ay *= -1;
  }
}