Javascript Canvas 如何从旋转物体进行 360* 拍摄答案

【问题标题】：Javascript Canvas how to shoot in 360* from a rotating objectJavascript Canvas 如何从旋转物体进行 360* 拍摄
【发布时间】：2016-10-31 02:38:31
【问题描述】：

我所有的搜索都涉及到更一般的 arc/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。从一个完整的圆圈中产生这个火的数学是什么？

【问题讨论】：

除了确定旋转时的新航向之外，为什么还要为三角函数烦恼呢？如果您有一条线并希望向其指向的同一方向发射弹丸，则二维向量就足够了。

标签： javascript canvas geometry angle

【解决方案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 可以移除，但你必须降低弹丸速度。
如果要射击gun2，请将P1gun 更改为P2gun。

【讨论】：

哇，谢谢。我知道这是一个简单的上升/超速问题，我发誓我曾考虑过除以 100，...但我想我只是盯着它看太久了，当接近垂直/水平时，陡峭的差异让我失望.而且我需要更熟悉类/对象的使用。 this.x的第一部分 = P1gun.x2; this.y = P1gun.y2;是一个巨大的时刻。非常感谢你。现在来学习碰撞...

【解决方案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 创建一个向量时，它也是一个单位向量，不需要归一化。

  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，给你的动画带来非常奇怪的结果。

【讨论】：