Bullet go on mouse position

[eihks]

Hello guys,

I'm trying to make a little game with pixi,

My character can shoot fireball, but i want to them they go on the mouse position (current cursor position) like the screen.

here my bullet code if you need it

//create fireball

       var fireball = new PIXI.Texture.fromImage("public/tileset/fireball1.png");
        var bullets = [];
        var bulletSpeed = 1;

        function shoot(x,y, mX, mY){ //mX and mY = mouseX mouseY
            var fb = new PIXI.Sprite(fireball);
            fb.x = x;
            fb.y = y;
            fb.goToX = mX;
            fb.goToY = mY;
            app.stage.addChild(fb);
            bullets.push(fb);
        }

        document.addEventListener("click", function(e){
            shoot(player.x,player.y,e.clientX, e.clientY);
            console.log(fireball);
        })

function animate(e){
            requestAnimationFrame(animate);

            for(var b=bullets.length-1;b>=0;b--){
                bullets[b].x += bulletSpeed;
                bullets[b].y -= bulletSpeed;
            }
        }
        animate();

I tried to make it but was not fonctionnal haha.

If someone have a idea for do it let me know please !

Thanks  and sorry for my bad english ! 

 

[Exca]

Calculate a vector from player to target, then normalize it and then on each render pass just add the vector amount multiplied by speed to bullets position.

Short pseudoexample:
 

var bulletSpeed = 5;
var bullets = [];

function shoot(){
  var direction = new Point();
  direction.x = target.x - player.x;
  direction.y = target.y - player.y);

  //Normalize
  var length = Math.sqrt( direction.x*direction.x + direction.y*direction.y);
  direction.x/=length;
  direction.y/=length;

  var bullet = new Sprite();
  bullet.direction = direction;
  bullets.push(bulllet);
  app.stage.addChild(bullet);
}


function animate(){
  for( var i = 0; i < bullets.length; i++){
    bullet.x += bullet.direction.x*bulletSpeed;
    bullet.y += bullet.direction.y*bulletSpeed;
    //Hit detection here
  }
}

I can make a proper example at some point if needed.

[eihks]

Ah it's perfect thanks ! 

Can you try to explain me how this work exactly please ? 

Big thanks !

[Exca]

I made an image of the maths related to this. Hopefully it helps.

[eihks]

Thanks man, u are awesome ! 

[Mesic Selim]

I just want to THANK YOU, Exca. This post will help me a lot ! ?