如何在到达 mouseX 和 mouseY 后删除 'bullet ' 精灵？ [P5.Play]

Question

我正在使用 P5.Play 制作游戏，我有 3 个方尖碑；一个在左边，一个在右边，一个在中间。我已经做到了，如果我的鼠标位置在 canvas 的特定区域内，最近的方尖碑将朝我的鼠标位置射击。但是，我正在努力寻找一种方法，让精灵在到达我单击鼠标时的 x 和 y 点后爆炸。我不会 post 我的完整代码，因为它用于作业，但这是一个片段。

function mousePressed() { 
    if (mouseX < width / 3) {
        bullet = createSprite(obelisks[0].position.x, obelisks[0].position.y - 60, 20, 20)
    } else if (mouseX > width / 3 && mouseX < width - width / 3) {
        bullet = createSprite(obelisks[1].position.x, obelisks[1].position.y - 60, 20, 20)
    } else {
        bullet = createSprite(obelisks[2].position.x, obelisks[2].position.y - 60, 20, 20)
    }

    // if bullet position is less than the distance between firing point and cursor position, then remove bullet??

    bullet.addImage(bulletSprite);
    bullet.attractionPoint(10, mouseX, mouseY);
    bullet.rotateToDirection = true;
}

Answer 1

首先感谢您向我介绍p5.play！

这里有几件事需要考虑，但你已经很接近了。从 reading the documentation 开始，sprite 对象上有一个名为 overlapPoint(pointX, pointY) 的函数，其中：

Checks if the given point is inside the sprite's collider.

这 returns 一个布尔值。我们可以利用它来确定我们的子弹是否到达了目的地。

首先，让我们在对象上定义 destinationX 和 destinationY 属性：

function mousePressed() {
  ...
  bullet = createSprite(width/2, height, 10, 10);
  let destinationX = mouseX;
  let destinationY = mouseY;
  
  bullet.attractionPoint(10, destinationX, destinationY);
  bullet.destinationX = destinationX;
  bullet.destinationY = destinationY;
}

现在，我们可以使用这些属性来确定我们是否达到了重叠点：

function draw() {
  background(220);
  drawSprite(obelisk);
  
  if (bullet) {
    drawSprite(bullet);
    if (bullet.overlapPoint(bullet.destinationX, bullet.destinationY)) {
      bullet.remove();
    }
  }
}

这是一个有效的简化示例：

let obelisk;
let bullet;

function setup() {
  createCanvas(400, 400);
  obelisk = createSprite(width/2, height, 50, 200);
}

function draw() {
  background(220);
  drawSprite(obelisk);
  
  if (bullet) {
    drawSprite(bullet);
    if (bullet.overlapPoint(bullet.destinationX, bullet.destinationY)) {
      bullet.remove();
    }
  }
}


function mousePressed() {
  bullet = createSprite(width/2, height, 10, 10);
  let destinationX = mouseX;
  let destinationY = mouseY;
  
  bullet.attractionPoint(10, destinationX, destinationY);
  bullet.destinationX = destinationX;
  bullet.destinationY = destinationY;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

下面是 link 到 p5.js sketch I created，以进一步帮助您。

希望这能为您指明正确的方向。我可能还建议你创建一个子弹数组，例如：let bullets = [] 并在你射击时添加到这个数组中，这将防止在快速连续射击时删除一颗子弹。或者你甚至可以查看 p5.play 的 grouping object.

如何在到达 mouseX 和 mouseY 后删除 'bullet ' 精灵？ [P5.Play]

How to remove a 'bullet ' sprite after it has reached mouseX and mouseY? [P5.Play]

p5.js