HTML and CSS Reference
Objective complete - mini debriefing
We have created scenes in this task. Now let's take a closer look at each block of code to see
how they work together.
Each buton is of 145 pixels by 39 pixels in size and has two states: a normal and a hover
state. Both states are combined in one image and thus the final image is of 78 pixels in
height. The botom part contains the hover state. We switch these states by seing the
background's y posiion to 0 pixel for the normal state and -39 pixel for the hover state,
as shown in the following screenshot:
Placing the scene logic and the namespace
We encapsulated the scene's management code in a file named scene.js . Similar to the
game.js ile, we start every logic ile with a self-invoked anonymous funcion. Inside the
funcion, we use the same namespace: colorQuestGame .
The transition between scenes
We use CSS to control the visibility of the scenes. The .in and .out CSS properies that
apply to all the scenes have different top values. One is -150% to ensure it is not visible,
and the other is top: 0 ; therefore, it is visible in the game element.
Then, we toggle each scene between the .in and .out class to control the visibility.
In addiion, we add transiion to these CSS rules so changing the value from 0 to -150
percent and vice-versa becomes a smooth animaion.
The scene object inheritance
There are four scenes in this game: the pregame start scene, game scene, game over scene,
and level-completed summary scene. Each scene shares certain common logic; this includes
logic. The scene is an object with default show-and-hide behaviors. It also defines a dummy
sceneElement property that points to the DOM element of that scene.