Question

我所有的搜索都会提供更普遍的弧/ sin / cos用法或射击到鼠标位置。我希望用键盘瞄准和发射一个射弹，并从头开始做了很多，作为一个网络类做项目的菜鸟，但我坚持这一点。我当前的数学运算让我在这条线路当前指向的方向射击了这个混乱......（为了便于阅读而清理了代码名称）：

this.x = x + len * Math.cos(angle);
this.y = y + len * Math.sin(angle);
this.xmov = -((x + len * Math.cos(angle)) - x) / ((y + len * Math.sin(angle)) - y);
this.ymov = ((y + len * Math.sin(angle)) - y) / ((x + len * Math.cos(angle)) - x);

if (Math.abs(this.xmov) > Math.abs(this.ymov)) {
    this.xmove = (this.xmov * Math.abs(this.ymov));
} else {
    this.xmove = this.xmov;
}
if (Math.abs(this.ymov) > Math.abs(this.xmov)) {
    this.ymove = (this.xmov * this.ymov);
} else {
    this.ymove = this.ymov;
}

（这里是完整的东西http://jsbin.com/ximatoq/edit。转动A和D，S发射（释放时）。转弯时也可以握住S。）

...但是，你会发现它只适用于其中的3/8。从一个完整的圈子中解决这个问题的算法是什么？

Answer 1

将此作为拍摄功能使用：

this.shoot = function() {
     if (this.fire > 0) {
          this.x = P1gun.x2;
          this.y = P1gun.y2;
          this.xmove = (P1gun.x2 - P1gun.x)/100;
          this.ymove = (P1gun.y2 - P1gun.y)/100;
          this.fire = 0;
          this.firetravel = 1;
     }
}

可以移除/100，但你必须降低射弹速度。
如果你想射击枪2，请将P1枪改为P2gun。

Answer 2

规范化矢量。

要使用矢量控制某物的速度，首先要使矢量长度为1个单位（一个像素）。这通常称为矢量归一化，有时称为单位矢量。然后，您可以将该向量乘以任意数字，以获得所需的速度。

要标准化矢量，首先计算其长度，然后将其除以该值。

function normalizeVector(v){
    var len = Math.sqrt(v.x * v.x + v.y * v.y);
    v.x /= len;
    v.y /= len;
    return v;
}

<强>的Trig

使用trig创建矢量时，它也是一个单位矢量，不需要进行标准化。

  function directioToUnitVector(angle){ // angle in radians
     return {
         x : cos(angle),
         y : sin(angle)
     }

为什么要规范化

很多原因，你几乎都是从单位向量构建的。

一个例子，如果你有两个点，并希望以每秒10个像素的速度从一个点移动到另一个点，帧速率为每秒60帧。

 var p1 = {};
 var p2 = {};
 p1.x = ?  // the two points
 p1.y = ?
 p2.x = ?
 p2.y = ?
 // create a vector from p1 to p2
 var v = {}
 v.x = p2.x -p1.x;
 v.y = p2.y -p1.y;
 // Normalize the vector
 normalizeVector(v);

 var frameRate = 1/60;  // 60 frames per second
 var speed = 10; // ten pixels per second

 function update(){
     // scale vec to the speed you want. keeping the vec as a unit vec mean
     // you can also change the speed, or use the time for even more precise
     // speed control.
     p1.x += v.x * (speed * frameRate);
     p1.y += v.y * (speed * frameRate);
     // draw the moving object at p1

     requestAnimationFrame(update)
  }

注意规范化时，您可能会得到一个没有长度的矢量。如果您的代码可能会创建这样的向量，则需要检查零长度并采取适当的操作。当你除以零时，Javascript不会抛出错误，但会返回Infinity，对你的动画产生非常奇怪的结果。

Javascript Canvas如何从旋转物体360 *射击

2 个答案:

规范化矢量。