为啥在我的 JavaScript 浏览器游戏中弹跳 Actor 不起作用?

Posted

技术标签:

【中文标题】为啥在我的 JavaScript 浏览器游戏中弹跳 Actor 不起作用?【英文标题】:Why do bouncing Actors in my JavaScript browser game not work?为什么在我的 JavaScript 浏览器游戏中弹跳 Actor 不起作用? 【发布时间】:2022-01-17 06:22:15 【问题描述】:

我想实现一个在太空中飞行的火箭,它会从传入的流星体反弹。目前我已经通过比较两个演员的 x 和 y 位置并在碰撞时交换他们的速度来实现它。碰撞检测和速度交换确实有效(由 console.log 证明),但是在屏幕上它们有时会反弹。

我试图确保被比较的演员的速度对象不引用相同的 javascript 对象(cSpeedX 等)。

游戏是用 Pixi JS 构建的。

碰撞检测功能,为每个actor(所有流星和火箭)执行

export const checkCollision = (current, objects) => 
    objects.forEach((o) => 
        if (current !== o) 
            const dx =
                current.x < o.x
                    ? o.x - o.width / 2 - (current.x + current.width / 2)
                    : current.x - current.width / 2 - (o.x + o.width / 2);

            const dy =
                current.y < o.y
                    ? o.y - o.height / 2 - (current.y + current.height / 2)
                    : current.y - current.height / 2 - (o.y + o.height / 2);

            if (dx < 0 && dy < 0) 
                const cSpeedX = current.speed.x;
                const cSpeedY = current.speed.y;
                const oSpeedX = o.speed.x;
                const oSpeedY = o.speed.y;

                current.speed.x = oSpeedX;
                current.speed.y = oSpeedY;
                o.speed.x = cSpeedX;
                o.speed.y = cSpeedY;
            
        
    );

在火箭和流星雨上都实现了移动功能

this.move = (delta) => 
            this.x += this.speed.x * delta;
            this.y += this.speed.y * delta;
        ;

【问题讨论】:

【参考方案1】:
export const checkCollision = (current, objects) => 
    objects.forEach((o) => 
        if (current !== o) 

你还写了:The collision detection function, executed for each actor (all meteroids and the rocket)

所以我想某处也有类似的循环:

objects.forEach((o) => 
    checkCollision(o, objects);
);

这意味着对于每对对象,碰撞检查两次。

让我们假设o1o2 是一些不同的对象,并且它们发生了碰撞。那时会发生什么? :

checkCollision(o1, objects); <-- swap speed between o1 and o2
...
checkCollision(o2, objects); <-- swap speed between o2 and o1

因此速度将在它们之间交换 2 次 - 换句话说:两个对象的速度将保持不变。

要调查是否确实如此,您可以像这样输入console.log(或打印对象ID的东西):

            if (dx < 0 && dy < 0) 
                console.log('swapping speed of of objects:');
                console.log(current);
                console.log(o);
                const cSpeedX = current.speed.x;

然后准备2个物体碰撞时的情况并检查控制台日志。

【讨论】:

谢谢,这就是问题所在!

以上是关于为啥在我的 JavaScript 浏览器游戏中弹跳 Actor 不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

计算线上的弹跳速度

为啥我的 cocos2d box2d 项目中我的第二个球没有弹跳?

为啥 Unity Canvas Image 总是在我的游戏对象上渲染,即使它肯定在它们后面?

为啥这个 Javascript 库在浏览器中可用,但在 PhoneGap 中不可用?

在 SpriteKit 中为弹跳球创建音效

为啥正则表达式在我的 JavaScript 中占据主导地位,我如何坚持“这是一个字符串”? [关闭]