So im doing this program where i want my hero to shoot to the direction its facing , but for this job to get done i need to calculate the angle my hero is facing with Math.atan2() , atleasts thats what i read from this site: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" but i still couldn't figure out how to do it , if someone can help me ill be greatful.

//this is the bullet object i want to move in the direction the player is 
function Bullet(x, y){
    this.x = x;
    this.y = y;
    this.toDelete = false;
    this.show = function(){
        ctx.arc(this.x, this.y, 7, 2, Math.PI*2);
        ctx.fillStyle = "grey";
    this.move = function(){
        this.x = this.x + 5;
    this.deletion = function(){
        this.toDelete = true;

//this is the hero object the bullets are shooting off of.
function Hero(){
    this.sprite = sprite;
    this.x = 0;
    this.y = canvas.height/2;
    this.imgWidth = 128;
    this.imgHeight = 192;
    this.frameWidth = this.imgWidth / 4;
    this.frameHeight = this.imgHeight / 4;
    this.dx = 5;
    this.dy = -5;
    this.health = 100;
    this.directionMode = 2;
    this.currentFrame = 0;
    this.updateFrame = function(){
        this.currentFrame += 0.2;
    this.showHealth = function (){
            ctx.fillRect(this.x,this.y - 10,(this.health/100)*50,5);
            ctx.strokeRect(this.x, this.y-10, (100/100) * 50, 5);
    this.show = function(){
        if(downPressed != true && upPressed != true && leftPressed != true && rightPressed != true){
            this.directionMode = 0;
            this.currentFrame = 0;
        this.walkingMode = Math.floor(this.currentFrame) % 4;
        ctx.drawImage(this.sprite,this.walkingMode * this.frameWidth, this.directionMode * this.frameHeight, this.frameWidth, this.frameHeight, this.x, this.y, this.frameWidth, this.frameHeight );
    this.update = function(){
    if(rightPressed && this.x < canvas.width - this.imgWidth/4){
            this.x = this.x + this.dx;
    if (leftPressed && this.x > 0 ){
            this.x = this.x - this.dx;
    if (upPressed && this.y > 0 ){
            this.y = this.y + this.dy;
    if (downPressed && this.y < canvas.height - this.imgHeight/4){
            this.y = this.y - this.dy;

So i want the bullets to go to the direction the player is facing , but how do i calculate the position my hero is facing.

  • \$\begingroup\$ It looks like you're already computing motion in terms of x & y increments, ie. a cartesian vector. This may be a better representation of your aiming direction than an angle, because you can skip all the trigonometry entirely. Is an angle required for your uses? \$\endgroup\$ – DMGregory Jul 9 '19 at 15:34
  • \$\begingroup\$ no i just want my player to shoot to the direction he is facing \$\endgroup\$ – Chrissisbeast Jul 9 '19 at 16:24
  • \$\begingroup\$ right now my character is only shooting to the right , no matter of the direction he is facing , but i want to change that \$\endgroup\$ – Chrissisbeast Jul 9 '19 at 16:27
  • \$\begingroup\$ @Chrissisbeast store the cartesian vector of the facing direction somewhere in your code and use that as the shooting direction, by multiplying that vector by the bullet velocity. \$\endgroup\$ – Ocelot Jul 9 '19 at 16:32
  • \$\begingroup\$ can you explain what is certesian vector and if you can help me with the code ill be so happy because im still a beginner / intermediate \$\endgroup\$ – Chrissisbeast Jul 9 '19 at 16:35

If you have a position of your character and position he's aiming at, to calculate angle between those two points, you need to do the following:

Math.atan2(aim_y - character_y, aim_x - character_x);

By subtracting character coordinates from aim coordinates we get a vector from character to the aim. Then we use this vector coordinates as an argument for the Math.Atan2(y, x) function;

Math.atan2(y, x) returns radians, so if you need to degrees, you need to multiply the result by 180 and divide by the Pi.

degrees = radians * 180 / Math.PI;

That is what the documentation page says.

| improve this answer | |
  • \$\begingroup\$ uhm , the problem is i don't know how to calculate the position he's aiming at and if you could give me an example of how i can do that :) \$\endgroup\$ – Chrissisbeast Jul 9 '19 at 14:38
  • \$\begingroup\$ @Chrissisbeast how would I know how to calculate the position if you didn't give any information what you have done so far? Edit your question to include as much information as possible. \$\endgroup\$ – Ocelot Jul 9 '19 at 14:57
  • \$\begingroup\$ i editted my question. \$\endgroup\$ – Chrissisbeast Jul 9 '19 at 15:08
  • \$\begingroup\$ @Chrissisbeast just literally do same thing you do for your movement. If aim is not separated from the movement, that is. \$\endgroup\$ – Ocelot Jul 9 '19 at 16:11

Well if it's a web 2D game then you character direction can be represented as a vector, let's call it playerPointingDirection.

Let say that your character is pointing to the right of your screen, that would mean that your "normalized" vector would be in JavaScript as var playerPointingDirection = {x:1,y:0}.

To move a projectile coming from the player position, you would instantiate the projectile in the player position and add this vector to the current projectile position multiplied by the projectile velocity the result value would be the position of the projectile in the next frame.

You could also use something call raycasting.

If you are very new to game development, I would suggest you to pick up a Math book for game development, I would suggest you:

3D Math Primer for Graphics and Game Development (2nd Edition) by Fletcher Dunn and Ian Parberry

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.