HTML and CSS Reference
In-Depth Information
ctx.fillStyle = "#FFFFFF";
ctx.textAlign = "center";
ctx.font = "bold 40px bangers";
ctx.font = "bold 20px bangers";
ctx.fillText(subtitle,Game.width/2,Game.height/2 + 40);
Similar to the Starfield object, TitleScreen defines a step and a draw method. The step method
has only one task: to check if the fire key is pressed, and if so, call the callback that was passed in.
The draw does the majority of the actual work. First, it sets a fillStyle (white) that will be used on
both the title and subtitle. Next, it sets the font for the title. You can horizontally center the title on the page by
moving x to half the width of the canvas. Next is a call to fillText with this calculated x location and half
the height of the canvas.
To draw the subtitle, the same calculation is repeated with a new font, and then the vertical position is offset
by 40 pixels to place it below the title.
You now need to add the title screen onto the page as a new board above the background starfields. Modify
your startGame method as shown, and add in a new callback called playGame :
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));
Game.setBoard(3,new TitleScreen("Alien Invasion",
"Press space to start playing",
var playGame = function() {
Game.setBoard(3,new TitleScreen("Alien Invasion", "Game Started..."));
If you reload the browser, you should see a title screen, and after you press the spacebar, the title screen
should update the subtitle to say “Game Started.” The playGame function will be replaced with code to actu-
ally start to play the game in the next section.
Adding a Protagonist
The first step to turn Alien Invasion into an actual, playable game is to add a player-controlled ship. This is the
first sprite that you add to the game. In the next chapter, you create a GameBoard class to manage the many
sprites that are on the page at once during normal gameplay, but for now a single sprite is enough to start.
Search WWH ::

Custom Search