javascript - 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;
        };
    };

}

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

Answer 1

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

这是在 draw 之外工作的 fiddle :https://jsfiddle.net/xh9p28r6/2/