Rotate towards mouse and shoot in that direction

Hello people, let's create a simple 2d shooter. And now as always, let's take care of copy/paste people by giving them what they want and move on :)

preview

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});  
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a texture from an image path
var texture = PIXI.Texture.fromImage('assets/bunny.png');  
var carrotTex = PIXI.Texture.fromImage('assets/carrot.png');

// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprite's anchor point
bunny.anchor.x = 0.5;  
bunny.anchor.y = 0.5;

// move the sprite to the center of the screen
bunny.position.x = 200;  
bunny.position.y = 150;

var background = new PIXI.Graphics();  
background.beginFill(0x123456);  
background.drawRect(0,0,800,600);  
background.endFill();  
stage.addChild(background);

stage.addChild(bunny);

stage.interactive = true;

stage.on("mousedown", function(e){  
  shoot(bunny.rotation, {
    x: bunny.position.x+Math.cos(bunny.rotation)*20,
    y: bunny.position.y+Math.sin(bunny.rotation)*20
  });
})

var bullets = [];  
var bulletSpeed = 5;

function shoot(rotation, startPosition){  
  var bullet = new PIXI.Sprite(carrotTex);
  bullet.position.x = startPosition.x;
  bullet.position.y = startPosition.y;
  bullet.rotation = rotation;
  stage.addChild(bullet);
  bullets.push(bullet);
}

function rotateToPoint(mx, my, px, py){  
  var self = this;
  var dist_Y = my - py;
  var dist_X = mx - px;
  var angle = Math.atan2(dist_Y,dist_X);
  //var degrees = angle * 180/ Math.PI;
  return angle;
}

// start animating
animate();  
function animate() {  
  requestAnimationFrame(animate);

  // just for fun, let's rotate mr rabbit a little
  bunny.rotation = rotateToPoint(renderer.plugins.interaction.mouse.global.x, renderer.plugins.interaction.mouse.global.y, bunny.position.x, bunny.position.y);

  for(var b=bullets.length-1;b>=0;b--){
    bullets[b].position.x += Math.cos(bullets[b].rotation)*bulletSpeed;
    bullets[b].position.y += Math.sin(bullets[b].rotation)*bulletSpeed;
  }
  // render the container
  renderer.render(stage);
}

To further improve this code, you should remove bullets when they hit something or get out of the screen. I use bullet manager class to recycle sprites instead of removing them and creating new ones. With any serious game you'll eventually want to avoid Garbage Collector calls and to save memory. You can also adjust functions to include distance from player and to add an offset to initial coordinates (like if you want to give a gun to the bunny), something like this:

{
  x: bunny.position.x+Math.cos(bunny.rotation)*distance+offset.x,
  y: bunny.position.y+Math.sin(bunny.rotation)*distance+offset.y
}

I'll have to make our illustrator Pjero draw a carrot gun so we can rotate that instead of the bunny but for quick and simple tutorial it will serve the purpose and push you in the right direction.

This tutorial can also be further improved with your suggestion so use that weird thing below this article in which you can write something so I can read it later.