Question

我正在制作一个游戏，其中玩家将使用他们的光标移动，并且必须躲避物体。每个对象都有一个命中框，因此我希望每当光标命中一个时，就可以更新生命数。我只是不确定跟踪所有点击框的有效方法。我还想记录光标与之碰撞的对象，以便可以计算奖励对象。这些对象不断地重生并移出画布，因此我认为保留所有命中框的数组将很快失去控制。这是一些我想做的代码和一些伪代码。

canvas.addEventListener("mousemove", e => {
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
  if (somehitboxX<=mouseX<=somehitboxX + 50 and somehitboxY<=mouseY<=somehitboxY + 50){
     doSomething
}

});

编辑：不是让我的光标跟踪所有的点击框，而是可以让点击框跟踪光标吗？也许通过向每个对象添加事件侦听器？如果可能的话，我该怎么做呢？

编辑：这是一些代码，可以更好地了解我的工作方式。表情符号对象是玩家需要躲避的东西。每个人都有一个表情符号，一个乐谱，坐标，速度，一个击中框和一个布尔值，说明是否被击中（尽管我不确定如何控制它，因为这是我需要的帮助）。

function Emoji(emojicon, score, x, y, speed) {
  this.emojicon = emojicon;
  this.score = score;
  this.x = x;
  this.y = y;
  this.speed = speed;
  this.hitbox = { hbx: x, hby: y - 50, hbWidth: 50, hbHeight: 50 };
  this.hit = false;
}

表情符号对象初始化如下：

  var xPos = 0;
  for (var i = 0; i < 9; i++) {
    var emo = new Emoji("?", 5, xPos, 520, 1);
    emojis.push(emo);
    xPos += 55;
  }
  emojis.forEach(emoji => drawEmoji(emoji));
}

然后Emoji.prototype.update同时更新表情符号及其点击框的坐标：

Emoji.prototype.update = function() {
  if (this.y < 520) {
    this.y -= this.speed;
    this.hitbox.hby = this.y - 50;
  } else {
    var flip = Math.floor(Math.random() * 1000);
    if (flip == 1) {
      this.y -= this.speed;
      this.hitbox.y = this.y - 50;
    }
  }
};

我希望这是足够的代码来了解我到目前为止的情况。

如何检测JavaScript与JavaScript中多个移动物体的碰撞？

0 个答案: