Game states

As a matter of style, and to help modularize your code, I recommend structuring your game loop like this:

  1. //Set the game state
  2. state = play;
  4. //Start the game loop 
  5. app.ticker.add(delta => gameLoop(delta));
  7. function gameLoop(delta){
  9.   //Update the current game state:
  10.   state(delta);
  11. }
  13. function play(delta) {
  15.   //Move the cat 1 pixel to the right each frame
  16.   cat.vx = 1
  17.   cat.x += cat.vx;
  18. }

You can see that the gameLoop is calling a function called state 60 times per second. What is the state function? It’s been assigned to play. That means all the code in the play function will also run at 60 times per second.

Here’s how the code from the previous example can be re-factored to this new model:

  1. //Define any variables that are used in more than one function
  2. let cat, state;
  4. function setup() {
  6.   //Create the `cat` sprite 
  7.   cat = new Sprite(resources["images/cat.png"].texture);
  8.   cat.y = 96; 
  9.   cat.vx = 0;
  10.   cat.vy = 0;
  11.   app.stage.addChild(cat);
  13.   //Set the game state
  14.   state = play;
  16.   //Start the game loop 
  17.   app.ticker.add(delta => gameLoop(delta));
  18. }
  20. function gameLoop(delta){
  22.   //Update the current game state:
  23.   state(delta);
  24. }
  26. function play(delta) {
  28.   //Move the cat 1 pixel to the right each frame
  29.   cat.vx = 1
  30.   cat.x += cat.vx;
  31. }

Yes, I know, this is a bit of head-swirler! But, don’t let it scare you and spend a minute or two walking through in your mind how those functions are connected. As you’ll see ahead, structuring your game loop like this will make it much, much easier to do things like switching game scenes and levels.