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對象已被點擊

回答

相關問題