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:
