ポイントが増える＆ゲームオーバーまで

アフィリエイトリンクが含まれてます

前回は、プレイヤーを動かす・アイテムが落ちてくるまでをやったね。

キャッチゲームの基本の動き

✅ 今後の流れ

当たり判定を実装（アイテムがプレイヤーに触れたか判定）
ポイントの増減を実装（良いアイテム→+1点、悪いアイテム→-1点）
爆弾の実装（爆弾に当たるとライフ-1、ライフが0ならゲームオーバー）

まずは 当たり判定 & ポイント処理 からやってみよう！💪

let playerX = 200;  // プレイヤーのX座標
let playerY = 350;  // プレイヤーのY座標
let playerWidth = 50;  // プレイヤーの幅
let playerHeight = 50;  // プレイヤーの高さ
let playerSpeed = 5;  // プレイヤーの移動スピード

let items = [];  // アイテムの配列
let itemSize = 30;  // アイテムの大きさ
let score = 0;  // 得点
let life = 3;  // ライフ
let itemSpeed = 3;  // アイテムの落下スピード

function setup() {
  createCanvas(400, 400);  // キャンバス作成
}

function draw() {
  background(220);  // 背景色を塗りつぶし

  // プレイヤーを描画
  rect(playerX, playerY, playerWidth, playerHeight);

  // アイテムを描画
  for (let i = items.length - 1; i >= 0; i--) {
    let item = items[i];
    item.y += itemSpeed;  // アイテムのY座標を下に動かす

    // アイテムの色を変更
    if (item.points > 0) {
      fill(0, 255, 0);  // 良いアイテム（緑）
    } else {
      fill(255, 0, 0);  // 爆弾（赤）
    }

    // アイテムを描画
    ellipse(item.x, item.y, itemSize, itemSize);

    // アイテムとプレイヤーの当たり判定
    if (dist(playerX + playerWidth / 2, playerY + playerHeight / 2, item.x, item.y) < (playerWidth / 2 + itemSize / 2)) {
      if (item.points > 0) {
        score += item.points;  // 良いアイテムは得点加算
      } else {
        life--;  // 爆弾に当たったらライフが減少
      }
      items.splice(i, 1);  // アイテムを削除
    }

    // アイテムが画面外に出たら削除
    if (item.y > height) {
      items.splice(i, 1);
    }
  }

  // 得点とライフの表示
  textSize(20);
  fill(0);
  text("Score: " + score, 10, 30);
  text("Life: " + life, 10, 60);

  // プレイヤーの移動
  if (keyIsDown(LEFT_ARROW) && playerX > 0) {
    playerX -= playerSpeed;
  }
  if (keyIsDown(RIGHT_ARROW) && playerX < width - playerWidth) {
    playerX += playerSpeed;
  }
}

// アイテムをランダムに生成
function createItem() {
  let x = random(width);
  let y = -itemSize;  // 画面の上に出現
  let points = random() > 0.5 ? 1 : -1;  // 1か-1のランダムなポイント（良いアイテムか爆弾か）
  items.push({ x: x, y: y, points: points });  // アイテムを配列に追加
}

// 定期的にアイテムを生成
setInterval(createItem, 1000);  // 1秒ごとにアイテム生成

コピペして再生ボタンを押してみて！👍

広　告

赤いアイテムに当たったらライフが減るよ！😱

このままだと、ライフが「マイナス」でもゲームが続けられるので、ライフが「０」になったら

「GAME OVER」が表示されてゲームが終わりの設定をやってみよう！💪

let playerX = 200;  // プレイヤーのX座標
let playerY = 350;  // プレイヤーのY座標
let playerWidth = 50;  // プレイヤーの幅
let playerHeight = 50;  // プレイヤーの高さ
let playerSpeed = 5;  // プレイヤーの移動スピード

let items = [];  // アイテムの配列
let itemSize = 30;  // アイテムの大きさ
let score = 0;  // 得点
let life = 3;  // ライフ
let itemSpeed = 3;  // アイテムの落下スピード

function setup() {
  createCanvas(400, 400);  // キャンバス作成
}

function draw() {
  background(220);  // 背景色を塗りつぶし

  // プレイヤーを描画
  rect(playerX, playerY, playerWidth, playerHeight);

  // アイテムを描画
  for (let i = items.length - 1; i >= 0; i--) {
    let item = items[i];
    item.y += itemSpeed;  // アイテムのY座標を下に動かす

    // アイテムの色を変更
    if (item.points > 0) {
      fill(0, 255, 0);  // 良いアイテム（緑）
    } else {
      fill(255, 0, 0);  // 爆弾（赤）
    }

    // アイテムを描画
    ellipse(item.x, item.y, itemSize, itemSize);

    // アイテムとプレイヤーの当たり判定
    if (dist(playerX + playerWidth / 2, playerY + playerHeight / 2, item.x, item.y) < (playerWidth / 2 + itemSize / 2)) {
      if (item.points > 0) {
        score += item.points;  // 良いアイテムは得点加算
      } else {
        life--;  // 爆弾に当たったらライフが減少
      }
      items.splice(i, 1);  // アイテムを削除
    }

    // アイテムが画面外に出たら削除
    if (item.y > height) {
      items.splice(i, 1);
    }
  }

  // 得点とライフの表示
  textSize(20);
  fill(0);
  text("Score: " + score, 10, 30);
  text("Life: " + life, 10, 60);

  // プレイヤーの移動
  if (keyIsDown(LEFT_ARROW) && playerX > 0) {
    playerX -= playerSpeed;
  }
  if (keyIsDown(RIGHT_ARROW) && playerX < width - playerWidth) {
    playerX += playerSpeed;
  }

  // ライフが0になったらゲームオーバー
  if (life <= 0) {
    textSize(40);
    fill(255, 0, 0);
    text("GAME OVER", width / 2 - 100, height / 2);
    noLoop();  // ゲームを停止
  }
}

// アイテムをランダムに生成
function createItem() {
  let x = random(width);
  let y = -itemSize;  // 画面の上に出現
  let points = random() > 0.5 ? 1 : -1;  // 1か-1のランダムなポイント（良いアイテムか爆弾か）
  items.push({ x: x, y: y, points: points });  // アイテムを配列に追加
}

// 定期的にアイテムを生成
setInterval(createItem, 1000);  // 1秒ごとにアイテム生成

コピペして再生ボタンを押してみて！👍

広　告