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.
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
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
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;
}
}
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.
}
