P5.js mousePressed() function not working :/

Question

I have all of p5 installed and that is working fine, however whenever I come to use mousePressed() it does not work (keyPressed does not work either). Here is the part with the problem:

    //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");
        };
    };

Here is the full code:

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

}

I have to add this extra text and stuff otherwise there is too much code ://// blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah

Answer 1

The mousePressed method needs to live outside of your draw function.

Here's a fiddle of it working when moved outside of draw: https://jsfiddle.net/xh9p28r6/2/