Question

我试图让角色根据鼠标的位置旋转角色对象。

到目前为止，我已经知道它可以在没有鼠标位置的情况下逐渐旋转。我正在检查它是否影响了僵尸的追逐能力。

我的脚本

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();
    }
}

到目前为止，我在画布上具有鼠标位置，并且能够旋转角色，但是我只是不知道如何将两者连接起来。应该如何使用鼠标位置和字符位置向鼠标旋转？角色最初面向右边（我认为吗？），至少最初是精灵。

Answer 1

以下是说明情况的图片： {{3}}

您有mouseY，playerY和mouseX，playerX

因此，您可以计算三角形的高度和底数，
因此与 $tan^{-1}(\frac{mouseY-playerY}{mouseX-playerX})$ 的角度但是，由于在第一象限和第三象限中y / x将在第二象限和第四象限中返回一个角度，因此您需要在Javascript中使用Math.atan2（y，x）函数，而不是Math.atan（y / x）。

然后您要做的就是根据角度旋转！

（P.S。请记住，您可能必须在弧度和度之间进行转换）

在鼠标位置上旋转用户角色

1 个答案: