HTML and CSS Reference
In-Depth Information
0, 0,
stars.width, remaining,
0, intOffset,
stars.width, remaining);
// This method is called to update
// the starfield
this.step = function(dt) {
offset += dt * speed;
offset = offset % stars.height;
Only two parts haven't been discussed. The step function at the bottom gets called with the fraction of a
second that has elapsed since the last call to step. All it needs to do is update the offset variable based on the
elapsed time and the speed, and then use the modulus ( % ) operator to make sure the offset is between zero and
the height of the Starfield .
There's also a conditional to check if the clear parameter is set. This parameter is used to fill the first layer
of stars with a black fill. (Later layers need to be transparent so that they overlay over each other correctly.) This
prevents the need to explicitly clear the canvas between frames and saves some processing time.
To see the starfield in action, you need to modify your startGame function in game.js to add some star-
fields. Modify it to add three starfields of varying opacity by setting it to the following:
var startGame = function() {
Game.setBoard(0,new Starfield(20,0.4,100,true))
Game.setBoard(1,new Starfield(50,0.6,100))
Game.setBoard(2,new Starfield(100,1.0,50));
Only the first starfield has the clear parameter set to true . Each starfield has a higher speed combined with
a higher opacity than the last. This gives an effect of stars at different distances speeding by.
Putting in a Title Screen
An animated starfield, although nice, isn't a game. To start to build out the same elements of the game, one of
the first requirements for a game is to display a title screen showing the users what they can play.
The title screen for Alien Invasion isn't going to be anything special—just a text title and a subtitle. So a
generic GameScreen class with a title and subtitle centered on the screen is enough to get the job done.
Search WWH ::

Custom Search