Выберите массив?

Question

Так что я немного застрял, делая игру здесь.

У меня есть холст, и внутри этого холста у меня есть массив, чтобы держать всех моих врагов. Я хочу, чтобы, если вы нажмете на ОДНОГО врага в массиве, ТОЛЬКО, что противник умрет.

Проблема связана с событием click. Я хочу, чтобы противник умер, когда на него нажимали, но я не могу заставить какое-либо событие клика (включая прослушиватели событий или методы onclick) работать для моего определенного массива.

Итак, мой последний вопрос: есть ли способ сделать любой элемент в массиве кликабельным?

Answer 1

Полотна элемент только реакцию на событие нажатия холста. Мы можем получить координаты мыши, но нам нужно непосредственно сравнить координаты мыши и элементы на холсте.

В нижеприведенном фрагменте я создал базовый пример с тремя врагами как просто шары. Когда вы нажимаете на мяч, он удаляет этого врага из массива и перерисовывает его на экране. Теперь, если мы просто сравним точные координаты мыши и врага, было бы довольно сложно щелкнуть их. Поскольку вам нужно щелкнуть точный пиксель положения 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

Я Personaly запаса в массиве всех позиций ennemy и после этого сравнить mouseX и мышиный и possition в ennemy