Example of a game with different menus, win screens and game over.
In this game we create a varaible called stage. 0 = Menu 1 = game 2 = game over and 3 = You win
We use this global variable to redirect to specific functions that draw the above stages.
var stage = 0; //stage selector
//global variables
var playerx = 320;
var playery = 240;
var speed = 5;
var coinx;
var coiny;
var score = 0;
function preload() {
}
function setup() {
createCanvas(640, 480);
}
function draw() {
//stage controller 0 = menu 1 = game 2 = gameover
if (stage == 0) { //menu
menu();
} else if (stage == 1) { //game screen
game();
}
else if (stage == 2) { //game over screen
gameOver();
} else if (stage == 4) { //you win screen
youWin();
}
//mouse click controller for stages
if (stage == 0 && mouseIsPressed == true) { //menu
newGameSetUp();
stage = 1; //start game
} else if (stage == 2 && mouseIsPressed == true) { //go to start screen from game over
setTimeout(start, 1000); //prevent game from jumping stages by adding a delay
} else if (stage == 4 && mouseIsPressed == true) { //go to start screen from you win
setTimeout(start, 1000); //prevent game from jumping stages by adding a delay
}
}
//update the game stage after 1 second from gameover screen
function start() {
stage = 0;
keyCode = null;
}
////////////////////////////////////////////////////////////////////
//Stage Functions for each aspect of game
//main menu screen
function menu() {
background(100);
stroke(100)
textSize(40);
text("Chase the Coin", 180, 50);
textSize(20);
text("Instructions", 150, 250);
text("Collect the coin and stay on the screen", 120, 300);
text("Click anywhere to play", 200, 450);
}
//Display game over screen
function gameOver() {
background(100);
stroke(100)
textSize(40);
text("Game Over", 200, 100);
}
//display the You Win page
function youWin() {
background(100);
stroke(100)
textSize(40);
text("You Won", 200, 100);
}
//main game functions
function game() {
background(color(0, 0, 0)); //draw background
updateScore(score);
fill(100); //selct stroke for player
playerMove(); //check for player input
rect(playerx, playery, 20, 20); //draw the player
fill(200);
circle(coinx, coiny, 20);
//check for game over - off the screen
if (playerx > width || playerx < 0) {
stage = 2; //gameover screen
}
if (playery > height || playery < 0) {
stage = 2; //gameover screen
}
//check for collision with coin
if (collideRectCircle(playerx, playery, 20, 20, coinx, coiny, 20)) {
//update score
updateScore(score++)
//reset position of coin if touced
coinx = random(600);
coiny = random(480);
}
//check for end of game
if (score > 4) {
stage = 4;
}
}
//////////////////////////////////////////////////////////////////////////////
//game functions
//reset variables for a new game
function newGameSetUp() {
score = 0;
playerx = 320;
playery = 240;
coinx = random(600);
coiny = random(480);
}
//display the current score in top left hand corner
function updateScore(s) {
fill(0, 102, 153);
text("Score " + s, 10, 15);
}
//control the player movemement
function playerMove() {
if (keyCode === LEFT_ARROW) {
playerx -= speed;
} else if (keyCode === RIGHT_ARROW) {
playerx += speed;
} else if (keyCode === UP_ARROW) {
playery -= speed;
} else if (keyCode === DOWN_ARROW) {
playery += speed;
}
}