p5.js 中的音效数组

Question

我的目标是让风暴骑兵 img 在屏幕上弹跳并在点击后发出声音。我已经设法实现了这一点，但现在我想添加更多音效（也许还有两个）。我也希望声音效果随机化。我尝试了一个数组，但我似乎无法弄明白。

var img;
var trooper;
var soundFx;

function preload() {

 img = loadImage("stormy3.png");
 sfx1 = loadSound('Followme(1).mp3');
 sfx2 = loadSound('LetmeseeyourID.mp3');

}

function setup() {
 soundFormats('mp3');
 soundFx = sfx1;
 // background(255, 0, 0, 0.4);
 background(0);
 var myCanvas = createCanvas(800, 800);
 myCanvas.position(0, 0);
 trooper = new storm(random(width),random(height));
}

function draw() {
 // clear();
 background(0);
 trooper.show();
 trooper.update();
}
function mousePressed() {
 trooper.clicked();
}
function storm(x,y) {

 this.x = x;
 this.y = y;
 this.xSpeed = 3;
 this.ySpeed = 3;
 this.img = img;

 this.show = function() {
  image(img,this.x,this.y);
};

this.update = function() {

this.x = this.x + this.xSpeed;
this.y = this.y + this.ySpeed;

if(this.x > width || this.x < 0) {
  this.xSpeed = this.xSpeed * -1;
}

if(this.y > height || this.y < 0) {
  this.ySpeed = this.ySpeed * -1;
}
};
  this.clicked = function() {
  var d = dist(mouseX,mouseY,this.x,this.y);
  if (d < 150) {
    this.xSpeed = -5
    this.ySpeed = -5;
    soundFx.play();
  }
};
}

Answer 1

以下是您可以实现的方法...

创建一个包含所有音效的数组
使用 Math#random or p5#random 生成一个随机数 (index) 并传递该数字 (index)播放音效时到soundFx

var img;
var trooper;
var soundFx;
var randomSFX;

function preload() {
    img = loadImage("https://i.imgur.com/aKtmInB.png");
    sfx1 = loadSound('https://istack.000webhostapp.com/bell1.mp3');
    sfx2 = loadSound('https://istack.000webhostapp.com/bell2.mp3');
}

function setup() {
    soundFormats('mp3');
    soundFx = [sfx1, sfx2];
    // background(255, 0, 0, 0.4);
    var myCanvas = createCanvas(635, 218);
    myCanvas.position(0, 0);
    background(0);
    trooper = new storm(random(width), random(height));
}

function draw() {
    // clear();
    background(0);
    trooper.show();
    trooper.update();
}

function mousePressed() {
    trooper.clicked();
}

function storm(x, y) {
    this.x = x;
    this.y = y;
    this.xSpeed = 3;
    this.ySpeed = 3;
    this.img = img;
    this.show = function() {
        image(img, this.x, this.y);
    };
    this.update = function() {
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
        if (this.x > width || this.x < 0) {
            this.xSpeed = this.xSpeed * -1;
        }
        if (this.y > height || this.y < 0) {
            this.ySpeed = this.ySpeed * -1;
        }
    };
    this.clicked = function() {
        var d = dist(mouseX, mouseY, this.x, this.y);
        if (d < 150) {
            this.xSpeed = -5
            this.ySpeed = -5;
            randomSFX = Math.floor(Math.random() * soundFx.length); //or use, floor(random(0, soundFx.length));
            soundFx[randomSFX].play();
        }
    };
}

body {
  margin: none;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.min.js"></script>

p5.js 中的音效数组

Array of sound-effects in p5.js

javascript

canvas

p5.js