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

**URL:** <https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889>\
**Category:** Libraries\
**Created:** [July 9, 2022, 2:03am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889 "2022-07-09T02:03:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![BMS](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@BMS](https://discourse.processing.org/u/BMS)\
**Post date:** [July 9, 2022, 2:03am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/1 "2022-07-09T02:03:23Z")

</div>

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](https://editor.p5js.org/nvand82/sketches/5nRf4cM5k)

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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2022, 7:41am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/2 "2022-07-09T07:41:29Z")

</div>

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

```auto
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

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

```

Hope this helps.

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 9, 2022, 11:55am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/3 "2022-07-09T11:55:09Z")

</div>

Hello @BMS,

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

> **[p5.js Tutorials](https://happycoding.io/tutorials/p5js/)**
>
> Learn how to create p5.js sketches!

`:)`

---

<div class="post-metadata">

**Author:** ![BMS](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@BMS](https://discourse.processing.org/u/BMS)\
**Post date:** [July 9, 2022, 2:32pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/5 "2022-07-09T14:32:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2022, 4:15pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/6 "2022-07-09T16:15:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2022, 4:15pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/7 "2022-07-09T16:15:59Z")

</div>

Can you please post his draw()

---

<div class="post-metadata">

**Author:** ![BMS](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@BMS](https://discourse.processing.org/u/BMS)\
**Post date:** [July 9, 2022, 5:31pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/8 "2022-07-09T17:31:10Z")

</div>

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](https://editor.p5js.org/nvand82/sketches/SZWMipAYS)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 9, 2022, 6:46pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/9 "2022-07-09T18:46:28Z")

</div>

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”:

```javascript
"use strict";

function menu() {
}

```

## “game.js”:

```javascript
"use strict";

function main() {
}

```

## “victory.js”:

```javascript
"use strict";

function win() {
}

```

## “defeat.js”:

```javascript
"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”:

```javascript
"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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2022, 7:30pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/10 "2022-07-09T19:30:38Z")

</div>

> [@BMS](#):
>
> 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.

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

```auto
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.
}

```

> [@BMS](#):
>
> Game over fail (stage 2) - when officer is hit by hydrant  
> Game over win (stage 3) - when officer hits robber with donut

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 9, 2022, 7:39pm UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/11 "2022-07-09T19:39:00Z")

</div>

Hello @BMS,

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

```auto
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](https://p5js.org/reference/#/p5/frameCount)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 20, 2023, 2:29am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/13 "2023-11-20T02:29:03Z")

</div>

This sounds like chatGPT wrote

---

<div class="post-metadata">

**Author:** ![sterretje](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sterretje](https://discourse.processing.org/u/sterretje)\
**Post date:** [November 20, 2023, 4:25am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/14 "2023-11-20T04:25:41Z")

</div>

And it took over a year to write it 🤣

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 20, 2023, 4:45am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/15 "2023-11-20T04:45:22Z")

</div>

> [@JunlyClaw](#):
>
> displayStartScreen() and displayEndScreen() functions

Not sure where you see those…?

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [November 22, 2023, 10:55am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889/16 "2023-11-22T10:55:46Z")

</div>