以角度拍摄最后一个位置html5 canvas js答案

【问题标题】：Shooting at angle towards last position html5 canvas js以角度拍摄最后一个位置html5 canvas js
【发布时间】：2018-05-19 23:03:59
【问题描述】：

我正在尝试制作一款子弹射向目标最后位置的游戏。除非目标没有移动，否则子弹应该会错过目标。每个子弹都应该使用最近计算的角度在一个方向上连续移动。

for (var z=0; z < this.bullets.length; z++){  

var by = enemy1.y - posY;  
var bx = enemy1.x - posX;  
var fangle = Math.atan2 (by, bx);  


velocitiesx[z] = Math.cos(fangle) * 1;  
velocitiesy[z] = Math.sin(fangle) * 1;  


bullets[z].x += velocitiesx[z] ;  
bullets[z].y += velocitiesy[z] ;   
}

这是我的问题：当目标不移动时，子弹正确地击中目标。然而，当射手在移动但目标仍然不动时，所有子弹都未命中——但这些子弹应该都击中静止、不动的目标。

我认为正在发生的事情是程序不断计算最新子弹的角度并使用旧子弹上计算的角度，导致它们改变方向。我不知道如何才能使每个新子弹都遵循最近计算的角度并继续朝那个方向移动。

改成（还是一样的问题）：

function fire(){
counter++;
if (37 in keys && counter >= firerate ) {
var by = enemy1.y - posY;
var bx = enemy1.x - posX;
var fangle = Math.atan2 (by, bx);
velxf = Math.cos(fangle) * 1;
velyf = Math.sin(fangle) * 1;


bullets[bullets.length] = new Box({
  x: posX  ,
  y: posY ,
  width: 4,
  height: 4,
  color: '#7FFF00',
 });
counter = 0;

} }

function movebullets(){
for (var z=0; z < this.bullets.length; z++){
bullets[z].x += velxf ;
bullets[z].y += velyf ; 
}    
}

【问题讨论】：

你不断循环遍历所有子弹以更新它们的角度，但你只需要更新它们的位置。只有在发射子弹时才能计算角度
它仍然略微错过了不动的目标。如果射手向上移动，则子弹太低。如果射手向下移动，子弹会飞得太高。
子弹需要知道它自己的velxf和velyf，所以你可以把它设为Box({velx, vely})的属性
嘿 kokodoko 感谢您的帮助！我觉得我永远不会看到这一点，但这是有道理的。将发布相关更改。

标签： javascript html sprite angle bullet

【解决方案1】：

计算角度和 velxf 和 velyf on fire....并按照 kokodoko 的建议制作盒子的 velxf 和 velyf 属性

bullets[bullets.length] = new Box({
  x: posX  ,
  y: posY ,
  width: 4,
  height: 4,
  color: '#7FFF00',
  velxb: velxf,
  velyb: velyf,
});




function movebullets(){
for (var z=0; z < this.bullets.length; z++){

bullets[z].x += bullets[z].velxb ;
bullets[z].y += bullets[z].velyb ; 
}         
}

【讨论】：