如何在p5.js/p5.play中实现精灵碰撞/重叠后播放爆炸动画

核心逻辑是碰撞触发时，在碰撞位置生成临时的爆炸动画精灵，播放完成后自动销毁即可，你只需要做2处修改：

1. 给你预加载好的爆炸动画添加基础配置（加在loadAnimation代码后面即可）

explosion.frameDelay = 2; // 数值越大动画播放速度越慢，可自行调整
explosion.looping = false; // 设置为仅播放一次，不循环

2. 修改explode碰撞回调函数，同时删掉drawBullets里多余的爆炸音效播放逻辑：

function explode(sprite, obstical) { 
    // 取小行星的位置作为爆炸播放位置
    const explodePosX = obstical.position.x;
    const explodePosY = obstical.position.y;

    // 创建临时爆炸精灵
    const boomSprite = createSprite(explodePosX, explodePosY);
    boomSprite.addAnimation('explode', explosion);
    boomSprite.life = 50; // 生命周期设置为50帧，刚好覆盖你48帧的爆炸动画，播放完自动销毁
    // 如果爆炸尺寸不合适可以加下面这行调整缩放比例
    // boomSprite.scale = 1.5;

    // 销毁子弹和小行星
    sprite.remove();
    obstical.remove();
    explodeSound.play();
}

function drawBullets() { 
    pew.overlap(rock, explode);
    // 删掉原来这里的explodeSound.play()，不然每次发射子弹都会误播爆炸音效
    bulletArray[bullCount].attractionPoint(4, mouseX, mouseY);
    bullCount++;
}

如果你还需要实现小行星撞炮塔的爆炸效果，原来的drawAsteroid里的rock.overlap(turret, explode)逻辑不用改，可直接复用上述爆炸逻辑。

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