How to create a menu for a game in p5.js using buttons

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);

    }
    }

The two functions that contain the code for the two other versions of Pong that the user can select from the menu. — , Dec 30 '18 at 09:14

score 0 · Answer 1 · answered Jan 04 '19 at 16:26

0

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.

answered Jan 04 '19 at 16:26

Luke Garrigan

4,571
1
21
29

Thanks for the response, I tried what you suggested but once I click one of the buttons, for instance once SinglePlayer is clicked, the screen is completely cleared and the text "Single player game" is displayed at the middle of the screen. However, the code does not run and the single player game itself does not load. Do you have any other ideas? – Jan 05 '19 at 08:51
@JackHunt you’d have to show me what code you have in the single player function, I just did that as an example. – Luke Garrigan Jan 05 '19 at 12:16
Yes, I've added that now. I would very much appreciate a fast reply, thank you! – Jan 05 '19 at 14:25

How to create a menu for a game in p5.js using buttons

1 Answers1