HTML and CSS Reference
In-Depth Information
The buton image follows a common pracice in web design. We put the normal, hover,
and acive states into one image. Let's prepare the image iles. Insert the following images
iles inside the project folder. We will take a look at how to create the following mulistate
images later:
We will have three types of buildings in this game. They are
Power Supply
,
Coins Generator
,
and
Merchant
. We'll create the following new file to store some building data:
scripts/data.js
We will include its code inside the
index.html
file and place it before the code of the
game.js
file, shown as follows:
<script src="scripts/data.js"></script>
When we introduce a building, we need to include the economy parameters too. It is because
the availability of the buildings depends on the resources we have. We will iniialize the
following game parameters in the
game.start
funcion:
game.coins = 100;
game.diamonds = 0;
game.powerSupplies = 100;
game.populations = 0;
![](HTML5-Game-Development_images/img-gen843.png)
![](HTML5-Game-Development_images/img-gen844.png)