每次碰到物体时，如何在画布上添加随机音频？答案

【问题标题】：How can I add random audio on canvas everytime I hit an object?每次碰到物体时，如何在画布上添加随机音频？
【发布时间】：2022-01-06 17:28:18
【问题描述】：

我是编程新手。我试图用画布做一个蛇游戏。每次遇到障碍物时，我都想添加一个随机音频。当我添加一个音频时，它工作得很好，但我不能用两个音频做同样的事情。我尝试使用数组等，但没有奏效。我该怎么做？

JAVASCRIPT

const canvas = document.getElementById('oyun');
const ctx = canvas.getContext('2d');

let speed = 7;

let tileCount = 24;
let tileSize = canvas.width / tileCount - 2;
let headX = 12;
let headY = 12;

let appleX = 5;
let appleY = 5;

let audio = document.getElementById("sesefekt");

let xVelocity = 0;
let yVelocity = 0;

 function drawGame(){
     changeSnakePosition();
     checkAppleCollision();
     clearScreen();
     drawApple();
     drawSnake(); 
     setTimeout(drawGame, 1000 / speed);
 }

 function clearScreen(){
     ctx.fillStyle = '#a40af7';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 }

 function drawSnake() {
     ctx.fillStyle = 'purple';
     ctx.fillRect(headX * tileCount, headY * tileCount, tileSize,tileSize);
 }

 function changeSnakePosition() {
     headX = headX + xVelocity;
     headY = headY + yVelocity;
 }

 function drawApple() {
     ctx.fillStyle = "plum";
     ctx.fillRect(appleX * tileCount, appleY * tileCount, tileSize, tileSize);
 }

function checkAppleCollision() {
    if(appleX == headX && appleY == headY){
        appleX = Math.floor(Math.random() * tileCount);
        appleY = Math.floor(Math.random() * tileCount);
        audio.play();  
    }
}

//hareket etme fonksiyonları
document.body.addEventListener('keydown', keyDown);

function keyDown(event) {
    //yukarı
    if (event.keyCode == 38){
        if(yVelocity == 1)
            return;
        yVelocity = -1;
        xVelocity = 0;
    }
    //aşağı
    if (event.keyCode == 40){
        if(yVelocity == -1)
            return;
        yVelocity = 1;
        xVelocity = 0;
    }
    //sağ
    if (event.keyCode == 39){
        if(xVelocity == -1)
            return;
        yVelocity = 0;
        xVelocity = 1;
    }
    //sol
    if (event.keyCode == 37){
        if(xVelocity == +1)
            return;
        yVelocity = 0;
        xVelocity = -1;
    }
}

 drawGame();

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SNAKE YILANNNNNN</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: black;   
        }
        canvas{
            box-shadow: darkmagenta 20px 10px 50px;
        }
    </style>
</head>
<body>
   <audio id="sesefekt">
        <source src="bruh.mp3" type="audio/mp3">
        <source src="a.mp3" type="audio/mp3">
    </audio>

    <h1 style="color: blueviolet; text-shadow: lightblue 20px 10px 50px;">YILAN OYUNU AMA BİR DEĞİŞİK</h1>

    <canvas id="oyun" width="576" height="576"></canvas>
    
    <script src="index.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html canvas audio

【解决方案1】：

现在，每次发生碰撞时，您基本上都是在玩游戏。如果声音效果已经在播放，则无法再次启动。我能想到的解决方法有以下几种：

在需要播放声音效果时创建一个新元素，并在效果完成后立即删除它
使用这样的 API/框架 reference examples

【讨论】：

谢谢我去试试