HTML and CSS Reference
In-Depth Information
For security reasons, LocalStorage API only allows access
to the data that was saved on the same domain.
Classified intel
The
Ticker
icks the registered funcion in every frame. We are going to automaically
save the game but saving it on every frame would result in frequent I/O operaions.
Hence, we use the
getTicks
method and invoke the saving ater every 100 icks.
Having more than one saving slot
Both the key and value are stored in string format on the local storage. We learned how
to serialize data into values. We can apply a similar approach to the key. For example, if
we want to provide three saving slots, we can define the key as
game.<slot_number>.
buildingList
. Assuming that at this moment we load the second saving slot, we use
the following code:
var savingSlot = 2;
var loadData = localStorage
['game.' + savingSlot + '.buildingsList'];
Since the storage happens on the client side, the player can
use a browser as a developer tool to alter any value in the
local storage. If your game needs a more secure storage, you
may store the values on the server and cache them with local
storage. After this, validate the data sent from the client side.
Mission accomplished
We have created a city-building game. The game has a 2.5D depth with an isometric view. This
isometric projecion requires some mathemaics on both the display and mouse interacion.
We have also introduced a ime delay to let a player wait for the building construcion to be
completed. Finally, we save everything so that the players can quit and resume the game at
any ime. The following is a screenshot of my city stacking up coins:
