javascript - HTML5 canvas 游戏将子弹射向鼠标点。

Question

现在。我已将其设置为从 Angular 色的方向射击子弹。但我希望能够将子弹射到鼠标点，让玩家更轻松。

现在是

if(gun_1[i].direction == 2){ gun_1[i].x -= gun_1[i].speed * modifier};
if(gun_1[i].direction == 3){ gun_1[i].x += gun_1[i].speed * modifier};
if(gun_1[i].direction == 1){ gun_1[i].y -= gun_1[i].speed * modifier};
if(gun_1[i].direction == 4){ gun_1[i].y += gun_1[i].speed * modifier };
if(gun_1[i].direction == 5){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier };
if(gun_1[i].direction == 7){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier };
if(gun_1[i].direction == 6){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier };
if(gun_1[i].direction == 8){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier };

我希望能够拍摄到鼠标点击的位置。如果可能。

Answer 1

当然，这并不难。但是您也可以做很多事情来改进当前的设计。首先，添加 velocityX 和 velocityY 字段，这样在每一步你只需要更新子弹的位置:

gun_1[i].x += gun_1[i].velocityX
gun_1[i].y += gun_1[i].velocityY

然后当按下鼠标时，设置子弹的速度:

canvas.onmousedown = function(e) {
   var dx = (e.x - character.x);
   var dy = (e.y - character.y);
   var mag = Math.sqrt(dx * dx + dy * dy);

   // whatever you need to do to get gun_1[i]

   gun_1[i].velocityX = (dx / mag) * speed;
   gun_1[i].velocityY = (dy / mag) * speed;
}

如果您对向量有所了解，我们只是将方向向量归一化并乘以标量初始速度。