HELP: Adding a "start game" and "game over" screens to game

My 10 year old son attended a Javascript camp this week and had a great time. However, he is trying to complete his game and I am absolutely no help to him unfortunately.

He and I are both fairly familiar with Scratch, but this is a bridge too far for me. I need your help.

In Scratch, I would use a broadcast signal to set up a “Start Game” screen to launch into a game…and then would have a “Game Over” screen at the end of a game. I have no idea how to do that in JavaScript.

Here is a link to his game: p5.js Web Editor

How does he get the start and end screens? Is it possible to add to different end screens - successful game over and failure game over?

Thanks in advance!

1 Like

The general idea is to add a variable “state” (of type int) that indicates the current screen. The variable state can have the following values:

  • 0 = start screen
  • 1 = Game
  • 2 = game over screen

In draw() say

if(state==0) {
     //draw the start screen 
}
else if(state==1) { 
    //all that you have in draw() now / the actual game
}
else if (state==2) {
   //game over
}

Thus state dictates the general behavior of the Sketch.

There is no way to automatically tell p5.js to do this - you have to enhance your draw() function yourself as shown.

Remarks

  • In principle, nothing in draw() is allowed outside of this if..else if...-clause, because everything has to belong to a state. Of course, you can add more screens.

  • It’s important to really have if... else if... and not just if... if...

  • In other parts of the program you have to set the variable state, for example, in mousePressed() in state 0 you want to say state=1; and so on. So you set the current screen.

  • In mousePressed() and keyPressed() (etc.) you also want to have the same if..else if...-clause, because you want to evaluate mouse and keys in different ways.

  • The if... else if...-clause can be replaced by

switch(state) { 
   case 0: 
      ... 
      break; 
   case 1: 
       .... 
       break; 
}//switch 

Hope this helps.

Warm regards,

Chrisir

Hello @BMS,

There is a tutorial here and examples of else-if statements that may be helpful:

:)

Ok, he got the start screen in but it is running at the same time as they game itself.

How does he delay the game to start after the “start screen” is off the screen? Right now they appear to be on top of one another.

In an if… else if…-construction, when state is 0
only ONE screen is shown.

Please check if his construction is like mine. Including the else and the {}.

The idea is then that he uses in keyPressed the same
construction and say state=1;

Can you please post his draw()

Thank you so much for your help!

Ok, he made some progress. He has a “start screen”(stage 0) and a “game over” screen (stage 2). However, he wants a “win” screen (stage 3). As I understand it from him, because he has set it up as any collision sends it to stage 2 he is having difficulty separating out the two game play results - game over fail and game over success.

Game over fail (stage 2) - when officer is hit by hydrant
Game over win (stage 3) - when officer hits robber with donut

(I know silly game from a 10 year old boy, haha.)

Here is the link: p5.js Web Editor

2 Likes

I’ve got some additional development tips:

  • Have your asset files inside their correct folder.
  • You have an “images/” folder but only some image files are actually there.
  • Move all of them into your “images/” subfolder and delete unused 1s.
  • Load all of your assets inside preload() callback.
  • For example, your file “fire hydrent.png” isn’t being loaded inside preload().
  • You can create multiple “.js” files to better organize the logic of your sketch project.
  • You could create new JS files like “menu.js”, “game.js”, “victory.js”, “defeat.js” and move all the corresponding logic to those files:

“menu.js”:

"use strict";

function menu() {
}

“game.js”:

"use strict";

function main() {
}

“victory.js”:

"use strict";

function win() {
}

“defeat.js”:

"use strict";

function lose() {
}

Inside each of those placeholder functions you would invoke other functions from the corresponding file in order to do the relevant tasks.

That is, function menu() would call functions from the “menu.js” file responsible to display the menu screen.

And function playing() would call functions that deal w/ the game’s logic; and so on.

Here’s a minimum template for the main “sketch.js” file which would act as an entry point for the states and their corresponding files:

“sketch.js”:

"use strict";

const MENU = 0, MAIN = 1, WIN = 2, LOSE = 3;
var state = MENU;

function preload() {
}

function setup() {
}

function draw() {
  switch (state) {
    case MENU: return menu();
    case MAIN: return main();
    case WIN:  return win();
    case LOSE: return lose();
  }
}

function keyPressed() {
  if (keyCode == ENTER)  switch (state) {
    case MENU: return state = MAIN;
    case WIN:
    case LOSE: return state = MENU;
  }
}
2 Likes

I suggest to make this is a separate state in draw()

if(state==0) {
    draw start screen 
}
else if(state==1) { 
    all that you have in draw() now
}
else if (state==2){
    a screen for game over fail
}
else if (state==3){
    screen for game over success.
}

so he needs to set state = 2 OR state = 3

Hello @BMS,

I just worked through and modified one of the examples in link I provided with some kids the same age:

let score = 0;
let countLast;

function setup() {
  createCanvas(200, 100);
  fill(0);
  textSize(18);
  timeLast = frameCount;
}

function draw() {
  //let score = 85;

  if (score == 0) {
    background(0, 255, 0);
    text('Congratulations!', 30, 55);
  if (frameCount > timeLast + 240) score = 1; 
  }
  else if (score == 1) {
    background(0, 100, 255);
    text('Good job!', 60, 55);
    if (key == '1') score = 2;
  }
  else if (score == 2) {
    background(255, 255, 0);
    text('Just okay.', 60, 55);
    if (key == '2') 
      {
      score = 3;
      countLast = frameCount  
      }
  }
  else if (score == 3) {
    background(255, 128, 0);
    text('Not good!', 60, 55);
    if (frameCount > countLast + 180) score = 99; 
  }
  else {
    background(255, 0, 0);
    text('Study more!', 50, 55);
  }

They were quick to discover that you have to click mouse on canvas for it to respond to keypresses.

frameCount was used as a timer.

Try to work with simple concepts and examples and then integrate into a larger project.

References:
https://p5js.org/reference/#/p5/frameCount

:)