如何在CraftyJS多组件应用重力？Player接触Ground/Block无法停止下落

嘿，我来帮你搞定这个问题！你遇到的情况是因为CraftyJS的gravity()方法参数规则和你想的不一样——它只接受单个组件名称字符串，所以你之前的两种写法都不符合预期：

• this.gravity("Ground, Block")会把整个字符串当成一个不存在的组件名，导致重力直接失效
• this.gravity("Ground", "Block")里的第二个参数会被方法忽略，所以只有Ground会被识别为地面

下面给你两种简洁的解决方案，推荐第一种（更符合Crafty的组件化设计思想）：

方案1：用通用父组件统一标记地面实体 #

这种方法是创建一个空的标记组件，让Ground和Block都继承它，这样Player只需要关联这个通用组件就能同时识别两种地面：

1. 创建一个通用的Solid组件（仅作为标记，不需要逻辑）：

Crafty.c("Solid", {});

2. 在Ground和Block组件中添加这个Solid组件：

// Ground组件
Crafty.c("Ground", {
    init: function() {
        this.addComponent("Solid");
        // 这里写你原本的Ground逻辑，比如设置尺寸、颜色等
    }
});

// Block组件
Crafty.c("Block", {
    init: function() {
        this.addComponent("Solid");
        // 这里写你原本的Block逻辑
    }
});

3. 在Player组件中关联Solid组件作为重力地面：

Crafty.c("Player", {
    init: function() {
        this.addComponent("2D, Canvas, Gravity");
        this.gravity("Solid"); // 现在Player碰到任何带Solid组件的实体都会停止下落
        // 这里写你原本的Player逻辑，比如移动控制等
    }
});

方案2：手动监听碰撞事件控制重力 #

如果你不想新增组件，也可以通过监听碰撞事件手动控制Player的下落状态：

Crafty.c("Player", {
    init: function() {
        this.addComponent("2D, Canvas, Gravity");
        this.gravity(); // 先启用重力，不指定地面组件

        // 碰到Ground或Block时停止下落
        this.onHit("Ground, Block", function() {
            this._falling = false;
            this._dy = 0; // 重置垂直速度，防止继续下落
        });

        // 离开Ground或Block时恢复下落
        this.onHit("Ground, Block", function() {
            this._falling = true;
        }, true); // 第三个参数设为true，表示离开碰撞时触发事件
    }
});

第一种方案更简洁易维护，尤其是后续如果还要加其他可作为地面的实体，只需要给它们添加Solid组件就行啦！

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