Star Wars Fleet – Free Online Game

Click to Play for Free Online

What do you do when you have a week of vacation with built-in grandparent babysitting? You make a Star Wars video game, of course! The vast majority of this game was created during a one week coding blitz. I’ve done a lot of minor tweaking due to observations and bugs found while playing the game with my son, but about 90% of it was written in that one week. This game was actually originally created as a card and dice fleet battle game that I made months ago. I thought it would be fun to port it over to the computer.

Basically, you tap one of your ships and then tap one of the mission icons that show your available actions.

  • Attack – basic blaster attack. Each ship has different attack ranges for attacking fighters or capital ships.
  • Strafe – a fighter can fly underneath the shields of a capital ship to cause direct damage to the hull. Or the fighter might get blasted by the capital ship while it attempts this mission.
  • Attack Shields – a fighter can heavily damage the shields of a capital ship. Or it might get blasted by the capital ship.
  • Attack Guns – a fighter can destroy a capital ship’s ability to shoot other capital ships. Or it might get blasted by the capital ship.
  • Heal Self – a capital ship can repair damage to its hull.
  • Heal Shields – a capital ship can repair damage to its shields.
  • Repair Guns – a capital ship can repair damage to its guns that attack other capital ships.

There are four different AI characters you can play against, each with its own strategy. Sergeant Niles is pretty easy to defeat. Admiral Skeedl will surprise you sometimes!

The game also supports player-vs-player battles at the same computer. I didn’t bother to create an online multiplayer component for this game since my son and I just battled each other in-person. In a player-vs-player battle, you can select from a wider range of avatars for your player.

The Tech Side

This game was built with the Phaser 3 JavaScript and HTML5 game development framework, and I used the Webpack asset bundler and Babel to enable developing with newer features of JavaScript. The game is served with a simple NodeJS server app. This is my default setup for quick online games. When I made my last game, A-MAZE-ing!, I created a template full of the best practices I had learned. That came in handy for this one, so I’m going to say the template was worth the effort.

Stats from my original card and dice version

The Star Wars art was taken from various fan sites. The character avatars, sounds effects, and music loops were from various bundles I have accumulated from Humble Bundle over the years. The icons for the interface were from Kenney’s user interface pack.

Behind the scenes, each type of ship has a range of values. You can see what the original cards looked like in this image. The top row is attacking fighters. The second row is attacking capital ships. The third row is repairing the hull. And the fourth row is repairing shields. So you can see that most of the capital ships aren’t very good at attacking fighters. They will miss most of the time. I also incorporated some little details from Star Wars lore. For example, the Mon Calamari MC80 Cruiser is known for having a comparatively weak hull but excellent shields. So you can see that it has a much lower hull value than the Imperial Star Destroyer, but also much higher shields. Also, the MC80 can repair more of its shields per turn than the Imperial Star Destroyer can.

Fighters have additional options, as you saw above in the list of missions. The ability of starfighters to do special and unexpected things to capital ships has been a staple of the Star Wars universe ever since Luke Skywalker destroyed the Death Star in his X-Wing. Or if you remember the giant fleet battle in Return of the Jedi, two tiny A-Wing starfighters destroy the shield generator of the mighty Super Star Destroyer Executor. Then another A-Wing crashes into the bridge, causing major damage. With events like those in mind, I added the ability to fly in under the shields to strafe a capital ship (skipping the shields and causing damage to the hull). I also added the ability to target the shield generators (causing 5 damage if successful) and turbolasers (reducing the capital ship’s ability to damage other capital ships).

But those special fighter missions come with a price. They have a chance to succeed, a chance to miss, and a chance that the capital ship gets to blast the starfighter instead! Watch out! Underneath the hood, the main missions are resolved with the equivalent of a 6-sided dice roll. The special fighter missions have ranges of success and failure using the equivalent of a 20-sided dice roll.

Game Balance

I believe the most interesting aspect on the tech side of this project was how I determined game balance. Obviously I played it many times, and I learned a ton by watching my five-year-old play it without instructions from me. He understood it quickly, but whenever he asked a question or misunderstood something I took that as an opportunity to update the visuals and sound effects to try to make it more obvious what happened. He also found a lot of tiny bugs I never would have found. For instance, he discovered that you could click on the attack icon a bunch of times really fast and launch a ton of blaster bolts at the enemy instead of just one. Oops! Fixed that one at least 🙂

The primary way I determined game balance was through simulations. Underneath the hood, the computer has the ability to simulate complete battles against itself. So I pitted the various artificial intelligences against each other in thousands of mock battles. Then I made tweaks to the battles to make them pretty balanced. My goal was to have each battle be about a 50% chance when two smart players were battling each other. To simulate this, I used my most advanced AI (Admiral Skeedl) playing against himself. When Admiral Skeedl got close to 50/50 over a thousand mock battles, I called it decently balanced.

You can see a screenshot of some of the battle reports in the gallery below.

AI Strategies

I built the different AI characters with a combination of a query language and fuzzy logic.

So, at the low end, Sergeant Niles just queries a random available ship from his side and a random ship from the enemy side. And then he blasts it. That’s it. Totally random. He doesn’t know what he’s doing, so he’s pretty easy to beat.

At the high end, Admiral Skeedl uses personality-weighted fuzzy logic. His AI searches for his preferred mission in each type. He gathers…

  • The strongest enemy capital ship + the best ship to attack it
  • The most damaged enemy fighter + the best ship to attack it
  • The enemy capital ship with the strongest shields + the strongest fighter to attempt an attack run on the shield generator
  • The enemy capital ship with the strongest shields + the strongest fighter to attempt a strafing run underneath the shields
  • The ally ship closest to death to attempt a repair

Each of these available choices are then weighted with Admiral Skeedl’s personality. For reference, he really likes to attack capital ships. He doesn’t mind repairing his ships. Everything else is only when the opportunity is too good to pass up. To choose between the available missions, a random number is generated and then the personality weights are added in. The highest total (random number + personality preference) is chosen as for this turn.