P5.js mousePressed() 函数不工作：/

Question

我已经安装了所有 p5 并且工作正常，但是每当我开始使用 mousePressed() 时它都不起作用（keyPressed 也不起作用）。这是有问题的部分：

    //press play button
    if (mouseX > 120 && mouseX < 480 && mouseY > 160 && mouseY < 220) {
        playfill = 120;
        inButtonP = true;
    } else {
        playfill = 0;
        sharefill = 0;
        settingsfill = 0;
        inButtonP = false;
    };
    function mousePressed() {
        if (inButtonP) {
            playing = true;
            println("pressed");
        };
    };

完整代码如下：

//is the game over?
var playing = false;

//speed at which the square will move
var speedx = 6;
var speedy = 4;

//setting square variables
var square = {
    x : 300,
    y : 200,
    length : 80
};

//score
var score = 0;

//start + end background
var g = 120;

//start menu colour colChange
colChange = -3;

//transparency of buttons
var playfill = 0;
var sharefill = 0;
var settingsfill = 0;
var inButtonP = false;

function setup() {
    createCanvas(600, 400);
}

function draw() {
    //start screen
    if (!(playing)) {
        //background
        background(221, g, 222);

        //menu rectangle
        stroke(255, 255, 255);
        strokeWeight(5);
        fill(0, 0, 0, 0);
        rectMode(CENTER);
        rect(300, 200, 500, 300, 50);

        //menu text
        textAlign(CENTER);
        textSize(32);
        text("THE WAITING GAME", 300, 120);

        //play button
        stroke(255, 255, 255);
        strokeWeight(2);
        fill(255, 255, 255, playfill);
        rectMode(CENTER);
        rect(300, 190, 360, 60);

        textSize(20);
        text("PLAY GAME", 300, 197);

        //share button
        stroke(255, 255, 255);
        strokeWeight(2);
        fill(255, 255, 255, sharefill);
        rectMode(CENTER);
        rect(205, 270, 170, 60);

        strokeWeight(5);
        fill(255, 255, 255);
        ellipse(185, 260, 10, 10);
        line(185, 260, 225, 270);
        ellipse(225, 270, 10, 10);
        line(225, 270, 185, 280);
        ellipse(185, 280, 10, 10);

        //settings button
        stroke(255, 255, 255);
        strokeWeight(2);
        fill(255, 255, 255, settingsfill);
        rectMode(CENTER);
        rect(395, 270, 170, 60);

        strokeWeight(5);
        line(370, 260, 420, 260);
        line(370, 270, 420, 270);
        line(370, 280, 420, 280);

        //colour change
        g = g + colChange;
        if (g < 1) {
            colChange = 3;
        };
        if (g > 120) {
            colChange = -3;
        };

        //press play button
        if (mouseX > 120 && mouseX < 480 && mouseY > 160 && mouseY < 220) {
            playfill = 120;
            inButtonP = true;
        } else {
            playfill = 0;
            sharefill = 0;
            settingsfill = 0;
            inButtonP = false;
        };
        function mousePressed() {
            if (inButtonP) {
                playing = true;
                println("pressed");
            }
        }


    };


    //main game
    if (playing) {
        //background
        background(221, 160, 222);

        //square
        fill(221, 160, 222);
        stroke(255, 255, 255);
        rectMode(CENTER);
        rect(square.x, square.y, square.length, square.length);

        //basic bounce collision on x axis
        if (square.x > (width - square.length / 2)) {
            speedx = random(-5, -1);
        };
        if (square.x < square.length / 2) {
            speedx = random(2, 6);
        };

        //basic bounce collision on y axis
        if (square.y > (height - square.length / 2)) {
            speedy = random(-5, -1);
        };
        if (square.y < square.length / 2) {
            speedy = random(2, 6);
        };

            square.x = square.x + speedx;
            square.y = square.y + speedy;

        //score display
        stroke(221, 20, 222);
        fill(221, 20, 222);
        text("", 5, 35);
        text("Score: " + score, 5, 15);

        //check for corner
        if (square.x > (width - square.length / 2) && square.y < square.length / 2) {
            score = score + 1;
        } else if (square.x > (width - square.length / 2) && square.y > (height - square.length / 2)) {
            score = score + 1;
        } else if (square.x < square.length / 2 && square.y > (height - square.length / 2)) {
            score = score + 1;
        } else if (square.x < square.length / 2 && square.y < square.length / 2) {
            score = score + 1;
        };
    };

}

我必须添加这些额外的文本和内容，否则代码太多了 //// blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah

Answer 1

mousePressed 方法需要存在于绘图函数之外。

这里有一个 fiddle 它在移出 draw 时工作：https://jsfiddle.net/xh9p28r6/2/

P5.js mousePressed() 函数不工作：/

P5.js mousePressed() function not working :/

javascript

mousepress

p5.js