如何在JavaScript/Kaboom.js中切换玩家精灵图像？

需求说明 #

我用JavaScript结合Kaboom.js开发一款收集金币的游戏，核心玩法是玩家收集金币后角色变大。当收集满4枚金币时，需要重置玩家缩放比例（已实现），同时切换玩家的精灵图像（当前待解决），以此实现类似关卡进阶的机制。

原游戏代码 #

import kaboom from "kaboom"

// initialize context
kaboom()

const speed = 150;
let PlayerScale = 1;
let limitcoins = 0;

// load assets
loadSprite("player", "sprites/bean.png")
loadSprite("coin", "sprites/coin.png");
loadSprite("player2", "sprites/bean2.png");

// 创建玩家实体
const player = add([
  sprite("player"),
  pos(width() / 2, height() / 2),
  scale(PlayerScale),
  area(),
  "player" // 碰撞检测标签
]);

// 创建了一个初始缩放为0的player2实体
const player2 = add([
  sprite("player2"),
  pos(width() / 2, height() / 2),
  scale(0),
  area(),
  "player2"
]);

// 生成金币函数
function spawnCoin() {
  const spawnDistance = 400;
  const spawnX = player.pos.x + rand(-spawnDistance, spawnDistance);
  const spawnY = player.pos.y + rand(-spawnDistance, spawnDistance)
  const coin = add([
    sprite("coin"),
    pos(spawnX, spawnY),
    scale(0.5),
    area(),
  ]);

  // 碰撞检测逻辑
  coin.collides("player", (player) => {
    if (!coin.collided) {
      coin.collided = true; // 关闭重复碰撞检测
      destroy(coin);
      PlayerScale += 1; // 增大玩家缩放
      player.scale = PlayerScale; // 更新玩家缩放

// 相机跟随逻辑（原代码嵌套位置错误）
player.action(() => {
  camPos(player.pos);
});

// 定时生成金币
setInterval(() => {
  spawnCoin();
  limitcoins += 1;
}, 1000);

// 玩家移动控制
keyDown("w", () => {
  player.move(0, -speed);
});

keyDown("a", () => {
  player.move(-speed, 0);
});

keyDown("s", () => {
  player.move(0, speed);
});

keyDown("d", () => {
  player.move(speed, 0);
});

之前尝试的代码（存在问题） #

// 当playerScale等于4时切换精灵
      if (playerScale === 4) {
        player.swap("player2");
      }
    }
  });
}

修正后的完整实现代码 #

import kaboom from "kaboom"

// 初始化Kaboom环境
kaboom()

const speed = 150;
let PlayerScale = 1;
// 记录当前使用的精灵名称，支持后续循环切换
let currentPlayerSprite = "player";

// 加载资源
loadSprite("player", "sprites/bean.png")
loadSprite("coin", "sprites/coin.png");
loadSprite("player2", "sprites/bean2.png");

// 创建单个玩家实体（无需额外创建player2）
const player = add([
  sprite(currentPlayerSprite),
  pos(width() / 2, height() / 2),
  scale(PlayerScale),
  area(),
  "player"
]);

// 生成金币函数
function spawnCoin() {
  const spawnDistance = 400;
  const spawnX = player.pos.x + rand(-spawnDistance, spawnDistance);
  const spawnY = player.pos.y + rand(-spawnDistance, spawnDistance)
  const coin = add([
    sprite("coin"),
    pos(spawnX, spawnY),
    scale(0.5),
    area(),
  ]);

  // 碰撞处理逻辑
  coin.collides("player", () => {
    if (!coin.collided) {
      coin.collided = true;
      destroy(coin);
      PlayerScale += 1;
      player.scale = PlayerScale;

      // 收集4枚金币触发进阶
      if (PlayerScale === 4) {
        // 重置缩放比例
        PlayerScale = 1;
        player.scale = PlayerScale;
        // 切换精灵图像（支持来回切换，可按需修改）
        currentPlayerSprite = currentPlayerSprite === "player" ? "player2" : "player";
        player.use(sprite(currentPlayerSprite));
      }
    }
  });
}

// 相机跟随逻辑（移到正确位置）
player.action(() => {
  camPos(player.pos);
});

// 定时生成金币
setInterval(() => {
  spawnCoin();
}, 1000);

// 玩家移动控制
keyDown("w", () => {
  player.move(0, -speed);
});

keyDown("a", () => {
  player.move(-speed, 0);
});

keyDown("s", () => {
  player.move(0, speed);
});

keyDown("d", () => {
  player.move(speed, 0);
});

关键修改说明 #

1. 移除多余player2实体：不需要同时维护两个玩家实体，直接通过player.use(sprite())切换精灵，逻辑更简洁。
2. 修正变量名大小写错误：原尝试代码中误用了小写playerScale，但全局变量是大写开头的PlayerScale，导致判断逻辑失效。
3. 使用标准精灵切换方式：Kaboom.js中推荐用use(sprite())方法切换精灵，swap方法已过时。
4. 完善进阶逻辑：触发进阶时先重置缩放比例，再切换精灵，同时支持精灵循环切换（可根据需求改为单向切换）。
5. 修复代码嵌套错误：原代码中相机跟随逻辑错误嵌套在碰撞处理函数内，现在移到全局作用域正常执行。

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