如何使用按钮在p5.js中为游戏创建菜单

Question

I'm a creating a game of pong with three different versions of the original game of pong, and each of these versions are held in 3 different functions, such as; singleplayer, multiplayer etc. I have called a function menu(); in the first function setup() which will create a menu screen for the user to select which version of the game using buttons.

For some reason when I execute the code and click one of the buttons, such as Singleplayer, that code does not execute and instead I'm still stuck on the menu screen.

function setup() {
    createCanvas(400,400)
    background(0)
    menu();
}

function draw() {
}

function menu() {
    background(120,0,255);
    button=createButton("Normal Multiplayer")
    button.position(135,60);

    button2=createButton("Multiplayer ball frenzy");
    button2.position(130,180);
    button2.mousePressed(MultiplayerFrenzy);

    button3=createButton("Singleplayer (use mouse)");
    button3.position(125,260);
    button3.mousePressed(Singleplayer)

    textSize(32)
    fill(0)
    text("PONG",95,30)
    textSize(12)
    fill(0)
    text("Play with your keyboard",130,100)
    text("Guide your paddle with the mouse",115,295)
}

 function Singleplayer() {
clear();
hideButtons();
text("single player",width/2,height/2)
var paddleLx;
var paddleLy;
var paddleRx;
var paddleRy;
var ballX;
var ballY;
var ballVx;
var ballVy;
var ballSize = 20;
var paddleWidth = 20;
var paddleHeight = 120;
var bigWidth = (ballSize + paddleWidth)/2;
var bigHeight = (ballSize + paddleHeight)/2;
var gameOn = 0;
var ticker = 0;
var LScore = 0;
var RScore = 0;
var r2 = 0;
var b2 = 255;
let balls = [];


function restart() {
paddleLx = 22;
paddleLy = 300;
paddleRx = 777;
paddleRy = 300;
ballX = paddleLx + ballSize;
ballY = paddleRy;
ballVx = 0;
ballVy = 0;

}

function setup() {
//creates the canvas
createCanvas(800, 400);
// change the background attribute so that it changes colour as mousex and mousey changes
background(0);
restart();
// creates the text for the initial page
textSize(50);
fill(0,0,255);
text("PONG", 310, 160);
text("MODIFIED", 275, 240);
fill(20,35,86);
text("PONG", 310+2, 160+2);
text("MODIFIED", 275+2, 240+2);

}

   //begins the game if the mouse is pressed
       function mousePressed() {
        if (gameOn == 0) {
          gameOn = 1;
          ballVx = 5;
    }

}




     //main function called for the game to be played
       function update() {

//responsible for moving the user's paddle
    paddleLy = mouseY;

//
    ballX=ballX+ballVx;
    ballY=ballY+ballVy;

//increments ticker variable
    ++ticker;



//defines the movement for the right paddle to move autonomously
    paddleRy = int(ballY + 50*sin(sin((ballY + ticker)/30)));

// changes background colour when left and right paddle move
    r2=map(paddleRy,0,400,0,255);
    b2=map(mouseY,0,400,255,0);
    background(r2,0,b2);

    fill(255,255,255);
    textSize(32);
    text(LScore, 10, 30);
    text(RScore, 770, 30);

// if the y coordinate of the ball is out of bounds, its direction is reversed
    if (ballY < 0 || ballY > 400) {
    ballVy=ballVy*-1
  }

//rules for handling how the paddles interact with the ball
    else if ((paddleLx - bigWidth < ballX) && (ballX < paddleLx + bigWidth) && (paddleLy - bigHeight < ballY) && (ballY < paddleLy + bigHeight)) {
        ballVy = ((ballY - paddleLy)/float(bigHeight))*4;
        ballVx *= -1.1;
        ballX += 1;
 }
    else if ((paddleRx - bigWidth < ballX) && (ballX < paddleRx + bigWidth) && (paddleRy - bigHeight < ballY) && (ballY < paddleRy + bigHeight)) {
     ballVy = ((ballY - paddleRy)/float(bigHeight))*4;
     ballVx *= -1;
     ballX -= 1;
 }
//if player loses
    else if (ballX < -2) {
      ballVx = ballVy = 0;
      textSize(50);
      fill(0,0,0);
      text("GAME OVER!", 215,200);
      fill(random(255),0,0)
      text("GAME OVER!", 215+2, 200+2);

      ++RScore;
      gameOn = 0;
      restart();
  }
//if player wins
    else if (ballX > 802) {
       ballVx = ballVy = 0;
       textSize(50);
       fill(0,0,0)
       text("YOU WIN!", 260, 200);
       fill(random(255),0,0);
       text("YOU WIN!", 260+2, 200+2);
       ++LScore;
       gameOn = 0;
       restart();
    }
}


 //draw function (repeats continously throughout the course of the sketch)
     function draw() {
        if (gameOn == 1) {
           update();
     }
     fill(random(255),random(255),random(255));
      rect(paddleLx-(paddleWidth/2), paddleLy-(paddleHeight/2), paddleWidth, paddleHeight);

      rect(paddleRx-(paddleWidth/2), paddleRy-(paddleHeight/2), paddleWidth, paddleHeight);
      fill(random(255),0,random(255));
      ellipse(int(ballX), int(ballY), ballSize, ballSize);

    }
    }

Answer 1

The first thing you should do is hide the buttons when you've clicked either Single Player or Multiplayer . As the buttons are not created within the canvas using clear() will not suffice.

I've set up a little example using your Singleplayer function:

function Singleplayer() {
    clear();
    hideButtons();
    text("Single player game", width/2, height/2);
}

function hideButtons() {
    button.hide();
    button2.hide();
    button3.hide();
}

So the clear() will remove the background colour and text whilst the hideButtons() will hide the buttons you set up. This way you now have the blank canvas to plonk your Singleplayer code.