如何为p5.js泡泡游戏添加按钮触发的进阶关卡？

作为经常折腾p5.js（p5.play）游戏的开发者，我给你整理了一套能完美解决需求的关卡实现方案——核心是模块化的关卡数据+清晰的游戏状态管理，既能实现点击按钮进下一关，又能让敌人数量、速度随关卡动态提升。下面一步步拆解：

1. 先重构基础变量，理清关卡逻辑 #

首先把零散的变量整合，加入关卡配置数组和游戏状态控制，后续扩展关卡只需要加配置，不用改核心逻辑：

let player;
let enemies;
let walls;
// 游戏状态：控制当前是游玩/通关/结束状态
let gameState = "playing"; // 可选值: playing, levelComplete, gameOver
let currentLevel = 1;

// 关卡配置数组：每个对象对应一关的敌人参数，想加关卡直接加新对象就行
const levels = [
  { numEnemies: 10, baseSize: 10, maxSpeed: 2, attraction: 0.01 }, // 关卡1：初始配置
  { numEnemies: 15, baseSize: 8, maxSpeed: 3, attraction: 0.015 }, // 关卡2：更多敌人、更快速度
  { numEnemies: 20, baseSize: 7, maxSpeed: 4, attraction: 0.02 }   // 关卡3：更密集、更快
];

2. 封装初始化函数，避免重复代码 #

把墙壁、玩家、敌人的创建逻辑拆成独立函数，每次切换关卡可以一键重置，不会出现变量混乱：

function setup() {
  createCanvas(700, 600);
  walls = new Group();
  enemies = new Group();
  setupWalls();
  createPlayer();
  spawnEnemies(levels[currentLevel - 1]); // 数组从0开始，关卡从1开始对应
}

// 封装墙壁创建逻辑，避免重复写四次
function setupWalls() {
  const wallList = [
    { x: 0, y: 0, w: width*2, h: 20 },    // 顶部墙
    { x: width, y: height, w: 20, h: height*2 }, // 右侧墙
    { x: 0, y: height, w: width*2, h: 20 }, // 底部墙
    { x: 0, y: 0, w: 20, h: height*2 }     // 左侧墙
  ];
  wallList.forEach(wallProp => {
    const wall = createSprite(wallProp.x, wallProp.y, wallProp.w, wallProp.h);
    wall.shapeColor = color(0,255,0);
    wall.immovable = true;
    walls.add(wall);
  });
}

// 初始化玩家，关卡切换时可以重置大小
function createPlayer() {
  player = createSprite(width/2, height/2, 40, 40);
  player.draw = function(){
    fill(0,0,255);
    ellipse(0,0,this.width,this.height);
  };
}

// 根据当前关卡数据生成敌人
function spawnEnemies(levelData) {
  enemies.clear(); // 清空上一关的敌人
  for (let i = 0; i < levelData.numEnemies; i++) {
    const enemySize = levelData.baseSize * (i + 1); // 敌人大小递增
    const enemy = createSprite(
      random(40, width - 40), // 避免敌人出生在墙外
      random(40, height - 40),
      enemySize, enemySize
    );
    enemy.shapeColor = color(255,0,0);
    enemy.maxSpeed = levelData.maxSpeed; // 绑定关卡的最大速度
    enemy.attractionStrength = levelData.attraction; // 绑定关卡的吸引力
    enemy.draw = function(){
      fill(255,0,255);
      ellipse(0,0,this.width,this.height);
    };
    enemies.add(enemy);
  }
}

3. 用状态控制游戏流程，实现手动关卡切换 #

把原来的draw函数拆成不同状态的逻辑，通关后可以显示按钮，点击才进入下一关：

function draw() {
  background(0);
  noStroke();

  // 根据当前状态执行不同逻辑
  switch(gameState) {
    case "playing":
      runGameplay();
      break;
    case "levelComplete":
      showLevelCompleteScreen();
      break;
    case "gameOver":
      showGameOverScreen();
      break;
  }
}

// 游玩状态的核心逻辑
function runGameplay() {
  drawSprites();

  // 敌人行为：碰撞+追踪鼠标
  enemies.bounce(enemies);
  enemies.bounce(walls);
  enemies.forEach(enemy => {
    enemy.attractionPoint(enemy.attractionStrength, mouseX, mouseY);
  });

  // 玩家跟随鼠标
  if(player) {
    player.position.x = mouseX;
    player.position.y = mouseY;
  }

  // 处理吞噬/被吞噬逻辑
  handleCollisions();
}

// 碰撞检测逻辑
function handleCollisions() {
  enemies.forEach(enemy => {
    if(player.overlap(enemy)) {
      if(player.width > enemy.width) {
        // 吞噬敌人，玩家变大
        enemy.remove();
        player.width += 10;
        player.height += 10;
        // 检查是否清空所有敌人，触发通关
        if(enemies.length === 0) {
          gameState = "levelComplete";
        }
      } else {
        // 被大敌人碰到，游戏结束
        player.remove();
        gameState = "gameOver";
      }
    }
  });
}

// 通关界面：显示提示+下一关按钮
function showLevelCompleteScreen() {
  textSize(60);
  textAlign(CENTER);
  fill(255);
  text(`LEVEL ${currentLevel} CLEARED!`, width/2, height/2 - 50);

  // 绘制下一关按钮
  fill(0, 200, 0);
  rectMode(CENTER);
  rect(width/2, height/2 + 50, 200, 60);
  fill(255);
  textSize(30);
  text("NEXT LEVEL", width/2, height/2 + 55);

  // 点击按钮检测
  if(mouseIsPressed && 
     mouseX > width/2 - 100 && mouseX < width/2 + 100 && 
     mouseY > height/2 + 20 && mouseY < height/2 + 80) {
    currentLevel++;
    // 判断是否是最后一关
    if(currentLevel > levels.length) {
      // 所有关卡完成，显示最终胜利
      background(0);
      textSize(70);
      fill(0,255,0);
      text("YOU BEAT THE GAME!", width/2, height/2);
    } else {
      // 重置玩家+生成新关卡敌人，回到游玩状态
      createPlayer();
      spawnEnemies(levels[currentLevel - 1]);
      gameState = "playing";
    }
  }
}

// 游戏结束界面
function showGameOverScreen() {
  textSize(65);
  textAlign(CENTER);
  fill(255);
  text('GAME OVER', width/2, height/2);
  // 可以加个重新开始按钮，逻辑和下一关类似
}

为什么这是最优方案？ #

• 可扩展性极强：想加新关卡只需要在levels数组里加一个对象，不用改核心逻辑
• 逻辑清晰：用gameState区分不同阶段，避免原来的win/gameOver变量混乱
• 完全满足需求：通关后必须点击按钮才进下一关，敌人的数量、速度、吸引力随关卡动态提升
• 修复了原代码的bug：比如原代码中createWall函数的变量作用域问题，玩家被移除后无法重新创建的问题

内容的提问来源于stack exchange，提问作者Sofia Flankkumäki