HTML5 Canvas [151]
currentGameStateFunction();
}
Let’s look at the complete code. We will create some shell functions for the various application state functions. Before the application starts, we will call the switchGameState() function, and pass in the constant value for the new function we want as the currentGameStateFunction:
//*** application start
switchGameState(GAME_STATE_TITLE);
In Example 8-9, we will use the GAME_STATE_TITLE state to draw a simple title screen that will be redrawn on each frame tick.
Example 8-9. The tile screen state
NOTE
Example 8-9 added in the ConsoleLog object from the previous chapters. We will continue to use this utility to create helpful debug messages in the JavaScript log window of the browser.
We will continue to explore the application state machine, and then create one for our game logic states in the upcoming section, Putting It All Together.
The Update/Render (Repeat) Cycle
In any of our application states, we might need to employ animation and screen updates. We will handle these updates by separating our code into distinct update() and render() operations. For example, as you might recall, the player ship can move around the game screen, and when the player presses the up arrow key, the ship’s thrust frame of animation will be displayed rather than its static frame. In the previous examples, we contained all the code that updates the properties of the ship, as well as the code that actually draws the ship, in a single function called drawScreen(). Starting with Example 8-10, we will rid ourselves of this simple drawScreen() function and instead employ update() and render() functions separately. We will also separate out the code that checks for the game-specific key presses into a checkKeys() function.
Let’s reexamine the contents of the drawScreen() function from Example 8-8, but this time break the function up into separate functions for each set of tasks, as shown in Example 8-10.
Example 8-10. Splitting the update and render cycles
function gameStatePlayLevel() {
checkKeys();
update();