HTML5 Javascript Objekt wurde angeklickt

Question

Ich mache ein Spiel, wo Ihre Maus ein Fadenkreuz ist und Sie klicken auf Zombies über den Bildschirm bewegen. Ich habe Probleme herauszufinden, wie ich herausfinden kann, ob die Maus auf einen Zombie geklickt hat. Die Zombies werden in JavaScript erstellt, sodass ich das onclick-Attribut nicht in HTML verwenden kann. Das ist mein Code.

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

Dies ist die spezifische Stelle, wo ich, wenn der Zombie zu erkennen bin versucht wurde functio in meinem Update geklickt

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

Answer 1

ich nicht verwenden kann, das onclick Attribut in HTML.

Aber Sie können verwenden, um die addEventListener Methode in javascript:

zB.

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

Dies ist Pseudocode. Sie können ein Ereignis anhängen und Sie können nach x und y suchen.