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

Question

我的所有搜索都提供了更一般的 arc/sin/cos 用法或指向鼠标位置。我想用键盘瞄准并发射射弹，并且从头开始做了很多事情，作为网络中的新手 class 正在做一个项目，但我坚持这一点。我目前的数学让我在沿着线当前指向的方向射击时陷入困境......（为便于阅读而清理代码名称）：

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枪改成P2枪

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;
}

三角

当您使用三角函数创建向量时，它也是一个单位向量，不需要归一化。

  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)
  }

NOTE when normalizing you may get a vector that has no length. If your code is likely to create such a vector you need to check for the zero length and take appropriate action. Javascript does not throw an error when you divide by zero, but will return Infinity, with very strange results to your animations.

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

Javascript Canvas how to shoot in 360* from a rotating object

javascript

geometry

canvas

angle

规范化向量。