HTML and CSS Reference
In-Depth Information
Step 3: Create a Welcome screen
The first step to making a Welcome screen is adding a new object called
Screen
(in the
following listing) right below your
Game
object. The screen needs a background with a
width and height large enough to cover everything. It should say “CANVAS RICOCHET”
and “Click To Start.”
Listing 6.19. game.js—Creating the Welcome screen and listener
Your Welcome screen needs a click event listener added into a new method called
Game.setup()
. Also,
Game.init()
needs to be modified so it fires from the new
screen listener. In addition, with the next listing, you'll make the listener reusable by adding
its logic into a new
Game.runGame()
method.