如何在p5.js猫巴士游戏中实现随机生成的左移碰撞体功能

新增全局变量 #

在现有代码的全局变量部分添加以下内容：

let obstacles = []; // 存储所有生成的障碍物
let tinyTotoImg; // 障碍物素材变量
let lastObstacleTime = 0; // 记录上次生成障碍物的时间
const minSpawnInterval = 1200; // 生成障碍物的最小间隔（单位：毫秒）
const maxSpawnInterval = 3000; // 生成障碍物的最大间隔
const catWidth = 270; // 和你设置的猫巴士GIF尺寸一致
const catHeight = 100;
const obstacleWidth = 50; // 可根据tinyToto实际尺寸调整
const obstacleHeight = 80;

加载障碍物素材 #

在preload()函数中添加素材加载逻辑：

function preload() {
  // 原有代码不变
  tinyTotoImg = loadImage("tinyToto.png"); // 替换为你自己的素材路径
}

新增工具函数 #

新增两个工具函数，分别处理障碍物生成和碰撞检测：

// 生成新的障碍物
function spawnObstacle() {
  obstacles.push({
    x: width, // 从屏幕右侧边缘生成
    y: startY + catHeight - obstacleHeight, // 对齐地面，保证和猫巴士处于同一水平高度
    width: obstacleWidth,
    height: obstacleHeight
  })
}

// AABB轴对齐碰撞检测，判断两个矩形是否重叠
function checkCollision(cat, obstacle) {
  return cat.x < obstacle.x + obstacle.width &&
         cat.x + catWidth > obstacle.x &&
         cat.y < obstacle.y + obstacle.height &&
         cat.y + catHeight > obstacle.y;
}

修改draw函数添加核心逻辑 #

在draw()函数的最后添加以下代码，处理障碍物生成、移动、碰撞判定和游戏结束逻辑：

// 游戏运行中逻辑
if (mode == 1) {
  let currentTime = millis();
  // 随机时间间隔生成障碍物
  if (currentTime - lastObstacleTime > random(minSpawnInterval, maxSpawnInterval)) {
    spawnObstacle();
    lastObstacleTime = currentTime;
  }

  // 遍历处理所有障碍物
  for (let i = obstacles.length - 1; i >= 0; i--) {
    // 障碍物和背景同速左移
    obstacles[i].x -= scrollSpeed;
    // 渲染障碍物
    image(tinyTotoImg, obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);

    // 移除超出屏幕的障碍物，优化性能
    if (obstacles[i].x < -obstacles[i].width) {
      obstacles.splice(i, 1);
      continue;
    }

    // 碰撞判定
    if (checkCollision(cat, obstacles[i])) {
      mode = 2; // 切换为游戏结束状态
      bing.stop(); // 停止背景音乐
    }
  }
}

// 游戏结束提示
if (mode == 2) {
  textSize(60);
  textFont(font1);
  fill("red");
  text("游戏结束", 380, 500);
  textSize(30);
  fill("white");
  text("按F5刷新重新开始", 370, 550);
}

小优化提示 #

如果觉得碰撞判定太严格，一碰边缘就死，可以修改碰撞检测函数里的猫巴士参数，给碰撞盒留一点余量，比如用cat.x + 20、catWidth - 40缩小猫的有效碰撞范围，游戏体验会更友好。

内容的提问来源于stack exchange，提问作者Izabella Petersen