Canvas贪吃蛇项目：碰撞物体时如何实现随机播放不同音频

你当前的写法无法实现随机播放的核心原因是：<audio> 标签内的多个 <source> 标签是浏览器的兼容降级方案，只会选择第一个可播放的资源加载，不会用于多音频切换。

1. 修改HTML代码 #

删除原页面中的 <audio id="sesefekt"> 相关代码，不需要在DOM中预定义音频标签。

2. 修改JavaScript代码 #

基础实现方案（新手友好，无需预加载） #

替换原来的音频变量定义，修改碰撞时的播放逻辑：

// 替换原来的 let audio = document.getElementById("sesefekt"); 代码
// 数组内填写你所有要使用的音频文件路径
const audioList = ["bruh.mp3", "a.mp3"];

// 仅修改checkAppleCollision函数里的播放部分
function checkAppleCollision() {
    if(appleX == headX && appleY == headY){
        appleX = Math.floor(Math.random() * tileCount);
        appleY = Math.floor(Math.random() * tileCount);
        // 随机生成数组下标
        const randomIndex = Math.floor(Math.random() * audioList.length);
        // 动态创建音频实例播放
        const randomAudio = new Audio(audioList[randomIndex]);
        randomAudio.play().catch(err => console.log("音频播放错误", err));
    }
}

优化方案（解决首次播放延迟问题） #

如果发现音频首次播放有延迟，可以预加载所有音频资源：

// 预加载所有音频到数组
const audioList = [new Audio("bruh.mp3"), new Audio("a.mp3")];

function checkAppleCollision() {
    if(appleX == headX && appleY == headY){
        appleX = Math.floor(Math.random() * tileCount);
        appleY = Math.floor(Math.random() * tileCount);
        const randomIndex = Math.floor(Math.random() * audioList.length);
        // 重置播放进度到开头，避免重复播放同一音频时无法触发
        audioList[randomIndex].currentTime = 0;
        audioList[randomIndex].play().catch(err => console.log("音频播放错误", err));
    }
}

• 确保数组里填写的音频路径和HTML文件的相对路径匹配
• 浏览器默认禁止未交互的页面自动播放音频，你的游戏需要用户先按键操作，这个限制不会影响正常功能
• 后续新增音频只需要往audioList数组里添加对应路径即可，无需修改其他逻辑

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