Progress Update: Converting The Flash Game Blasteroids To HTML5 Using Phaser, Part 8

Hey,

In this article, the series of converting the Flash game Blasteroids to HTML5 continues. The conversion process is almost complete! This is super-exciting! 🙂

Have a look at this demo video to see all the action.

The target technology I’m using for process is Phaser, and the primary tools I’m using for development are Visual Studio Code and the amazing Phaser Editor tool. Adobe Animate (formerly Adobe Flash Professional, CC, CSx) is also used, as I reference the original source code and assets many times throughout this process.

As you may be aware, Adobe is discontinuing Flash by end of this year. If you have Flash games, they will no longer work afterwards, as browsers, such as Google Chrome, will completely block Flash content.

So, if you want to preserve your Flash, you’ll have to re-build it in another platform, and if it’s to remain as a web-based game (meaning you’re NOT converting it from web to mobile), then HTML5 (Canvas/WebGL) is likely your best bet.

I previously announced that I was taking on the challenge to convert a Flash game I made for a previous client to HTML5. I will continue to post progress updates on the game until the conversion has been completed (and it’s almost there!).

The current list of articles is here:

  • Part 1 – Setting up the player
  • Part 2 – Displaying objects, keyboard input, and object wrapping collisions
  • Part 3 – Missiles, animations, and HUD
  • Part 4 – Adding text, health, and icons to HUD
  • Part 5 – Collision With Missiles, Asteroids, and Player Ship
  • Part 6 – First Power-Up Item
  • Part 7 – Adding Sound Effects
  • Part 8 – Almost done!

This article won’t focus on technical aspects of development. There’s not much new material to convert over using methods that haven’t already been covered in previous articles. I’m currently play-testing, cleaning up some AS3-to-JS code that ended up becoming obsolete, and addressing glitches, and a few other functions of the game’s engine.

At this point, all of the items, asteroids, enemy ships, missiles, and sound effects have been converted over.

Enter the Option

When I originally coded the original Flash game back in 2012, I got some inspiration from the Gradius scrolling space shooter games, Blasteroids also has the Option in it! You can collect the option power-up to add an Option to your ship.

In Blasteroids, an Option is a small vessel that orbits your ship or follows it, and fires when you fire. It is invulnerable to most attacks. You can collect up to three Options max.

Here we have the regular Option (blue), a Long Range Option (yellow), and a Power Option (red).
Here we have the regular Option (blue), a Long Range Option (yellow), and a Power Option (red).

There are currently five types of Options, and the type you collect depends on what weapons you have. Four of the five have specialized weapons that can only be obtained if you collect an Option while you have a double-weapon equipped. In other words, if both weapon slots contain the same weapon, you will create a specialized Option with a unique weapon. All other weapon combs create the regular Option.

If your ship is destroyed, any Options you have will drift off into space! When your next ship respawns, you can recollect them before they are destroyed or drift off the screen (they do not wrap around to the other side). Also, while an Option is drifting, it is vulnerable to everything.

Boss Monster!

There is also an “enemy base”, which is the game’s boss monster. After completing several stages, an alarm will sound, lights will flash, and the boss will appear! A little mellow-dramatic, eh? 🎭

Here's the blue enemy base, defended by six Mini-Cells.
Here’s the blue enemy base, defended by six Mini-Cells.

It’s a Core Cell that looks like it stepped out of the work of Metroid. It will eventually charge its primary weapon and fire it at you. It can only be damaged while it’s charging.

The Core Cell is also defended by several other Mini-Cells that behave in a similar way. They fire two types of missiles at you: their normal blue missile orbs, and a “Rainbow” Orb. You can actually destroy this missile, and if you do, it will drop an item. If your ship is being power-crapped by all these Cells, you may want to take advantage of destroying Rainbow Orbs, because they have a 100% drop rate!

That’s it for this article!

Subscribe below to my list to get updates, including work-in-progress game updates (plus the ability to play them in your PC browser) that are not available in these articles!

.

Finally, if you’d rather skip all the learning and have me take a look at your Flash game instead, reach out to me one of these ways:

Continue to stick around as I continue making progress on this game. It’s almost done!

Thanks, and talk to you later!

– C. out.