HTML and CSS Reference
In-Depth Information
Mission accomplished
We created our irst playable game. We learned how to separate data manipulaion and
visual presentaion. We also learned how to manage the game scenes and create logic for
each state.
There are many ways to create games with web standard. We explored how to create the
game with HTML DOM elements, CSS properies, and JavaScript. There are other approaches
such as using canvas-drawing APIs and even with some third-party game libraries. In later
projects, we will explore these different approaches.
There are some approaches though, such as WebGL, which we will not discuss in this topic.
The programming of WebGL requires a different kind of programming skills that is not quite
related to tradiional web designing skills.
In the next project, we will create a card game that uses lipping and CSS animaion
techniques.
Hotshot challenges
There are always improvements in game development. The following secions act as
suggesions that can further enhance the game.
Storing the data in local storage
Currently, the game restarts every ime a page is refreshed. We can keep progress by saving
the completed level locally. Furthermore, we can store the current level that is in progress so
a player resumes at the exact point they left the game. We are going to discuss local storage
in
Project 5
,
Building an Isometric City Game
, when creaing the isometric city-building game.
Collecting stars
A level-unlocking game usually works beter with stars collecion. In each quest level, we
can define three levels of achievement. Each achievement rewards the player with one star.
For example, compleion of a quest can be worth the irst star, no-undo is worth the second
star, and the final star is awarded only when a player completes the level very fast.
Then, we may have a total count of all the collected stars, and it can be used to unlock new
quests or even unlocking new abiliies to help player advances.
