How to make a start game screen?

p5.js Coding Questions
1

Hi, I was wondering if someone could point me in the right direction.
I’m making an interactive snake game and I’d like to have a ‘click to start’ screen at the beginning. This is my sketch.js:

var screen = 0;
var x;
var y;
var speed = 1;
let bg;
let img;
let img2;
let img3;
let snake;
let rez = 40;
let food;
let w;
let h;

function preload() {
  img = loadImage('spaceinvaders.png');
  img2= loadImage('cdfile.png');
  img3 = loadImage('10.jpg');
}

function setup() {
  bg = loadImage('chrome1.png');
  createCanvas(800, 800);
  w = floor(width / rez);
  h = floor(height / rez);
  frameRate(7);
  snake = new Snake();
  foodLocation();
  createButton("START");
  createButton("RESET");
}

  

  function foodLocation() {
  let x = floor(random(w));
  let y = floor(random(h));
  food = createVector(x, y);

}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    snake.setDir(-1, 0);
  } else if (keyCode === RIGHT_ARROW) {
    snake.setDir(1, 0);
  } else if (keyCode === DOWN_ARROW) {
    snake.setDir(0, 1);
  } else if (keyCode === UP_ARROW) {
    snake.setDir(0, -1);
  } else if (key == ' ') {
    snake.grow();
  }

}

function draw() {
  
  scale(rez);
  background(bg);
  //background(0,255,255);
  if (snake.eat(food)) {
    foodLocation();
  }
  snake.update();
  snake.show();


  if (snake.endGame()) {
    print("END GAME");
    background(0);
    noLoop();
  }

  noStroke();
  fill(255, 0, 0);
  image(img2, food.x, food.y, 1, 1);
}

The createbuttons don’t have functions yet so please ignore. I know this code might be a mess, I’m on a tight deadline.

I found this bit of code below which seemed to the job on a simple sketch, however doesn’t work on mine - I’m wondering if two if statements can run together?

if (screen == 0) {

		background(96, 157, 255)
		fill(255)
		textAlign(CENTER);
		text('WELCOME TO MY BUTTON GAME', width / 2, height / 2)
		text('click to start', width / 2, height / 2 + 20);

	} else if (screen == 1) {
		x = random(0, width)
		y = random(0, height)
		frameRate(speed);
		background(220);

I understand vaguely that it doesn’t work because the code has preloaded functions and the game is set to run in draw from the start.
Any advice in the right direction greatly appreciated !! :smile:

2

It should be able to work on yours- if the screen value is 0 at the start, that would be your start screen.
You could have all of the if() statements for the snake that you currently have in draw() put inside an if(screen == 1) { . Then, if the user clicks while screen == 0, you could change the screen to the actual game screen(screen = 1;), which would start the game. I’m bad at explanations. something like this?

function draw() {
  
if (screen == 0) {

		background(96, 157, 255)
		fill(255)
		textAlign(CENTER);
		text('WELCOME TO MY BUTTON GAME', width / 2, height / 2)
		text('click to start', width / 2, height / 2 + 20);

	} else if (screen == 1) {
pushMatrix();
  scale(rez);
popMatrix();
  background(bg);
  //background(0,255,255);
  if (snake.eat(food)) {
    foodLocation();
  }
  snake.update();
  snake.show();


  if (snake.endGame()) {
    print("END GAME");
    background(0);
    noLoop();
  }

  noStroke();
  fill(255, 0, 0);
  image(img2, food.x, food.y, 1, 1);
}
}

though you would have a separate mousePressed function actively waiting for the user to click while screen == 0. When the user does click, the screen will be changed to the game screen.

3

thanks for the reply!

i played around with mousePressed (couldn’t get it to work) then decided to organise contents since i was confusing myself. found a better structure to work within:

// 0: Initial Screen
// 1: Game Screen
// 2: Game-over Screen

var gameScreen = 0;
let bg;
let img;
let img2;
let img3;
let snake;
let rez = 40;
let food;
let w;
let h;


function preload() {
  img = loadImage('spaceinvaders.png');
  img2= loadImage('cdfile.png');
  bg = loadImage('chrome1.png');
}


/********* SETUP *********/

function setup() {
  createCanvas(700, 700);
  w = floor(width / rez);
  h = floor(height / rez);
  frameRate(7);
  snake = new Snake();
  foodLocation();
}


/********* DRAW *********/

function draw() {
  if (gameScreen == 0) {
    initScreen();
  } else if (gameScreen == 1) {
    gameScreen();
  } else if (gameScreen == 2) {
    gameOverScreen();
  }
}


/********* SCREEN CONTENTS *********/

function initScreen() {
  background(236, 240, 241);
  textAlign(CENTER);
  fill(52, 73, 94);
  textSize(70);
  text("TBD", width/2, height/2);
  textSize(15); 
  text("Click to start", width/2, height-30);
}
function gameScreen() {
  scale(rez);
  background(bg);
  if (snake.eat(food)) {
    foodLocation();
  }
  snake.update();
  snake.show();
}
function gameOverScreen() {
  background(44, 62, 80);
  textAlign(CENTER);
  fill(236, 240, 241);
  textSize(15);
  text("Click to Restart", width/2, height-30);
}


/********* INPUTS *********/

function mousePressed() {
  // if we are on the initial screen when clicked, start the game
  if (gameScreen==0) {
    startGame();
  }
}


/********* OTHER FUNCTIONS *********/

function startGame() {
  var gameScreen=1;
}
function gameOver() {
  var gameScreen=2;
}

function restart() {
  var gameScreen =1;
}


function foodLocation() {
  let x = floor(random(w));
  let y = floor(random(h));
  food = createVector(x, y);
}


function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    snake.setDir(-1, 0);
  } else if (keyCode === RIGHT_ARROW) {
    snake.setDir(1, 0);
  } else if (keyCode === DOWN_ARROW) {
    snake.setDir(0, 1);
  } else if (keyCode === UP_ARROW) {
    snake.setDir(0, -1);
  } else if (key == ' ') {
    snake.grow();
  }
}

