HTML5 Объект Javascript был нажат

Question

Я делаю игру, где ваша мышь является перекрестием, и вы нажимаете на зомби, перемещающиеся по экрану. У меня возникают проблемы, когда выясняется, как найти, щелкнула ли мышь зомби. Зомби сделаны в JavaScript, поэтому я не могу использовать атрибут onclick в HTML. Это мой код.

var mouseX; 
var mouseY; 

$(document).ready(function(){ 
var canvasWidth = 640; 
var canvasHeight = 480; 

var canvas = $("#gameCanvas")[0]; 
var context = canvas.getContext("2d"); 

var score = 0; 
var timer = 0; 
var spawnZombie = false; 

//crosshair 
var crossHair = new Image(); 
var crosshairX = 50; 
var crosshairY = 50; 
crossHair.src = "media/crosshair.png"; 

//zombies 
var zombies = []; 
var zombieLeft = new Image(); 
zombieLeft.src = "media/zombieLEFT.gif"; 
var zombieRight = new Image(); 
zombieRight.src = "media/zombieRIGHT.gif"; 

var fps = 30; 
setInterval(function(){ 
    update(); 
    draw(); 
}, 1000/fps); 

function update(){ 
    timer += 1; 

    crosshairX = mouseX - 445; 
    crosshairY = mouseY - 125; 

    if(timer >= 70){ 
     timer = 0; 
     spawnZombie = true; 
    } 

    zombies.forEach(function(zombie) { 
     zombie.update(); 
     document.body.onmousedown = function() { 
      console.log(zombie.x.toString() + ", " + zombie.y.toString()); 
      //if(mouseX) 
     }; 
    }); 

    zombies = zombies.filter(function(zombie){ 
     return zombie.active; 
    }); 

    if(spawnZombie){ 
     zombies.push(Zombie(null, "left")); 
     zombies.push(Zombie(null, "right")); 
     spawnZombie = false; 
    } 
} 
function draw(){ 
    context.clearRect(0,0, canvasWidth, canvasHeight); 

    context.fillStyle = "#000"; 
    context.font = "20px Comic Sans MS"; 
    context.fillText("Score: " + score, 50, 50); 

    zombies.forEach(function(zombie) { 
     zombie.draw(); 
    }); 

    context.drawImage(crossHair, crosshairX, crosshairY, 100, 100); 
} 

function Zombie(I, dir){ 
    I = I || {}; 
    I.active = true; 

    I.speed = 5; 

    I.y = getRandomInt(50, 350); 
    if(dir == "left"){ 
     I.x = 800; 
    } 
    else if(dir == "right"){ 
     I.x = -100; 
    } 
    I.width = 100; 
    I.height = 100; 

    I.inBounds = function() { 
     return I.x >= 0 && I.x <= canvasWidth && 
     I.y >= 0 && I.y <= canvasHeight; 
    }; 

    I.draw = function(){ 
     if(dir == "left"){ 
      context.drawImage(zombieLeft, this.x, this.y, this.width, this.height); 
     } 
     else if(dir == "right"){ 
      context.drawImage(zombieRight, this.x, this.y, this.width, this.height); 
     } 
    }; 

    I.update = function(){ 
     if(dir == "left"){ 
      this.x -= this.speed; 
     } 
     else if(dir == "right"){ 
      this.x += this.speed; 
     } 
    }; 

    I.onclick = function(){ 
     I.remove(); 
    }; 
    return I; 
} 

function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
}); 
$(document).on("mousemove", function(event) { 
    mouseX = event.pageX; 
    mouseY = event.pageY; 
}); 

Это конкретное место, где я пытаюсь обнаружить, если зомби был нажат в течение моего обновления ФУНКЦИИ

zombies.forEach(function(zombie) { 
      zombie.update(); 
      document.body.onmousedown = function() { 
       console.log(zombie.x.toString() + ", " + zombie.y.toString()); 
       //if(mouseX) 
      }; 
     }); 

Answer 1

Я не могу использовать атрибут onclick в HTML.

Но вы можете использовать метод addEventListener в вашем JavaScript:

например.

zombieLeft.addEventListener('click', myFunction, false); 

Answer 2

document.body.onmousedown = function(event) { 
      console.log(zombie.x.toString() + ", " + zombie.y.toString()); 
      if(event.pageX == zombie.x && event.pageY == zombie.y){ 
      //Zombie clicked 
      } 
     }; 

Это псевдо-код. Вы можете присоединить событие, и вы можете проверить x и y.