HTML and CSS Reference
In-Depth Information
A game scene is another object. However, we do not create it as a normal object. We use the
Object.create
method with this scene as the argument. The
Object.create
method
will chain the argument as the new object's prototype. This is known as a
prototype chain
.
What if we want to show a different effect for hiding a game scene? It depends on whether
your effects are done in CSS or JavaScript. If it is a CSS-only effect, you can just add rules to
the
#game-scene.out
scene. In the management part of the scene,
.in
is to display the
scene and
.out
is for rules that hide the scene.
For the CSS approach, assume that we want a fade-out effect; we can do so using the
following CSS rule:
#game-scene.out {
opacity: 0;
top: 0;
}
Prototype chaining
JavaScript is an object-oriented programming language without the requirement of a class
deiniion. It uses a prototype chain for object inheritance. Each object comes with a special
prototype
property. The prototype defines what this object is based on; you can think of it
as inheritance in tradiional object-oriented languages.
Let's take a look at how JavaScript accesses object properies. When we call
Scene.show()
,
it takes a look at the property list and finds a property named
show
, which is of the type
function
.
Imagine now that the
show
method is not there. The JavaScript runime looks it up in the
prototype. If it is found inside the prototype, it returns the method. Otherwise, it keeps
looking up prototype's prototype unil it reaches a generic object.
This is the meaning of prototype chaining. We build an object based on another object
by puing the other object into the prototype. The following screenshot shows the
startScene
property and the properies in its prototype (
scene
):
