我正在尝试将敌人的僵尸精灵向玩家旋转。到目前为止,旋转是有效的。但是我遇到了一个问题。我有一个鼠标侦听器,用于检查用户是否单击了僵尸。如果他们这样做了,那么僵尸就会受到伤害等等。但是现在,如果僵尸位于播放器后面,则它无法获得精灵的正确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";
}
}
}
});