如果（mousePressed）不工作（Processing.js）答案

【问题标题】：If(mousePressed) is not working (Processing.js)如果（mousePressed）不工作（Processing.js）
【发布时间】：2023-03-23 00:31:01
【问题描述】：

我想在用户点击时打开一扇门。代码如下所示：

with(processing) {
        noStroke();
        size(1200, 900);
        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
    };

但是，当我点击门时，它不会打开。当我的鼠标被按下时，它似乎甚至不明白。我想知道我的代码有什么问题。我尝试将相同的代码复制粘贴到可汗学院（除了我使用 mouseIsPressed 而不是 mousePressed）并且它有效！那么为什么它在我的 IDE 中不起作用？顺便说一句，我使用 VSCode。

谢谢！

【问题讨论】：

请注意 (a) I Processing.js 已于 2018 年 12 月停止使用，因此您不想再开始使用它，并且 (b) JS 中的 with(...) { ... } 构造已现在很长一段时间的反模式，你真的不应该依赖它。看看p5.js？

标签： javascript html processing.js

【解决方案1】：

您需要将代码移动到mousePressed 事件处理程序

mousePressed = function() {
    noStroke();

        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
};

Khanacdemy 中的代码

https://www.khanacademy.org/computer-programming/spin-off-of-mousepressed-processingjs/5395110149373952

如果你想在 HTML 文件中运行，你需要包含脚本代码到带有 type="application/processing" 的脚本标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="processing.js"></script>
  <script type="application/processing">
    /* @pjs preload="images/grass.jpg"; */

// When mouse is clicked, grow the flower
void mouseClicked(){
    alert(1)
    draw();
  };

void draw(){

        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
};
  </script>

</body>
</html>

【讨论】：