javascript - JavaScript 构造函数中的 mousePressed - p5.js

Question

我目前正在研究 JavaScript 中的构造函数 - p5.js。我的问题是，当我在 Canvas 上的正确位置单击时，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");
    };
}

像这样一步步前进，并记住始终检查开发人员控制台是否有错误。祝你好运。