时间戳

首页 > 解决方案 > mousePressed 在 JavaScript 中的构造函数内部 - p5.js

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

问题描述

我目前正在研究 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");
  }
}

标签： javascriptp5.js

解决方案

你应该养成检查开发者控制台错误的习惯。您会看到您的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实际上并没有对结果值做任何事情。

如果我是你，我会把你的问题分解成更小的步骤，并一次一步地采取这些步骤。尝试得到一个使用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");
    };
}

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

推荐阅读