You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Pixi.js 自定义角色物理系统中跳下平台的碰撞逻辑异常问题求助

Pixi.js 自定义角色物理系统中跳下平台的碰撞逻辑异常问题求助

我现在正在用pixi.js做一款游戏,要给Hero实例实现自定义物理效果,目前卡在了「跳下平台」这个功能上。

我的问题是:当角色处于state === jump状态时应该暂时忽略碰撞,但Pixi.update方法会自动把状态改成state === fall,这时候碰撞检测又生效了,导致跳不下去。

如果把代码里的if (this.#speed.speed > 0 && this.isJump())这段删掉,功能倒是能正常工作,但这样就没法让角色只跳下一层平台,之后的碰撞检测就失效了。

我试过加一个专门的「跳下」状态,也试过用setTimeout(但会导致内存泄漏),还试过用变量做计时器,但这样角色原地跳的时候会出bug。

我把相关代码贴在下面,希望能得到帮助!谢谢!

// Hero 实例代码
update() {
    this.#speed.speedX = this.#movement.x * this.#speed.maxSpeed;
    this.x += this.#speed.speedX;
    
    if (this.#speed.speedY > 0 && this.isJump()) {
        console.log('down');
        this.#stateHero = $STATESCHARTER.fall
    }
    
    this.#speed.speedY += this.#gravity.gravityForce
    this.y += this.#speed.speedY
}

stay() {
    this.#stateHero = $STATESCHARTER.stay
    this.#speed.speedY = 0
}

jump() {
    if (this.#stateHero === $STATESCHARTER.jump || this.#stateHero === $STATESCHARTER.fall) return
    this.#stateHero = $STATESCHARTER.jump
    this.#speed.speedY -= this.#gravity.jumpForce
}

jumpDown() {
    console.log('jump down')
    this.#stateHero = $STATESCHARTER.jump
    console.log(this.isJump())
}

isJump() {
    return this.#stateHero === $STATESCHARTER.jump
}
// Game 实例代码
isCheckCollision(entity, area) {
    return entity.x < area.x + area.width &&
        entity.x + entity.width > area.x &&
        entity.y < area.y + area.height &&
        entity.y + entity.height > area.y;
}

update() {
    const previousPoint = {
        x: this.#hero.x,
        y: this.#hero.y
    }
    
    this.#hero.update()
    
    this.#platforms.forEach(platform => {
        
        if (this.#hero.isJump()) return
        
        const resultCollision = this.resultEntityCollision(this.#hero, platform, previousPoint);
        
        if (resultCollision.vertical) {
            this.#hero.stay();
        }
    })
}

resultEntityCollision(charter, platform, previousPoint) {
    const collisionResult = this.checkResultEntityCollision(charter, platform, previousPoint);
    
    if (collisionResult.vertical) {
        charter.y = previousPoint.y
    }
    
    return collisionResult
}

checkResultEntityCollision(rectangleA, rectangleB, previousPointRectangleA) {
    const collisionResult = {
        horizontal: false,
        vertical: false,
    }
    
    let isCollision = this.isCheckCollision(rectangleA, rectangleB)
    if (!isCollision) return collisionResult;
    
    rectangleA.y = previousPointRectangleA.y
    
    isCollision = this.isCheckCollision(rectangleA, rectangleB)
    if (!isCollision) {
        collisionResult.vertical = true
        return collisionResult
    }
    
    collisionResult.horizontal = true
    return collisionResult
}

备注:内容来源于stack exchange,提问作者yanballas

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 14:52:59