HTML and CSS Reference
In-Depth Information
Your Hotshot objectives
We will go through the following eight tasks to complete the project:
F
Creaing a responsive layout
F
Decoraing the game
F
Making the sushi
F
Creaing a customer queue
F
Refilling sushi ingredients
F
Adding sound effects
F
Distribuing the game
F
Making the game mobile friendly
Mission checklist
The project's folder structure is similar to what we covered in the previous projects. We have
the
index.html
file as the entry point, the
Styles
folder for CSS files, the
Images
folder
for graphic assets, the
Vendors
folder for third-party libraries, and the
Scripts
folder for
all logic files. We will also add an
audio
folder for sound effect files.
SoundJS
In this project, we add an audio library that will help us play sound effects. It is called
SoundJS
and it is part of the
CreateJS
suite. We can download it from the CreateJS website or from
the code bundle of this topic.
The HTML file will import the logic files in the following order:
<script src="vendors/easeljs-0.7.1.min.js"></script>
<script src="vendors/tweenjs-0.5.1.min.js"></script>
<script src="vendors/movieclip-0.7.1.min.js"></script>
<script src="vendors/preloadjs-0.4.1.min.js"></script>
<script src='scripts/assets.js'></script>
<script src='scripts/helpers.js'></script>
<script src='scripts/view.js'></script>
<script src='scripts/data.js'></script>
<script src='scripts/customer.js'></script>
<script src='scripts/game.js'></script>
Note that during development, we separate logic into many
iles; however, in producion, we try to merge them all into
one ile. We will discuss this later when distribuing the game.