在碰撞时，如何让一个组中的精灵与不在组中的另一个精灵具有相同的位置？

Question

在 p5.js 中，我无法让群组中的 sprite 在碰撞时锁定到与玩家 sprite 相同的位置。

function draw () {
   traySprite.collide(toppingsGroup, toppingsTouch)
}
function toppingsTouch(player, topping) {
   topping.position.x = traySprite.position.x;
   topping.position.y = traySprite.position.y;
   topping.velocity.x = 0;
}

toppingsGroup 包含五个不同的 sprite，我想要这样当其中一个 sprite 与 traySprite 发生碰撞时，该组中的单个 sprite 会锁定到与 traySprite 相同的位置，而不会影响任何其他 sprite那个小组。这应该适用于所有这些，但我遇到的问题是，一旦其中一个精灵与 traySprite 发生碰撞，它会迅速但明显地逐步退出 canvas.

**edit - 我将 traySprite.position.x 和 traySprite.position.y 更改为 player.position，不出所料，问题仍然存在。我只是想我会把它弄清楚。

Answer 1

好吧，在查看了 p5.js 的参考资料后，我发现我需要的是 traySprite.overlap 而不是 traySprite.collide。

这是因为使用重叠函数时，它只是检查精灵是否相互重叠，而不是实际使它们与碰撞函数进行物理交互。

function draw() {
   traySprite.overlap(toppingsGroup, toppingsTouch);
}


function toppingsTouch(player, topping) {
   topping.position.x = traySprite.position.x;
   topping.position.y = traySprite.position.y;
   topping.velocity.x = 0;
   topping.velocity.y = 0;
}

这就是我的代码最终的样子。通过碰撞功能，它们不断地相互碰撞，因此导致它们逐渐离开屏幕，而通过重叠，它们只是相互穿过，因此它们可以具有相同的位置。

在碰撞时，如何让一个组中的精灵与不在组中的另一个精灵具有相同的位置？

How do I have a sprite in a group have the same position as another sprite not in a group upon collision?

javascript

location

collision-detection

sprite

p5.js