HTML and CSS Reference
In-Depth Information
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 current
GameState that will hold the current application state constant value:
Search WWH ::

Custom Search