van an nguyen

Game states: start menu, game over menu, etc.

Game and object states: start menu, game-over menu, etc.

Object states

With our game framework handling the basics, we can make things more exciting by causing something to happen when a collision occurs – maybe the player ‘dies’, balls are removed, or we should add to your score? Usually, we add extra properties to the player and enemy objects. For example, a boolean dead property that will record if an object is dead or alive: if a ball is marked “dead”, do not draw it! If all balls are dead: go to the next level with more balls, faster balls, etc…

Let’s try adding a dead property to balls and consult it before drawing them. We could also test to see if all the balls are dead, in which case we recreate them and add one more ball. Let’s update the score whenever the monster eats a ball. And finally, we should add a test in the createBalls function to ensure that no balls are created on top of the monster.

Try this jsBin!

Eat the ball game

Source code extract:

  1. function updateBalls(delta) {
  2.    // for each ball in the array
  3.    var allBallDead = true;
  5.    for(var i=0; i < ballArray.length; i++) {
  6.      var ball = ballArray[i];
  8.      if(ball.dead) continue; // do nothing if the ball is dead
  10.      // if we are here: the ball is not dead
  11.      allBallDead = false;
  13.      // 1) move the ball
  14.      ball.move();
  16.      // 2) test if the ball collides with a wall
  17.      testCollisionWithWalls(ball);
  19.      // Test if the monster collides
  20.      if(circRectsOverlap(monster.x, monster.y,
  21.                          monster.width, monster.height,
  22.                          ball.x, ball.y, ball.radius)) {
  24.         //change the color of the ball
  25.         ball.color = ‘red’;
  26.         ball.dead = true;
  27.         // Here, a sound effect would greatly improve
  28.         // the experience!
  30.         currentScore+= 1;
  31.      }
  33.      // 3) draw the ball
  34.      ball.draw();
  35.   }
  36.   if(allBallDead) {
  37.      // reset all balls, create more balls each time
  38.      // as a way of increasing the difficulty
  39.      // in a real game: change the level, play nice music!
  40.      nbBalls++;
  41.      createBalls(nbBalls);
  42.    }
  43. }

Game states: menus, high score tables etc…

In this example, we will make use of a global gameState variable for managing the life-cycle of the game. Usually, there is a main menu with a “start new game” option, then we play the game, and if we ‘die’ we suffer a game-over screen, etc…

Ah!… you think that the game has been too easy? Let’s reverse the game: now you must survive without being touched by a ball!!!

Also, every five seconds a next level will start: the set of balls is re-created, and each level has two more than before. How long can you survive?

Try this JsBin, then look at the source code. Start from the mainloop!

currentGameState = gameStates.gameOver:

Game Over Screen, asking to press space to start again

currentGameState = gameStates.gamerunning:

game running, showing score, time, level

Game state management in the JavaScript code:

  1. …
  2. // game states
  3. var gameStates = {
  4.    mainMenu: 0,
  5.    gameRunning: 1,
  6.    gameOver: 2
  7. };
  9. var currentGameState = gameStates.gameRunning;
  10. var currentLevel = 1;
  11. var TIME_BETWEEN_LEVELS = 5000; // 5 seconds
  12. var currentLevelTime = TIME_BETWEEN_LEVELS;
  13. …
  14. var mainLoop = function (time) {
  15.    …
  16.    // number of ms since last frame draw
  17.    delta = timer(time);
  19.    // Clear the canvas
  20.    clearCanvas();
  22.    // monster.dead is set to true in updateBalls when there
  23.    // is a collision
  24.    if (monster.dead) {
  25.       currentGameState = gameStates.gameOver;
  26.    }
  28.    switch (currentGameState) {
  29.       case gameStates.gameRunning:
  30.         // draw the monster
  31.         drawMyMonster(monster.x, monster.y);
  33.         // Check inputs and move the monster
  34.         updateMonsterPosition(delta);
  36.         // update and draw balls
  37.         updateBalls(delta);
  39.         // display Score
  40.         displayScore();
  42.         // decrease currentLevelTime. Survive 5s per level
  43.         // When < 0 go to next level
  44.        currentLevelTime -= delta;
  46.        if (currentLevelTime < 0) {
  47.           goToNextLevel();
  48.        }
  49.        break;
  50.     case gameStates.mainMenu:
  51.        // TO DO! We could have a main menu with high scores etc.
  52.        break;
  53.     case gameStates.gameOver:
  54.        ctx.fillText(“GAME OVER”, 50, 100);
  55.        ctx.fillText(“Press SPACE to start again”, 50, 150);
  56.        ctx.fillText(“Move with arrow keys”, 50, 200);
  57.        ctx.fillText(“Survive 5 seconds for next level”, 50, 250);
  59.        if (inputStates.space) {
  60.           startNewGame();
  61.        }
  62.        break;
  63.     }
  64.      …
  65.    };
  66. … 

And below are the functions for starting a new level, starting a new game, and the updateBalls function that determines when a player loses and changes the current game-state to GameOver:

  1. function startNewGame() {
  2.     monster.dead = false;
  3.     currentLevelTime = 5000;
  4.     currentLevel = 1;
  5.     nbBalls = 5;
  6.     createBalls(nbBalls);
  7.     currentGameState = gameStates.gameRunning;
  8. }
  10. function goToNextLevel() {
  11.     // reset time available for next level
  12.     // 5 seconds in this example
  13.    currentLevelTime = 5000;
  14.    currentLevel++;
  15.    // Add two balls per level
  16.    nbBalls += 2;
  17.    createBalls(nbBalls);
  18. }
  20. function updateBalls(delta) {
  21.     // Move and draw each ball, test collisions,
  22.     for (var i = 0; i < ballArray.length; i++) {
  23.        …
  24.        // Test if the monster collides
  25.        if (circRectsOverlap(monster.x, monster.y,
  26.                             monster.width, monster.height,
  27.                             ball.x, ball.y, ball.radius)) {
  29.            //change the color of the ball
  30.            ball.color = ‘red’;
  31.            monster.dead = true;
  32.            // Here, a sound effect greatly improves
  33.            // the experience!
  34.            plopSound.play();
  35.        }
  37.        // 3) draw the ball
  38.        ball.draw();
  39.     }
  40. }

Leave a comment