i really thought this would work now, but it still doesn’t. initial screen loads but won’t start game when mouse pressed… am i missing something in function gameScreen?

4

here is your little error:

you declare gameScreen on top: with “var gameScreen = 0;”

but you declare it again in:

function startGame() {
  var gameScreen=1;
}
function gameOver() {
  var gameScreen=2;
}

function restart() {
  var gameScreen =1;
}

so it is not the same, the latter is a variable that is only visible inside your startGame function. so you actually do not change the one you declared at start. -> “gameScreen” inside draw never is changed.

remove the “var” in your startGame() function.

1 Like
5

Okay i removed ‘var’ from function startGame and i got error message: ‘Uncaught TypeError: gameScreen is not a function.’

but i have gameScreen as a function, so i must have made a mistake with the contents?

function gameScreen() {
  scale(rez);
  background(bg);
  if (snake.eat(food)) {
    foodLocation();
  }
  snake.update();
  snake.show();
}

everything inside should work, the sketch has all the relevant js files for snake and i’ve declared foodLocation as a function as well

6

Maybe error is because function and variable have the same name

Try gameState für the variable instead

1 Like
7

One way to implement this easily is to use the p5.SceneManager library.
It allows you to create p5.js sketches / games with multiple scenes.

The library is super-simple, so worth to take a look how is implemented in case you want to do the same thing in the future without a library.

8

Hello,
you maybe should not use the same name for a function AND a variable. just to be sure :wink:
so I replaced the variable gameScreen with gameScreenValue. = 1 error message less …

i tested you code again and another issue pops up:

function mousePressed() {
  // if we are on the initial screen when clicked, start the game
  countTheMouse++;
  print(countTheMouse);
  if (gameScreen === 0) {
    print('changing to game');
    startGame();
  }
  if (gameScreen === 1) {
    print('changing to game over');
    gameOver();
  }
  if (gameScreen === 2) {
    print('restart game');
    restart();
  }
}

switching from one state to the next works, but the first mouse click immediately cycles through all stated, since you use 3 if statements one after the next.
so when the mouse is pressed, startGame() sets gameScreen to 1.
-> the next if-statement becomes true, so gameOver() is executed, and so on.

after that, “restarting” immediately leads us back to the gameOver screen, since:
gameScreen becomes 1 -> calling gameOver() -> gamesScreen is 2 again

you should use a switch-statement, so only one function is called when the mouse is pressed not all of them.

for testing purposes I removed all the image loading and class related content (snake), since I do not have your code there.

here is the “bare” part. being lazy I used “else if” in the keypresses function, but I really think switch is better because the code is easier to read…

// 0: Initial Screen
// 1: Game Screen
// 2: Game-over Screen
//var gameScreen = 0;
let bg;
let img;
let img2;
let img3;
let snake;
let rez = 40;
let food;
let w;
let h;
let countTheMouse = 0;
let gameScreenValue = 0;


function preload() {
  // img = loadImage('spaceinvaders.png');
  // img2= loadImage('cdfile.png');
  // bg = loadImage('chrome1.png');  
}

/********* SETUP *********/
function setup() {
  createCanvas(700, 700);
  w = floor(width / rez);
  h = floor(height / rez);
  frameRate(7);
    textAlign(CENTER);
  fill(52, 73, 94);
}

/********* DRAW *********/
function draw() {
  if (gameScreenValue === 0) {
    initScreen();
    text("executing GS", width / 2, height / 2 + 40);
  } else if (gameScreenValue === 1) {    
    gameScreen();
    text("executing Game", width / 2, height / 2 + 40);
  } else if (gameScreenValue === 2) {    
    gameOverScreen();
    text("executing GOver", width / 2, height / 2 + 40);
  }
}

/********* SCREEN CONTENTS *********/
function initScreen() {
  background(236, 240, 241);  
  textSize(70);
  text("TBD", width / 2, height / 2);
  textSize(15);
  text("Click to start", width / 2, height - 30);
}
function gameScreen() {
  background(136, 240, 241);
  //scale(rez);
  text('Game is running', width / 2, height -30);
}
function gameOverScreen() {
  background(36, 262, 180);
  text("Click to Restart", width / 2, height - 30);
}

/********* INPUTS *********/

function mousePressed() {
  // if we are on the initial screen when clicked, start the game
  countTheMouse++;
  print(countTheMouse);
  if (gameScreenValue === 0) {
    print('changing to game '+ gameScreenValue);
    startGame();
  } else if (gameScreenValue === 1) {
    print('changing to game over '+ gameScreenValue);
    gameOver();
  } else if (gameScreenValue === 2) {
    print('restart game '+ gameScreenValue);
    restart();
  }
}

/********* OTHER FUNCTIONS *********/

function startGame() {
  gameScreenValue = 1;
}
function gameOver() {
  gameScreenValue = 2;
}
function restart() {
  gameScreenValue = 1;
}
1 Like