javascript - 构造函数不起作用？ P5.JS

Question

所以我试图弄清楚为什么它说 display() 不是一个函数，我觉得这代码可能完全错误......

另外，我对图像的 x 和 y 位置有点困惑？我在哪里定义它们。

这段代码的目的是让 Stormtrooper png 漂浮在屏幕上，我最终希望他在点击时发出声音，并让他旋转(我也很难过) - 现场版本可以是在这里看到:https://benjamingibbsportfolio.000webhostapp.com/ (这是我的半成品作品集，请不要苛刻)

我已经用不同的方式正确地完成了这段代码，我只是在学习构造函数 atm。我最初很兴奋，因为我以为我终于掌握了“this”关键字，然后一切都崩溃了!

function preload() {

img = loadImage("stormy3.png");

}

function storm(x,y,xSpeed,ySpeed,img) {
 this.x = x;
 this.y = y;
 this.xSpeed = xSpeed;
 this.ySpeed = ySpeed;
 this.img = img;

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

this.move = 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 setup() {
 // TRANSPARENT BACKGROUND*
  background(255, 0, 0, 0.4);
//
var myCanvas = createCanvas(1440, 4000);
myCanvas.position(0, 0);
}

function draw() {
 // TRANSPARENT BACKGROUND*
 clear();
 //
 storm.display();
 storm.move();
 storm.bounce();
}

Answer 1

您已经创建了一个名为 storm 的构造函数，它定义了一个名为 storm 的类型。但您尚未创建该类型的实例。

现在，当你这样做时:

storm.display();
storm.move();
storm.bounce();

此代码中的storm引用的是类型，而不是特定实例。这就是你收到错误的原因。您不能使用这样的类型调用函数，您必须通过实例。

要创建实例，您应该使用 new 关键字:

var myStorm = 新 Storm (100, 200 1, 2, yourImageHere);

然后您可以使用该实例来调用您的函数:

myStorm.display();
myStorm.move();
myStorm.bounce();

一些随机注释:您的构造函数实际上应该以大写字母开头，这样更容易区分类型和保存实例的变量之间的区别。另外，您从未定义过 img 变量，因此这会给您带来问题。

无耻的 self 推销:我写了一篇关于可用构造函数的教程here .