Question

我试图让我的stormTrooper图像在点击时产生声音效果 - 我到目前为止没有运气......我检查了p5.js网站 - 但无法形象它出来了。

想知道我是否必须在storm对象中包含mousePressed函数？

var img;
var trooper;
var sound;

function preload() {

  img = loadImage("stormy3.png");
  sound = loadSound("sounds/Followme.mp3");

}

function setup() {
   // background(255, 0, 0, 0.4);
  background(255, 0, 0, 0.4);
  var myCanvas = createCanvas(windowWidth,windowHeight);
  myCanvas.parent('myContainer');
  myCanvas.position(0, 0);
  trooper = new storm(300,400);
}

function draw() {
 clear();
 trooper.show();
 trooper.movement();
 trooper.bounce();
}

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.movement = function() {
   this.x = this.x + this.xSpeed;
   this.y = this.y + this.ySpeed;
};

this.bounce = function() {
  if(this.x > width || this.x < 0) {
    this.xSpeed = this.xSpeed * -1;
}
if(this.y > height || this.y < 0) {
  this.ySpeed = this.ySpeed * -1;
}
};
}

function mousePressed() {

   if (trooper.contains(trooper.x, trooper.y)) {
     sound.play();
   }
}

Answer 1

您不会将草图级mousePressed()函数移动到Storm对象内部（对象应以大写字母btw开头）。相反，您只需从草图级Storm函数中调用mousePressed()对象中的另一个函数。

另请注意，您的Storm课程不包含contains()功能，因此您当前的代码无效。

以下是您需要做的事情的骨架：

function Storm(x, y){
   //other variables and functions here

   this.contains = function(x, y){
      //return true if x,y is inside this Storm's hitbox
   }
}

function mousePressed(){
   if(trooper.contains(someX, someY)){
      //play your sound or do whatever you want
   }
}

您还需要启动breaking your problem down into smaller steps。看起来你对一些不同的东西感到困惑，所以你应该在他们自己的问题中询问每一个问题，用他们自己的MCVE来隔离那一步。

例如，您是否可以创建一个只播放声音的小示例草图？让它完美地工作，而不用担心物体或碰撞检测或其他任何事情。除此之外，你能创建一个只处理碰撞检测的示例程序，比如只要鼠标在里面就改变矩形的颜色吗？除此之外，你能创建一个设置对象的示例程序吗？在开始考虑将它们组合到一个程序之前，让每个人都能完美地完成工作。然后，如果您遇到特定步骤，您可以发布MCVE以及特定问题，我们将从那里开始。祝你好运。

对物体的声音效果p5.js

1 个答案: