アレイを選択しますか？

Question

私はちょっとここで試合をしています。

私はキャンバスを持っており、そのキャンバス内に私はすべての敵を収容する配列を持っています。配列内の1つの敵をクリックすると、その敵だけが死ぬことになるので、それが欲しい。

私の問題は、クリックイベントにあります。私はクリックしたときに敵が死ぬことを望んでいますが、私は定義された配列で動作するようなクリックイベント（イベントリスナーやonclickメソッドを含む）を得ることはできません。

私の最終的な質問は次のとおりです。配列内のアイテムをクリック可能にする方法はありますか？

Answer 1

canvas要素キャンバスのクリックイベントにのみ応答を比較しました。マウスの座標を取得できますが、マウスの座標とキャンバス上の項目を自分で比較する必要があります。

以下のスニペットでは、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のpossition