P5.Play如何实现子弹精灵到达鼠标点击坐标后自动移除？

解决方案 #

1. 首先给每个子弹存储点击时的目标坐标，避免后续鼠标移动影响判定，同时建议用专门的子弹组管理所有子弹实例，防止全局变量覆盖导致多子弹逻辑异常

• 先在全局作用域声明子弹组：

let bullets = new Group();

• 修改mousePressed里的子弹创建逻辑，给子弹添加自定义目标属性，同时把子弹加入组：

function mousePressed() { 
    let bullet;
    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)
    }

    bullet.addImage(bulletSprite);
    bullet.attractionPoint(10, mouseX, mouseY);
    bullet.rotateToDirection = true;
    // 给子弹新增自定义属性，存储当前点击的目标坐标
    bullet.targetX = mouseX;
    bullet.targetY = mouseY;
    // 加入子弹组
    bullets.add(bullet);
}

2. 在draw函数中添加子弹到达判定逻辑，因为子弹是帧动画移动，不会刚好完全贴合目标坐标，所以设置5px的误差阈值即可：

function draw() {
    // 原有draw逻辑保留，新增以下判定
    for (let i = bullets.length - 1; i >= 0; i--) {
        let b = bullets[i];
        // 计算当前子弹到目标点的距离
        let distToTarget = dist(b.position.x, b.position.y, b.targetX, b.targetY);
        // 距离小于5px判定到达目标
        if (distToTarget < 5) {
            // 这里可以加爆炸效果逻辑，比如生成爆炸精灵、播放音效
            b.remove(); // 销毁子弹
        }
    }
    drawSprites();
}

注意：用倒序遍历子弹组是为了避免删除元素后数组索引偏移导致的漏判问题

内容的提问来源于stack exchange，提问作者KodyJH