JavaScript - p5.js中构造函数中的mousePressed
JavaScript - p5.js中构造函数中的mousePressed
提问于 2018-07-07 19:16:38
我目前正在研究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");
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-08 00:28:51
您应该养成检查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");
};
}像这样一小步一步地前进，记住总是检查开发人员控制台中的错误。祝好运。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51222639
复制相关文章
相似问题