当たり判定(p5.js)

今回は発射した弾と敵が当たったら消滅させるあたり判定を作ります。

まずは書き換えたコードを見せます。

//描画
function draw() {
  background(220);

  let shouldReverse = false;

  // 弾の表示と移動
  for (let i = bullets.length - 1; i >= 0; i--) {
    bullets[i].display();
    bullets[i].move();
    
    // 弾が見えなくなったら削除
    if (!bullets[i].isVisible) {
      bullets.splice(i, 1);
    }
  }

  // キャラクター描画関数
  drawCharacter();

  // 敵の表示と移動
  for (let i = enemies.length - 1; i >= 0; i--) {
    enemies[i].show();
    enemies[i].move(direction);

    // もし端に達していたら反転フラグを立てる
    if (enemies[i].x > width - enemies[i].w || enemies[i].x < 0) {
      shouldReverse = true;
    }

    // 弾と敵の当たり判定
    for (let j = bullets.length - 1; j >= 0; j--) {
      if (hitTest(bullets[j], enemies[i])) {
        // 当たったら両方とも削除
        bullets.splice(j, 1);
        enemies.splice(i, 1);
        break; // 敵が消えたのでループから抜ける
      }
    }
  }

  // 端に到達したら方向を反転し、隊列を下に移動させる
  if (shouldReverse) {
    direction *= -1; // 方向を反転
    for (let i = 0; i < enemies.length; i++) {
      enemies[i].shiftDown(); // 敵を下に移動
    }
  }
}

// 弾と敵の当たり判定
function hitTest(bullet, enemy) {
  // 弾が敵の矩形内にあるかを確認
  return (
    bullet.x > enemy.x &&
    bullet.x < enemy.x + enemy.w &&
    bullet.y > enemy.y &&
    bullet.y < enemy.y + enemy.h
  );
}

少し変わった処理で動かしています。
抜粋したものが以下です。

//描画
function draw() {
  // 敵の表示と移動
  for (let i = enemies.length - 1; i >= 0; i--) {
    // 弾と敵の当たり判定
    for (let j = bullets.length - 1; j >= 0; j--) {
      if (hitTest(bullets[j], enemies[i])) {
        // 当たったら両方とも削除
        bullets.splice(j, 1);
        enemies.splice(i, 1);
        break; // 敵が消えたのでループから抜ける
      }
    }
  }
}

// 弾と敵の当たり判定
function hitTest(bullet, enemy) {
  // 弾が敵の矩形内にあるかを確認
  return (
    bullet.x > enemy.x &&
    bullet.x < enemy.x + enemy.w &&
    bullet.y > enemy.y &&
    bullet.y < enemy.y + enemy.h
  );
}

hitTest関数は範囲で弾と敵が当たってるよという判定を戻り値を返す関数です。
これをif文の引数に入れて代わりに計算させています。
これで条件に合っていたら両方を消滅させるという処理です。

それではまた次回