How to I transition from "Start Game" page to playing the actual game? - boolean

Question

var start = true; // the game will begin on the "start" screen
var play = false;
var gameOver = false;
clickX = 0; // track the mouse click location
clickY = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
//Leave this draw() function alone
if (start){
startScreen();
}
else if (play){
playScreen();
}
else if (gameOver){
gameOverScreen();
}
}
function mousePressed(){
clickX = mouseX; // grab the X location of the mouse
clickY = mouseY; // grab the Y location of the mouse
}
function startScreen(){
background(50);
textSize(20);
fill(255, 0, 0);
text('To begin playing, click mouse',60,80);
if(dist(clickX, clickY, width/2, height/2) < 100){
}
}
function playScreen(){
}
function gameOverScreen(){
}
My teacher said "add some branching logic to the mousePressed() function so that mouse clicks will change the canvas from one screen to the next. Think about how to use if() and else if() statements and those boolean "flag" variables at the top of the sketch (8 points)."
I am trying to create code that will switch the starting screen to the actual game! I'd like to do it so that when you click your
I've been looking everywhere and can't find anything helpful :( So if you have any references I can check out, I will take those too! Thank you!

Answer 1

to manage that state I would recommend you a switch statemen where you can iterate it using a variable with the scenario name:
let scenario ; // the game will begin on the "start" screen and will change to play or gameOver according the needs
function setup() {
createCanvas(640, 480);
scenario = 'playing'
}
function draw() {
startScreen()
text(scenario,width/2,height /2);
}
function mousePressed(){
// Here you can add different check according to each scenario
switch(scenario){
case 'start':
if(dist(mouseX, mouseY, 60, 80) < 100){
scenario = 'playing'
}
break;
case 'playing':
if(dist(mouseX, mouseY, 60, 80) < 100){
scenario = 'gameOver'
}
break;
case 'gameOver':
if(dist(mouseX, mouseY, 60, 80) < 100){
scenario = 'start'
}
break;
}
}
function startScreen(){
switch(scenario){
case 'start':
background(50);
textSize(20);
fill(255, 0, 0);
text('To begin playing, click mouse',60,80);
break;
case 'playing':
background(200,0,0);
textSize(20);
fill(255, 0, 0);
text('Click to continue to GameOver',60,80);
break;
case 'gameOver':
background(0,255,0);
textSize(20);
fill(255, 0, 0);
text('Click to go to start',60,80);
break;
}
}