HTML5 Canvas [150]
We’ll resolve the first issue when we start to code the complete game, but for now, let’s look at how to apply a maximum velocity to our current movement code. Suppose we give our player ship a maximum acceleration of 2 pixels per frame. It’s easy to calculate the current velocity if we are only moving in the four primary directions: up, down, right, left. When we are moving left or right, the movingY value will always be 0. If we are moving up or down, the movingX value will always be 0. The current velocity we are moving on one axis would be easy to compare to the maximum velocity.
But in our game, we are almost always moving in the x and y directions at the same time. To calculate the current velocity and compare it to a maximum velocity, we must use a bit more math.
First, let’s assume that we will add a maximum velocity variable to our game:
var maxVelocity = 2;
Next, we must make sure to calculate and compare the maxVelocity to the current velocity before we calculate the new movingX and movingY values. We will do this with local variables used to store the new values for movingX and movingY before they are applied:
var movingXNew = movingX+thrustAcceleration*facingX;
var movingYNew = movingY+thrustAcceleration*facingY;
The current velocity of our ship is the square root of movingXNew^2 + movingYNew^2:
var currentVelocity = Math.sqrt ((movingXNew*movingXNew) + (movingXNew*movingXNew));
If the currentVelocity is less than the maxVelocity, we set the movingX and movingY values:
if (currentVelocity < maxVelocity) {
movingX = movingXNew;
movingY = movingYNew;
}
A Basic Game Framework
Now that we have gotten our feet wet (so to speak) by taking a peek at some of the graphics, transformations, and basic physics we will use in our game, let’s look at how we will structure a simple framework for all games we might want to create on HTML5 Canvas. We will begin by creating a simple state machine using constant variables. Next, we will introduce our game timer interval function to this structure, and finally, we will create a simple reusable object that will display the current frame rate our game is running in. Let’s get started.
The Game State Machine
A state machine is a programming construct that allows for our game to be in only a single application state at any one time. We will create a state machine for our game, called application state, which will include seven basic states (we will use constants to refer to these states):
GAME_STATE_TITLE
GAME_STATE_NEW_GAME
GAME_STATE_NEW_LEVEL
GAME_STATE_PLAYER_START
GAME_STATE_PLAY_LEVEL
GAME_STATE_PLAYER_DIE
GAME_STATE_GAME_OVER
We will create a function object for each state that will contain game logic necessary for the state to function and to change to a new state when appropriate. By doing this, we can use the same structure for each game we create by simply changing out the content of each state function (as we will refer to them).
Let’s take a look at a very basic version of this in action. We will use a function reference variable called currentGameStateFunction, as well as an integer variable called currentGameState that will hold the current application state constant value:
var currentGameState = 0;
var currentGameStateFunction = null;
We will create a function called switchAppState() that will be called only when we want to switch to a new state:
function switchGameState(newState) {
currentGameState = newState;
switch (currentState) {
case GAME_STATE_TITLE:
currentGameStateFunction = gameStateTitle;
break;
case GAME_STATE_PLAY_LEVEL:
currentGameStateFunctionappStatePlayeLevel;
break;
case GAME_STATE_GAME_OVER:
currentGameStateFunction = gameStateGameOver;
break;
}
}
We will call the runGame() function repeatedly in the setInterval() method. runGame() will call the currentGameStateFunction reference variable on each frame tick. This allows us to easily change the function called by runGame() based on changes in the application state:
setInterval(runGame, intervalTime );
function runGame(){