Question

所以我在这里制作游戏有点困难。

我有一个画布，在那个画布中我有一个阵列可以容纳我所有的敌人。我想要它，这样如果你点击数组中的一个敌人，只有敌人会死。

我的问题在于点击事件。我希望敌人在点击时死亡，但我似乎无法获得任何点击事件（包括事件监听器或onclick方法）来为我定义的数组工作。

所以我的最后一个问题是：有没有办法让数组中的任何项目可点击？

Answer 1

canvas元素仅响应画布的click事件。我们可以得到鼠标的坐标，但我们需要自己比较鼠标的坐标和画布上的项目。

在下面的片段中，我创建了一个基本的例子，其中包含3个敌人。当您单击一个球时，它会从阵列中移除该敌人并将其重绘到屏幕上。现在，如果我们只是简单地比较鼠标和敌人的确切坐标，就很难点击它们。因为你需要点击敌人的x，y位置的确切像素。对于圆形敌人，我们可以找到＆＃34; circle＆＃34;通过使用距离公式和敌人的半径来点击敌人。我在一个名为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);
...

完整的代码段示例如下：

＆＃13;

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

＆＃13;

#canvas{ 
  border: 1px solid black; 
}

＆＃13;

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

＆＃13;

Answer 2

我个人在一个阵列中存放了所有敌人的位置，之后比较了mouseX和mouseY以及敌人的位置

选择一个数组？

2 个答案: