如何在P5.js Play中实现3个敌人漏过后触发游戏结束界面

核心思路 #

通过全局变量记录到达屏幕底部的敌人数量，当数量达到3时，停止所有游戏逻辑并显示结束界面。

具体修改步骤 #

1. 添加全局状态变量
   在全局变量区域新增两个变量，分别记录穿过底部的敌人数量和游戏是否结束：

let enemiesPassed = 0;
let gameOver = false;

2. 在draw函数中检查敌人位置
   在draw()函数的drawSprites()之前，加入敌人越界检查逻辑，从后往前遍历敌人组避免索引错乱：

if (!gameOver) {
  for (let i = enemies.length - 1; i >= 0; i--) {
    let enemy = enemies[i];
    if (enemy.position.y > height) {
      enemy.remove();
      enemiesPassed++;
      // 触发游戏结束条件
      if (enemiesPassed >= 3) {
        gameOver = true;
        // 停止所有精灵运动
        player.velocity.x = 0;
        player.velocity.y = 0;
        enemies.forEach(e => e.velocity.y = 0);
        bulletsprites.forEach(b => b.velocity.y = 0);
      }
    }
  }
}

3. 更新游戏状态显示
   修改原有的文本渲染逻辑，优先判断游戏结束状态：

if (gameOver) {
  text("Game Over!", width/2, height/2);
} else if (enemies.length > 0) {
  text(score, width/2, height/2);
} else {
  text("you win!", width/2, height/2);
}

4. 禁用游戏结束后的射击操作
   修改mousePressed()函数，只有在游戏未结束时才生成子弹：

function mousePressed() {
  if (gameOver) return;
  // 调整为从玩家位置发射子弹，更符合射击逻辑
  let bulletsprite = createSprite(player.position.x, player.position.y, 10);
  bulletsprite.velocity.y = -4;
  bulletsprites.add(bulletsprite);
}

（注：原代码中bullets数组未实际使用，可直接删除）

修改后的完整代码 #

let y = 0;

let spr;
let enemies;
let player;
let bulletsprite;
let bulletsprites;

let score = 0;
let enemiesPassed = 0;
let gameOver = false;

function setup() {
  createCanvas(600, 600);
  
  bulletsprites = new Group()
  enemies = new Group()
  for(let i = 0; i < 60; i++){  
    spr = createSprite(
      random(width), y, random(10, 40), random(10, 40));
    spr.shapeColor = color(random(255), random(255), random(255), random(255));
    spr.velocity.y = random(0.7, 2);
    enemies.add(spr); 
  }
  
  player = createSprite(50, 50, 40, 40);
  player.shapeColor = color(255);
}

function draw() {
  background(30);
  
  if (!gameOver) {
    player.velocity.x = (mouseX-player.position.x)*0.1;
    player.velocity.y = (mouseY-player.position.y)*0.1;
    
    // 检查敌人是否穿过屏幕底部
    for (let i = enemies.length - 1; i >= 0; i--) {
      let enemy = enemies[i];
      if (enemy.position.y > height) {
        enemy.remove();
        enemiesPassed++;
        if (enemiesPassed >= 3) {
          gameOver = true;
          player.velocity.x = 0;
          player.velocity.y = 0;
          enemies.forEach(e => e.velocity.y = 0);
          bulletsprites.forEach(b => b.velocity.y = 0);
        }
      }
    }
  }
  
  textSize(72);
  textAlign(CENTER, CENTER);
  
  drawSprites();
  
  if (gameOver) {
    text("Game Over!", width/2, height/2);
  } else if (enemies.length > 0) {
    text(score, width/2, height/2);
  } else {
    text("you win!", width/2, height/2);
  }
  
  bulletsprites.overlap(enemies, getScore);
}

function mousePressed() {
  if (gameOver) return;
  let bulletsprite = createSprite(player.position.x, player.position.y, 10);
  bulletsprite.velocity.y = -4;
  bulletsprites.add(bulletsprite);
}

function getScore(bullets, enemies) {
  enemies.remove();
  score += 1;
}

额外优化说明 #

• 将子弹发射位置调整为玩家中心，更符合射击游戏的常规逻辑
• 新增gameOver变量避免重复触发结束逻辑，提升游戏稳定性
• 从后往前遍历敌人组，防止删除元素后数组索引错乱

内容的提问来源于stack exchange，提问作者Leafeon 2431