对物体的声音效果p5.js

时间:2017-03-20 14:17:20

标签: javascript canvas p5.js

我试图让我的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();
   }
}

1 个答案:

答案 0 :(得分: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以及特定问题,我们将从那里开始。祝你好运。