HTML5 Javascript对象已被点击

我正在制作一个游戏，其中你的鼠标是一个十字型头发，并且你点击僵尸在屏幕上移动。我有麻烦找出如何找到如果鼠标点击僵尸。僵尸是用JavaScript制作的，所以我不能在HTML中使用onclick属性。这是我的代码。HTML5 Javascript对象已被点击

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

来源

2016-12-16 Chase Smith

在HTML我不能使用onclick属性的具体位置。

但是你可以使用在JavaScript的addEventListener方法：

如。

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

来源

2016-12-16 18:14:21 Rounin

似乎没有工作。我尝试在update方法中添加事件侦听器，并在僵尸方法的I.draw方法中尝试使用。 –

这绝对有效。别的东西不会工作。您可以在整个代码中部署'console.log'消息来找出哪些不起作用。 – Rounin

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。

来源

2016-12-16 18:20:53

HTML5 Javascript对象已被点击

回答

相关问题