title: Stop Bullet from following player's position in javascript html5 canvas
body: <p>I am working on a side project and I fell into a problem while trying to make the bullet.
  Basically what my code does it that, when the player clicks the bullet shoots, but every time I move the mouse to rotate the player, The bullet follows. what I want it to do is after being fired should keep moving in the direction of the shot and not the player.</p>
  <p>codepen link ---&gt; <a href="https://codepen.io/robotosail/pen/abJLQKp" rel="nofollow noreferrer">https://codepen.io/robotosail/pen/abJLQKp</a></p>
  <pre><code>//the bullet code
  let bullets = [];
  function shootGun() {
    // increasing the bullets speed
    bullet.speedX = 3;
    bullets.push(bullet);
  }
  
  </code></pre>
  <p>In the controls section</p>
  <pre><code>for (let i = 0; i &lt; bullets.length; i++) {
    if (bullets[i] === undefined) continue;
    if (bullets[i].alive === false) {
      bullets.splice(i, 1);
      continue;
    }
  }
  
  if (punching) {
    arm1.position.x = 60;
    //the bullet
    //rotating the bullet
    shootGun();
    bullets.slice(bullet, 1);
  }
  
  </code></pre>
  <p>in the init function</p>
  <pre><code>bullet = new Bullet({
    x: ammo.position.x,
    y: ammo.position.y,
    width: ammo.style.width,
    height: ammo.style.height,
    color: &quot;black&quot;,
  });
  
  bullets.forEach((bullet) =&gt; {
    bullet.update();
    bullet.newPos();
    setTimeout(function () {
      bullet.alive = false;
    }, 1000);
  });
  </code></pre>
  <p>I have approached this problem to the best of my knowledge.
  please help!</p>