HTML and CSS Reference
In-Depth Information
The setting.js file
The
setting.js
file is useful to store constants of the game. For example, it can be
used to store the ile dimension that JavaScript needs to know in order to place the iles
programmaically.
Classified intel
We will use
class
to represent which type of ile an HTML is. Someimes, we can use the
HTML5
data-
atribute to embed element-speciic data. For example, the following HTML
represents a gold coin object having an
amount
value of
50
:
<div class='gold coin' data-amount='50'></div>
The role of HTML, CSS, and JavaScript
Keep in mind that we put a lot of effort to separate logic, data, and view. The following figure
shows how different parts are separated; data, view, and the logic controlling these parts.
Separaing the data and view helps make our code easier to maintain:
(Data)
JavaScript
(View)
HTML
(view elemet)
CSS
(visual)
You may noice that we only tell the JavaScript and HTML what ID the ile is, but we never
deine how they look there. All visual properies are deined in CSS.
As a DOM element-oriented game, HTML is where we define the game objects—scenes,
player, iles, and the user interface.
CSS is the visual part of these elements. It deines the visual look, dimension, and posiion
of the elements.
JavaScript stores the game data and game states. It also controls
and updates the game objects.
