HTML and CSS Reference
In-Depth Information
Objective complete - mini debriefing
We have completed the task by moving the ile creaion code from HTML to JavaScript.
The Tile definition
We define the
Tile
funcion, with a capital
T
, as a deiniion that is used to create instances.
In tradiional object-oriented programming, this is known as
class deiniion
. We can define
a class deiniion whenever we have logic that requires many copies. We have a lot of ile
elements in the HTML file. The HTML file element is just a part of the view. All the logic
belonging to iles is writen in JavaScript. There will be many copies of such ile logic. This
Tile
deiniion allows us to create an instance for each ile that includes a reference to the
HTML element. The
Tile
deiniion also adds the ability to set the ile posiion on the game
view and more behaviors in later tasks.
The view object for the runway
We used a new object for the manipulaion of view of the game objects on the runway.
This is helpful for code separaion. Every ime we call something using the
game.view
namespace, we know that it should be something related to the view. Otherwise, our code
may need refactoring.
The
createTile
method groups the following steps involved in creaing a dynamic ile element:
1. Create a ile element.
2. Create a new instance of the ile data object.
3. Store the ile data object in an array.
4. Insert the elements on the floor.
The
reset
method removes all the ile elements on execuion. This is useful when we want
to reconstruct the game after the game is over.
The temporary code
In this task, we prepared the code that defines the game objects. We need to test it before
having all the code ready. That's why we created some temporary code to call our ile creaion
from JavaScript.
Using translate3d for 2D translation
We have used translate3d for a 2D translaion because the translate3d funcion gains
GPU accelerated performance in some devices. HTML5 rocks provides a deeper insight on
how and what we can benefit from the hardware accelerated performance. Please refer to
http://www.html5rocks.com/en/tutorials/speed/html5/
, for more informaion
on HTML5 rocks.
