JavaScript

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");
    };
}

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

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

mousePressed inside Constructor Function in JavaScript - p5.js

p5.js