Question

我目前正在使用JavaScript-p5.js构造函数。我的问题是，当我在画布上的正确位置单击时，mousePressed()函数不会执行其中的代码。基本上，我想要的是当我在杯子上单击鼠标时杯子中的内容消失了。当我按下按钮时，我要按最初填充的方式填充杯子。

这是我的文件：

var bierglas;
var füllung;

var xPos = 200;
var yPos = 100;

function setup() {
  createCanvas(650, 450);
  bierglas = new Cup();
  füllung = new Content();
}

function draw() {
  background(51);
  füllung.show();
  füllung.button();
  füllung.move();
  bierglas.square();
  bierglas.henkel();
}

//
// This draws my cup
//
function Cup() {
  this.x = xPos;
  this.y = yPos;
  this.width = 150;
  this.height = 300;

  this.square = function() {
    fill(255, 150);
    rect(this.x, this.y, this.width, this.height);
  };
  this.henkel = function() {
    arc(this.x + this.width, this.y + this.height / 2, 150, 120, 0, HALF_PI);
    arc(this.x + this.width, this.y + this.height / 2, 150, 120, 0, 0);
  };
}

//
// This is for the mousePressed function, the content of the cup and the button
//
function Content() {
  this.x = xPos;
  this.y = yPos;
  this.width = 150;
  this.height = 300;

  this.buttonX = width - width / 4;
  this.buttonY = height - height / 6;
  this.buttonWidth = width / 8;
  this.buttonHeight = height / 6;

  this.show = function() {
    fill(0, 200, 200);
    rect(this.x, this.y * 2, this.width, this.height - this.y);
  };

  this.button = function() {
    fill(255, 0, 0);
    rect(this.buttonX, this.buttonY, this.buttonWidth, this.buttonHeight);
  };

  this.move = function() {
    mousePressed();
  };
}

function mousePressed() {
  if (
    mouseX < this.x + this.width &&
    mouseX > this.x &&
    mouseY < this.y + (this.height - this.y) &&
    mouseY > this.y
  ) {
    this.y * 2;
    console.log("Auf Bierglas getippt");
  }
  if (
    mouseX > this.buttonX &&
    mouseX < this.buttonX + this.buttonWidth &&
    mouseY > this.buttonY &&
    mouseY < this.buttonY + this.buttonHeight
  ) {
    this.y = yPos;
    console.log("Auf Button getippt");
  }
}

Answer 1

您应该养成检查developer console是否有错误的习惯。您会看到mousePressed()函数确实在触发，但是却出现了错误。

让我们看一下mousePressed()函数的前几行：

function mousePressed() {
  if (
    mouseX < this.x + this.width &&
    mouseX > this.x &&
    mouseY < this.y + (this.height - this.y) &&
    mouseY > this.y
  ) {
    this.y * 2;

您在这里遇到一些问题。您认为this是什么？我猜测您认为它是Content的实例，但事实并非如此。因此，this不包含诸如x，y，width或height之类的变量，这就是为什么会出错的原因。另外，请注意，this.y * 2实际上不会对结果值做任何事情。

如果我是你，我会break your problem down into smaller steps，一次一次地执行这些步骤。尝试获得一个非常简单的草图，该草图使用mousePressed()进行工作：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed(){
    console.log("mouse pressed");
}

接下来，尝试创建一个简单的草图，其中包含一个对象，该对象具有您从草图级别mousePressed()函数调用的函数。这是一个示例：

var myObject = new MyObject();

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed(){
    myObject.mousePressed();
}

function MyObject(){
    this.mousePressed = function(){
        console.log("object mouse pressed");
    };
}

按照这样的小步骤逐步进行，请记住始终检查开发者控制台是否有错误。祝你好运。

mousePressed在JavaScript的构造函数内部-p5.js

1 个答案: