javascript - 使用 P5JS 的 Agar.io 克隆未弹出(W)正确方向

Question

我尝试制作一个 agar.io 使用 javaScript 和 p5js 进行克隆。 这是 link在 github 上获取该项目的完整源代码。现在，我已经掌握了游戏的基本要点，但现在我正在尝试添加弹出/分割(在游戏中，按 W 会发生弹出)。但是喷射/w 工作不正常——基本上，它向错误的方向发射 w，通常靠近 Blob 。这是弹射(W)相对于 Blob 位置的部分(W 发射的位置，[应该朝鼠标的方向发射]):

this.update = function() {
        let newvel = createVector(mouseX-width/2, mouseY-height/2);
        newvel.setMag(speed);
        this.vel.lerp(newvel, 0.2);
        this.pos.add(this.vel);
    }
    let pos = createVector(mouseX - (this.pos.x + this.vel.x), mouseY - (this.pos.y + this.vel.y));

不要担心一些额外的变量/未调用的函数(lerp、createVector、setMag和add都是p5JS函数)，代码太长所以我只放了更新函数的部分以及代码的“设置W的位置”部分。 “this.vel”基本上是速度，所以我将它包含在W的新位置中，因为当 Blob 移动时，W可能会立即被吃掉。但它仍然向错误的方向发射……确实需要解决这个问题……我尝试了一切，比如

pos = createVector(mouseX - 宽度/2, mouseY - 高度/2);

但是尽管如此，它仍然将 W 发射到错误的方向。 不幸的是，我不太确定如何以逻辑的方式解决这个问题:(
注意:我还使用 translate 函数将 Blob 从初始位置 (0, 0)居中到 translate(width/2,高度/2)

Answer 1

按照您编写的方式，使用n-displacementmouseX和mouseY处弹出的 Blob 不会有什么坏处>，以及限制 Blob 在 map 当前视口(viewport)上的位置的 constrain 函数，减去 Blob 与光标之间的距离(通过使用 dist 函数)。如果您希望动画过程更平滑，并且曲率方面更精确，您可以使用 lerp其上的功能。弄清楚如何排序这些步骤很简单。首先在渲染之前通过平移获得规则平面坐标，然后使用lerp积分曲线以避免遗漏精度 (在进行计算和约束之后)。