HTML and CSS Reference
The board references the enemies in two places. We have an array to store all the enemies,
and we have a 2D array to store where we have enemies on the grid.
We will use the list to check the collision between enemies and buildings. On the other hand,
we use the 2D map to detect the collision between bullets and the enemies.
We maintain a 2D map so that we can quickly know how the game objects are distributed on
the map without looping all the enemies. This is paricularly handy when we are working on
a grid-based logic. For example, we may want to know whether the ile selecion for a new
building hits any enemy. Alternaively, we may alert the player when any enemy is reaching
We are going to discuss this more ater we work on atacking mechanisms and bullets in
We need energy to build the buildings. In this task, we generate energy for each satellite
built on the board.
Prepare for lift off
Before we start this task, we need to revert the game parameters that we temporarily
changed in the previous secion. In the game.js ile, we set the iniial lives to 20 and
the energies to 120 :
game.lives = 20;
game.energies = 120;
We have the new display object, an energy bubble, which can be collected when it is
generated by satellites. Add the energy.js file to the board-objects folder and
include it into the HTML: