通过精灵的旋转来旋转点击框的位置

时间:2019-07-11 04:09:02

标签: javascript html html5-canvas

我正在尝试将敌人的僵尸精灵向玩家旋转。到目前为止,旋转是有效的。但是我遇到了一个问题。我有一个鼠标侦听器,用于检查用户是否单击了僵尸。如果他们这样做了,那么僵尸就会受到伤害等等。但是现在,如果僵尸位于播放器后面,则它无法获得精灵的正确x和y点,因为仅精灵旋转而不是clickbox旋转。应该如何解决这个问题?

旋转的僵尸

function drawZombies(){
  let distY, distX;
  for(let i = 0; i < zombies.length; i++){
    if(zombies[i].status == "alive"){
      distY = zombies[i].y - player.y;
      distX = zombies[i].x - player.x;
      zombies[i].rotRad = Math.atan2(distY, distX);
      ctx = gameArea.context;
      ctx.save();
      ctx.translate(zombies[i].x, zombies[i].y);
      ctx.rotate(zombies[i].rotRad);
      zombieSprite = new Image();
      zombieSprite.src = zombies[i].sprite;
      ctx.drawImage(zombieSprite, 0, 0);
      ctx.restore();
    }
    else{
      ctx = bgCanvas.getContext("2d");
      zombieSprite = new Image();
      zombieSprite.src = "assets/zombieDead.png";
      ctx.drawImage(zombieSprite, zombies[i].x, zombies[i].y);
    }
  }
}

用于查看僵尸是否被击中的点击框

        this.canvas.addEventListener("mousedown", function(e){
          let gShot = new Audio('assets/shot.mp3');
          gShot.play();.
          let mX = e.clientX - ctx.canvas.offsetLeft;
          let mY = e.clientY - ctx.canvas.offsetTop;
          for(let i =0; i < zombies.length; i++){
            if(mX >= zombies[i].x && mX < zombies[i].x + zombies[i].w && mY >= zombies[i].y && mY < zombies[i].y + zombies[i].h){
              let gHit = new Audio("assets/hit.mp3");
              gHit.play();
              if(zombies[i].health > 0){
                zombies[i].health += -1;
                if(zombies[i].x < player.x){
                  zombies[i].speedX = -10;
                }
                else{
                  zombies[i].speedX = 10;
                }
                if(zombies[i].y < player.y){
                  zombies[i].speedY = -10;
                }
                else{
                  zombies[i].speedY = 10;
                }
                zombies[i].x += zombies[i].speedX;
                zombies[i].y += zombies[i].speedY;
                drawZombies();
              }
              else {
                zombies[i].status = "dead";
              }
            }
          }
        });

0 个答案:

没有答案
相关问题