マリオみたいなゲームを作ろうその２(p5.js)

今回はキャラクターがブロックの上に乗るようにします。
ブロックは地面と同じ当たり判定を使います。
ブロックは動的配列で宣言して複数作れるようにします。
その為、前回と地面の処理が少し違うので注意してください。

let player;
let blocks = [];

function setup() {
  createCanvas(800, 400);

  // プレイヤー初期設定
  player = { x: 50, y: 300, w: 40, h: 40, vy: 0, isJumping: false };

  // ブロック（地面を含む）を配置
  blocks = [
    { x: 200, y: 250, w: 100, h: 20 }, // 通常ブロック
    { x: 400, y: 200, w: 100, h: 20 }, // 通常ブロック
    { x: 600, y: 300, w: 100, h: 20 }, // 通常ブロック
    { x: 0, y: height - 50, w: width, h: 50 }, // 地面
  ];
}

function draw() {
  background(135, 206, 250);

  // プレイヤーの重力処理
  player.vy += 1; // 重力
  let futureY = player.y + player.vy; // 次のフレームのY位置

  // 衝突判定
  
  for (let block of blocks) {
    if (
      player.x < block.x + block.w && // 水平方向の重なり
      player.x + player.w > block.x && // 水平方向の重なり
      player.y + player.h <= block.y && // プレイヤーがブロックの上面にいる
      futureY + player.h >= block.y // 次のフレームでブロックを通過しない
    ) {
      futureY = block.y - player.h; // プレイヤーをブロックの上に移動
      player.vy = 0; // 縦方向の速度をリセット
      player.isJumping = false; // ジャンプ状態を解除
    }
  }

  // プレイヤー位置を更新
  player.y = futureY;

  // プレイヤーの描画
  fill(255, 0, 0);
  rect(player.x, player.y, player.w, player.h);

  // ブロックの描画
  fill(139, 69, 19);
  for (let block of blocks) {
    rect(block.x, block.y, block.w, block.h);
  }
  
  if (keyIsDown(LEFT_ARROW)) {
      player.x -= 5;
    }

  // 右の矢印キーが押されている場合
  if (keyIsDown(RIGHT_ARROW)) {
    player.x += 5;
  }
}

function keyPressed() {
   if (keyCode === 32 && !player.isJumping) { // スペースキーでジャンプ
    player.vy = -15;
    player.isJumping = true;
  }
}

処理としてはブロックそれぞれに前回の地面と同じ当たり判定があると思ってください。
前回の記事と比べるのもいいでしょう。

setup()の中でblocksそれぞれに座標を設定することで表示しています。
なので、この数字を変えたり増やしたり減らしたりする連動してブロックが変動します。
ただし、コメントアウトで地面と書いてあるところは変更しないことを勧めます。
地面が消えてキャラクターが地面に着地できなくなります。