基于Kaboom.js的格斗游戏角色选择界面：点击跳转场景实现

你当前的问题是全局onClick()会监听整个画布的点击，导致点击任意位置都会触发跳转。要实现点击角色肖像才设置选中角色并跳转，核心是给每个角色添加可交互区域，单独绑定点击事件。

核心修改点 #

• 给每个角色精灵添加area()组件，这是Kaboom中元素可交互的必要条件
• 不要用全局onClick()，而是给每个角色单独绑定onClick()方法
• 存储选中角色信息，可通过全局变量或场景参数传递到战斗场景

优化后的完整代码 #

// 先定义角色数据，方便后续维护
const characters = [
  { name: "Merlin", sprite: "merlin", pos: vec2(100, 250) },
  { name: "Dark", sprite: "dark", pos: vec2(320, 250) },
  { name: "Worm", sprite: "worm", pos: vec2(540, 250) },
  { name: "Shard", sprite: "shard", pos: vec2(760, 250) },
  { name: "Hunter", sprite: "hunter", pos: vec2(980, 250) }
];

scene("character-select", () => {
    // 添加背景
    add([
        sprite("background"),
        scale(4)
    ]);

    // 添加标题
    add([
        text("CHOOSE YOUR CHARACTER", {
            size: 65,
            width: 800,
            align: 'center',
        }),
        pos(250, 90)
    ]);

    // 存储选中的角色（也可以用全局变量或场景参数传递）
    let selectedCharacter = null;

    // 循环创建所有角色选项
    characters.forEach(char => {
        // 创建角色精灵，添加area组件使其可点击
        const charElement = add([
            sprite(char.sprite),
            pos(char.pos),
            area() // 关键：添加后才能监听该元素的点击事件
        ]);

        // 添加角色名称文本
        add([
            text(char.name),
            pos(char.pos.x + 10, char.pos.y)
        ]);

        // 绑定角色点击事件
        charElement.onClick(() => {
            selectedCharacter = char.name;
            // 跳转战斗场景时可传递角色数据，比如：
            // go("fight", { selectedChar: char });
            go("fight");
        });
    });

    // 保留回车跳转逻辑，增加选中判断
    onKeyPress("enter", () => {
        if (selectedCharacter) {
            go("fight");
        } else {
            // 提示用户选择角色
            add([
                text("请先选择角色！", { size: 30, color: rgb(255, 0, 0) }),
                pos(500, 500),
                lifespan(2) // 2秒后自动消失
            ]);
        }
    });
});

关键说明 #

1. area()组件：只有添加了这个组件的元素才能触发onClick()、onHover()等交互事件，全局onClick()会监听整个画布，所以要避免使用。
2. 角色数据管理：把角色信息整理成数组，循环创建元素，减少重复代码，后续添加新角色只需在数组中增加一项即可。
3. 角色信息传递：跳转场景时可以通过go("fight", { selectedChar: char })把角色完整数据传递到战斗场景，在战斗场景中通过scene("fight", (data) => { console.log(data.selectedChar) })接收。

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