构造函数不起作用？？ 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 = new storm(100, 200 1, 2, yourImageHere);

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

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

几个随机注意事项：您的构造函数确实应该以大写字母开头，这样更容易区分类型和持有实例的变量之间的区别。此外，您从未定义 img 变量，所以这会给您带来问题。

无耻的自我推销：我写了一篇关于可用构造函数的教程here。

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

Constructor function not working?? P5.JS

javascript

p5.js