Question

我尝试使用 javaScript 和 p5js进行 agar.io 克隆。此处＆＃39;是github上的link，用于该项目的完整源代码。现在，我已经掌握了游戏的基本要点，但现在我试图添加一个弹出/分割（在游戏中，按W键弹出）。但是弹射/ w不能正常工作 - 基本上，它会以错误的方向射击w，通常靠近斑点。这是喷射（W）相对于斑点位置（W被射击的位置，[应朝向鼠标方向射击]的位置）的部分： / p>

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和＆amp; add都是p5JS函数），代码太长所以我只放了一部分更新功能和设置W的位置＆＃34;部分代码。＆＃34; this.vel＆＃34;基本上是速度，所以我将它包含在W的新位置，因为当blob移动时，W可能会被立即吃掉。但它仍然向错误的方向发射......真的需要解决这个问题...... 我试过像

这样的一切

pos = createVector(mouseX - width/2, mouseY - height/2);

但是，尽管如此，它仍然向错误的方向发射。 不幸的是，我不确定如何以逻辑的方式处理这个问题:(
注意： 我还使用 translate 函数将blob从初始位置 (0, 0)中心转移到translate(width / 2, height / 2)

Answer 1

你编写它的方式，使用 n-displacement 的翻译初始化mouseX和mouseY处的弹出blob，以及< strong>约束功能限制blob在地图当前视口上的位置，减去blob和光标之间的距离（使用 dist 功能）。如果您希望动画过程更平滑，并且稍微更精确曲率，您可以在其上使用lerp功能。弄清楚如何订购这些步骤很简单。首先通过翻译之前渲染，然后使用 lerp 对曲线进行积分来避免忽略精度，从而获得常规平面坐标的工作（在计算和约束之后）。

使用P5JS的Agar.io克隆不向正确的方向喷射（W）

1 个答案: