This is a big entry and feature. According to my plan, this is what I’m slated to hash out for my HUD.

So, I’ve set about to start hashing in all these visual elements.  Starting with the Health Bar… ultimately, I ended up with just divs that have borders and background colors.  I use CSS to position and size them appropriately, and then I use Peasy-UI to render the correct ones based on health.  Simple and straight forward enough.   I may have to play with some flexbox stuff, there are small aspects that aren’t behaving the way I want from a positioning standpoint, but I’ll fix that later.

Next came the Ammo energy bar…  This again is a couple of divs and I change the CSS of one to simulate the rising and falling energy levels.  In gameplay, as you use your ammo the energy depletes.  You recharge ammo slowly over time, or if you destroy an asteroid, you harvest a bit of energy out of it to give you about 30% ammo boost.

Then I moved on to some of the text-based items, Lives, Level and score…

This is straight forward, sans the lives indicator.  I used divs with the player image as their background and I use Peasy-UI to render the correct amount based on how many lives the player has remaining…. Pretty straight forward.

I also added an experience bar under the text elements and I treat it very similarly to the ammo energy bar, just turned on its side.  As you destroy asteroids, it fills up, and when it becomes full, you gain a Level…  Levels impact spawning rate of the asteroids as you go.

Finally, I added a status message for Starting game, dying, and game over.  It’s just a div with a span element in it, and I use Peasy-UI to change the message and control its rendering and un-rendering.

This currently hosted game site: https://mookie4242.itch.io/asteroids-plus-20

Twitter: @jyoung424242

SlideShare: https://www.slideshare.net/JustinYoung3/next-gen-asteroids

GitHub: https://t.co/utxHxXKdOz