We had been setting game_mode to an empty string. The first thing we'll do is change that so it
starts off set to "pre-start":
var game_mode = 'prestart'; // prestart, running or over
The next thing is to alter Do_a_Frame to handle each of the
three different scenarios. Some things happen
irrespective of which game_mode we're in, others
depend on the mode.
We use a switch-statement to select between them.
function Do_a_Frame () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
bird.Do_Frame_Things();
switch (game_mode) {
case 'prestart': {
display_intro_instructions();
break;
}
case 'running': {
show_the_pipes();
make_bird_tilt_appropriately();
make_bird_slow_and_fall();
check_for_end_game();
break;
}
case 'over': {
display_game_over();
break;
}
} // switch
}
Note the important use of "break" in each case section, as explained when we learned about the switch statement in the preceding topic.
To keep things small and tidy, I'm calling two functions to do a lot of the displaying. We haven't defined those yet, so that's next.