HTML and CSS Reference
In-Depth Information
In order to atach the object to prototype, we use
Object.create
. The original object's
prototype is atached to the new object. It allows us to directly inherit an object's instance
into a new object without going through the tradiional abstract class deiniion.
Another approach to put a different object into the prototype is using the
Function
and
new
approaches. When we deine a funcion, we can use
new
to create an object from the
funcion. For example, observe the following funcion:
function Scene() {}
Scene.prototype.show = function() {}
Scene.prototype.hide = function() {}
Now, when we create a scene object instance by using
new Scene(),
the instance has the
method
show
and
hide
. If we want to have a
GameScene
deiniion based on the
Scene
,
we can do that:
function GameScene() {}
GameScene.prototype = new Scene();
In this funcion, we have added an instance of
Scene
into
GameScene
. Therefore, the
GameScene
instance now has all the funcionaliies of
Scene
.
More explanaion on the diference between the new instance approach
and the
Object.create
approach can be found in the following link to
a post from the Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Global_Objects/Object/create
Classified intel
Besides changing the CSS
.in
and
.out
classes of the scenes, we can also add extra
animaion or logic when the scene shows and hides. Instead of the plain scene movement,
we can further enhance the transiion by deining the game objects
in
and
out
of the CSS
rule. For example, we can make the butons fade out during the transiion, or we can drop
the quest element to the botom to create an illusion of it being unlocked; this can be done
using the following code:
// an example of custom hide function
gameScene.hide = function() {
// invoke the hide function inside the prototype chain.
// (aka. super.hide())
Object.getPrototypeOf(this).hide.call(this);
