title: Shooting at angle towards last position html5 canvas js
body: <p>I'm trying to make a game where bullets are shot at a target's last location. The bullets should miss the target unless the target is not moving. Each bullet should continuously move in a single direction using the most recently calculated angle.</p>
  
  <pre><code>for (var z=0; z &lt; 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] ;   
  }
  </code></pre>
  
  <p>Here is my problem:
  When the target is not moving, the bullets correctly hit the target. However, when the shooter is moving, but the target is still, all of the bullets miss -- but those bullets should all hit the still, non moving target.</p>
  
  <p>I think what is happening is the program keeps calculating the angle for the newest bullet and using that calculated on the older bullets, causing them to change direction. I am not sure how I could make it so that each new bullet follows the most recently calculated angle and keeps moving in that direction.</p>
  
  <p>changed to (still same problem):</p>
  
  <pre><code>function fire(){
  counter++;
  if (37 in keys &amp;&amp; counter &gt;= 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;
  </code></pre>
  
  <p>}
  }</p>
  
  <pre><code>function movebullets(){
  for (var z=0; z &lt; this.bullets.length; z++){
  bullets[z].x += velxf ;
  bullets[z].y += velyf ; 
  }    
  }
  </code></pre>