選擇一個數組？

Question

所以我有點卡在這裏做遊戲。

我有一個畫布，在那個畫布中我有一個陣列可以容納我所有的敵人。我需要它，所以如果你點擊陣列中的一個敵人，只有那個敵人會死。

我的問題在於點擊事件。我希望敵人死後點擊，但我似乎無法得到任何點擊事件（包括事件偵聽器或onclick方法）爲我定義的數組工作。

所以我最後的問題在這裏是：有沒有辦法讓任何項目在數組中點擊？

Answer 1

canvas元素唯一的反應到畫布的單擊事件的possition。我們可以獲得鼠標的座標，但是我們需要比較鼠標和畫布上的項目的座標。

在下面的代碼片段中，我創建了一個基本的例子，其中3個敵人就像一個簡單的球。當你點擊一個球時，它將從陣列中移除敵人，並將它們重新繪製到屏幕上。現在，如果我們簡單地比較鼠標和敵人的確切座標，很難點擊它們。因爲你需要點擊敵人的x，y位置的確切像素。對於圓形敵人，我們可以使用距離公式和敵人的半徑找到被點擊的敵人的「圓圈」。我注意到，在一個函數調用selectEnemy()：

function selectEnemy(X, Y){ 
    for(var i = 0; i < enemies.length; i++) { 
     if(dist(X, Y, enemies[i].x, enemies[i].y) < enemies[i].r) return i; 
    } 
    return -1; 
} 

這樣做是比較鼠標在這個例子中的座標X,Y，每個敵人的座標。如果我們點擊敵人（，敵人中心的距離小於它們的半徑），那麼這將返回它們在陣列中的索引位置。如果他們中沒有人點擊我們返回-1。後來我們就可以使用該索引從數組中刪除：

... 
// Get the enemy the mouse clicked 
var removal = selectEnemy(canvasX, canvasY); 
// If we clicked a enemy, remove it from the array 
if (removal > -1) enemies.splice(removal, 1); 
... 

完整的片段例子如下：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var enemies = [new Enemy(100,100,10), new Enemy(200,100,10), new Enemy(300,100,10)]; 
 

 
canvas.addEventListener("click", function(e) 
 
{ 
 
    var cRect = canvas.getBoundingClientRect(); 
 
    // Get the mouse coords 
 
    var canvasX = e.clientX - cRect.left; 
 
    var canvasY = e.clientY - cRect.top; 
 
    // clear the canvas 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    // Get the enemy the mouse clicked 
 
    var removal = selectEnemy(canvasX, canvasY); 
 
    // If we clicked a enemey, remove it from the array 
 
    if (removal > -1) enemies.splice(removal, 1); 
 
    // Draw the enemies from the array 
 
    drawAll(); 
 
}); 
 

 
function Enemy(x, y, r) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.r = r; 
 
    
 
    this.draw = function() { 
 
     ctx.beginPath(); 
 
     ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); 
 
     ctx.fillStyle = 'red'; 
 
     ctx.fill(); 
 
    } 
 
} 
 

 
function selectEnemy(X, Y){ 
 
    for(var i = 0; i < enemies.length; i++) { 
 
     if(dist(X, Y, enemies[i].x, enemies[i].y) < enemies[i].r) return i; 
 
    } 
 
    return -1; 
 
} 
 

 
function drawAll() { 
 
    for(var i = 0; i < enemies.length; i++) enemies[i].draw(); 
 
} 
 

 
function dist(x1, y1, x2, y2) { 
 
    return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)); 
 
} 
 
drawAll();

#canvas{ 
 
    border: 1px solid black; 
 
}

<canvas id="canvas" width=400 height=200></canvas>

Answer 2

我本人來說股票在陣列中的ennemy的所有位置，之後比較mouseX和mouseY的和ennemy