HTML and CSS Reference
In-Depth Information
ctx.drawImage(stars,
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.
