为画布对象设置正确的角速度

Question

我正在建造一个太空射击游戏，并希望该船在光标方向发射火箭。因此，我抓住它应该射出的角度的弧度值，乘以船速并分别设定它的x和y速度。

我将它作为Bullet类：

function Bullet(x, y) {
    this.x = x;
    this.y = y;
    this.rotation = 0;
    this.width = 6;
    this.height = 3;
    this.color = utils.getRandomColor();
    this.speed = 80;
}

这是更新项目符号类所有实例移动的函数：

function drawBullet(bullet) {
    var dx = mouse.x - bullet.x,
        dy = mouse.y - bullet.y,
        angle = Math.atan2(dy, dx);
    bullet.vx = Math.cos(angle) * bullet.speed;
    bullet.vy = Math.sin(angle) * bullet.speed;
    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
    bullet.draw(ctx);
}

它开始没问题，正确的方向，速度和东西。但是一旦它到达鼠标，它就会在那里停止并开始闪烁。现在，我意识到这是因为我获得角度的方式，使用鼠标位置作为一个值 - 问题是我无法找到一种方法只使用角度来获得速度，而不是到鼠标位置的距离。所以它不会减速。

欢迎所有建议，谢谢！

Answer 1

如果您不需要归位导弹类型行为，只需在创建项目符号时传递鼠标坐标。

示例：

new Bullet(shooterX, shooterY, mouseX, mouseY)

我包含了一个过度设计的堆栈代码段，但相关部分如下所示。

var Bullet = function(x,y,tx,ty){
    this.speed = 15;

    this.x = x;
    this.y = y;

    var radians = Math.atan2(ty-y, tx-x);
    // we now have our velX and velY we can just refer to
    this.velX = Math.cos(radians) * this.speed;
    this.velY = Math.sin(radians) * this.speed;

}

Bullet.prototype.update = function(){
    // just update by our previous calculated velX and velY.
    this.x += this.velX;
    this.y += this.velY;
};

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 250,
    height = 250,
    output = document.getElementById("radians"),
    output2 = document.getElementById("degrees"),
    cX = 0,
    cY = 0,
    mX = 0,
    mY = 0,
    bullets = [];

canvas.width = width;
canvas.height = height;

canvas.addEventListener("mousemove", function (e) {
    mX = e.pageX;
    mY = e.pageY;
});

var Ball = function (x, y, radius, color) {    
    this.x = x || 0;
    this.y = y || 0;
    this.radius = radius || 10;
    
    // makes our x and y the center of the circle.
    this.x = (this.x-this.radius/2);
    this.y = (this.y-this.radius/2);
    
    // how far out do we want the point
    this.pointLength = 50;
    this.px = 0;
    this.py = 0;
    
    this.color = color || "rgb(255,0,0)";
}

Ball.prototype.shoot = function(tx, ty){
    bullets.push(new Bullet(this.x, this.y, tx, ty));
}

Ball.prototype.update = function (x, y) {
    // get the target x and y
    this.targetX = x;
    this.targetY = y;
    
    var x = this.x - this.targetX,
        y = this.y - this.targetY,
        radians = Math.atan2(y,x);
    
    this.px = this.x - this.pointLength * Math.cos(radians);
    this.py = this.y - this.pointLength * Math.sin(radians);
    
    // -y will make 0 the top, y will 0 us at the bottom.
    output.textContent = radians;
    output2.textContent = radians/Math.PI * 180
};

Ball.prototype.render = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    
    ctx.strokeStyle = "rgb(0,0,255)";
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.px, this.py);
    ctx.closePath();
    ctx.stroke();
};

var Bullet = function(x,y,tx,ty){
    this.speed = 15;
    
    this.x = x;
    this.y = y;
    
    var radians = Math.atan2(ty-y, tx-x);
    this.velX = Math.cos(radians) * this.speed;
    this.velY = Math.sin(radians) * this.speed;

}

Bullet.prototype.update = function(){
    this.x += this.velX;
    this.y += this.velY;
};

Bullet.prototype.render = function(){
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
};

var ball1 = new Ball(width/2, height/2, 10);

canvas.addEventListener("click", function (e) {
    ball1.shoot(e.pageX, e.pageY);
});

function render() {
    ctx.clearRect(0, 0, width, height);
    ball1.update(mX, mY);
    ball1.render();
    
    bullets.forEach(function(b){
        b.update();
        b.render();
    });
    requestAnimationFrame(render);
}

render();

ol{list-style:none;}

<canvas id="canvas"></canvas>
<div>
    <ol>
        <li>
            <span>Radians : </span><span id="radians"></span>
        </li>
        <li>
            <span>Degrees : </span><span id="degrees"></span>
        </li>
    </ol>
</div>

Answer 2

在bullet上添加一个存储运动角度的新属性，将其初始化为-1。然后，在第一次drawBullet调用时，检查它是否已首先初始化。如果没有，请设置角度...

function Bullet(x, y) {
    this.x = x;
    this.y = y;
    this.rotation = 0;
    this.width = 6;
    this.height = 3;
    this.color = utils.getRandomColor();
    this.speed = 80;
    this.angle = -1;                // New, angle property initialized to -1
}

function drawBullet(bullet) {
    if (bullet.angle === -1) {      // Only pull the mouse cursor and get an angle
      var dx = mouse.x - bullet.x,  // If it hasn't already done so.
          dy = mouse.y - bullet.y,
          angle = Math.atan2(dy, dx);
      bullet.angle = angle;
    }
    bullet.vx = Math.cos(bullet.angle) * bullet.speed;  // Re-use the angle value.
    bullet.vy = Math.sin(bullet.angle) * bullet.speed;
    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
    bullet.draw(ctx);
}