HTML and CSS Reference
In-Depth Information
width: 200px;
height: 200px;
position: absolute;
left: 30px;
top: 70px;
}
/* individual pattern */
.pattern {
width: 200px;
height: 200px;
background-size: contain;
}
.pattern[data-pattern='1'] {
background-image: url(images/pattern1.png);
}
/* pattern 2-5 puts here */
.pattern[data-pattern='6'] {
background-image: url(images/pattern6.png);
}
.composition {
position: relative;
height: 200px;
background: white;
}
.composition > .pattern {
position: absolute;
}
Objective complete - mini debriefing
We created the visual and data composiion of a quest. Let's go in detail on what we have
done in this task.
Separating the data and view
While designing games, we usually want to separate the logic of manipulaing data and the
logic of displaying and drawing elements. In our logic, the composiion and quest are data.
The scenes are for displaying. That's why we use the
gameScene.visualize
method to
display data into the DOM element once we declare the quest composiion data.
We need to dynamically create elements to represent the patern in the quest DOM node.
Someimes we create HTML directly in JavaScript and append it to the node. A beter
approach is to have the HTML placed inside, well, HTML. That's why we have the template
element for JavaScript to clone it and put it back into the quest node.
