Rotate the user character on mouse position

I'm trying to get the character to rotate the character object based on where the mouse is.

So far I got it to rotate incrementally without mouse position. I was checking if it effected my zombie's chasing capabilities.

My script

let player, zombie, mouseX, mouseY;;

let bgCanvas = document.getElementById('backgroundCan');
function startGame() {
    document.getElementById("startScreen").style.display = "none";
    player = new playerComponent(350, 220);
    zombie = new zombieComponent(750, 220);
    gameArea.start();

}
let gameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 800;
        this.canvas.height = 500;
        this.canvas.style = "position: absolute";
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[2]);
        this.interval = setInterval(updateArea, 20);
        window.addEventListener('keydown', function (e) {
          gameArea.keys = (gameArea.keys || []);
          gameArea.keys[e.keyCode] = true;
        })
        window.addEventListener('keyup', function (e) {
          gameArea.keys[e.keyCode] = false;
        });
        this.canvas.addEventListener("mousemove", function(e){
          mouseX = e.clientX - ctx.canvas.offsetLeft;
          mouseY = e.clientY - ctx.canvas.offsetTop;
        });
        this.canvas.addEventListener("mousedown", function(e){
          let gShot = new Audio('assets/shot.mp3');
          gShot.play();
          var mX = e.clientX - ctx.canvas.offsetLeft;
          var mY = e.clientY - ctx.canvas.offsetTop;
          if(mX >= zombie.x && mX < zombie.x+zombie.w && mY >= zombie.y && mY < zombie.y+zombie.h){
            if(zombie.health > 0){
              zombie.health += -1;
              zombie.speedX += 10;

              zombie.newPos();
              zombie.update();
            }
            else {
              zombie.status = "dead";
            }
          }
        });
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}
function playerComponent(x, y){
    this.x = x;
    this.y = y;
    this.speedX = 0;
    this.speedY = 0;
    this.health = 10;
    this.status = "alive";
    let rotNum = 1;
    this.update = function(){
        ctx = gameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(rotNum * Math.PI / 180);
        playerSprite = new Image();
        playerSprite.src = "assets/playerGun.png";
        ctx.drawImage(playerSprite, 0, 0);
        ctx.restore();
        rotNum++;
    }
    this.newPos = function() {
      this.x += this.speedX;
      this.y += this.speedY;
    }

}
function updateArea() {
    gameArea.clear();
    if(player.status == "alive"){
      player.speedX = 0;
      player.speedY = 0;
      if (gameArea.keys && gameArea.keys[65]) {
        if(player.x > 20){
          player.speedX = -3;
        }
      }
      if (gameArea.keys && gameArea.keys[68]) {
        if(player.x < 740){
          player.speedX = 3;
        }
      }
      if (gameArea.keys && gameArea.keys[87]) {
        if(player.y > 20){
          player.speedY = -3;
        }
      }
      if (gameArea.keys && gameArea.keys[83]) {
        if(player.y < 445){
          player.speedY = 3;
        }
      }
      player.newPos();
      player.update();
    }
    if(zombie.status == "alive"){
      if(zombie.x > player.x){
        zombie.speedX = -1;
      }
      else{
        zombie.speedX = 1;
      }
      if(zombie.y > player.y){
        zombie.speedY = -1;
      }
      else{
        zombie.speedY = 1;
      }
      zombie.newPos();
      zombie.update();
    }
    else{
      zombie.update();
    }
}

So far, I have the mouse position on the canvas and am able to rotate the character, but I just don't how to connect the two. How should use the mouse position and the character position to rotate towards the mouse? The character is initially facing right (i think?), at least the sprite initially is.

1 answer

  • answered 2019-07-10 22:13 Phillip S

    Here's an image illustrating the situation: Image

    You have the mouseY, playerY and mouseX, playerX

    Therefore you can calculate the height and base of the triangle,
    Thus the angle with tan However, since in the first and third quadrants y/x will return an angle in the second and fourth quadrants, you need to use the Math.atan2(y,x) function in Javascript, not Math.atan(y/x).

    Then all you have to do is rotate based on the angle!

    (P.S. Remember that you may have to convert between radians and degrees)