HTML and CSS Reference
◦ Step 4: Create the heads-up display.
You'll start by creating blue shields that protect a player's ships from incoming fire. After
that, you'll create laser rounds, which need to handle the game's collision logic. Lastly,
you'll set up the HUD, which presents a player's remaining lives and accumulated points.
Here we go.
Step 1: Create shields for defense
The shield in figure7.9 is more complex than anything you've created because it comprises
several pieces. Every shield piece must have hit points (hp) and an opacity value attached
to it. Hit points are a measurement of how many times something can take damage.
Figure 7.9. Shields comprise eight different pieces (right image) that take three shots each before disappearing.
You'll create four shields, each with eight different pieces. Assemble them with the follow-