HTML and CSS Reference
In-Depth Information
Objective complete - mini debriefing
The sushi is composited by ingredients. This is similar to the color quest composiion in
Project 1
,
Building a CSS Quest Game
.
We store the ingredients in the form of data called
sushiOnHand
to compare logic. At the
same ime, the DOM element of the selected ingredients is displayed on the sushi board.
We need to check whether the two arrays are equal. Our arrays are in simple one dimension.
We created a helper that checks whether both the arrays contain the same elements.
It's worth noing that the
arrayIsEqual
funcion only focuses
on comparing the given arrays. Therefore, it should not care about
soring them. On the other hand, we ensure that the arrays of
ingredients are always sorted.
When the ingredient is clicked, we put the clone ingredient's DOM node into the sushi
board. When the combinaion of the ingredient matches any sushi, we replace the cloned
ingredients with one sushi image.
Someimes a player may need to trash the things on the sushi board because of a wrong
combinaion. We trash and empty the sushi board in both the data and view. We reset the
data array by seing the length to 0. The clearing of the three ingredient layers is done by
removing all the nodes inside.
Classified intel
We cloned the ingredient node into the sushi board to composite the sushi. We used three
layers to help order the ingredients in a beter way. The three layers are seaweed, rice, and
others. A recap on the HTML layout of the three layers is given in the following code:
<div id="sushi-board">
<a id="delete-sushi-btn"></a>
<div id="others"></div>
<div id="rices"></div>
<div id="seaweeds"></div>
</div>
