SVG JS/ES Asteroids Video Game for Modern Chrome Browser

Browser-Based Asteroids-clone Video Game

Using 2020 JavaScript features available in Chrome browser

Earlier this year, during the beginning of the major social-distancing requirements (due to COVID), I finally decided to spend a few weeks of my free time writing a video-game clone that would make use of some of the newest features of JS / ECMAScript.   I ended up writing a clone of the famous 1979 Asteroids video game, but with all sorts of extra features and improvements (as I deem them).

JavaScript Features Used

• requestAnimationFrame / cancelAnimationFrame  — which keeps the game frame-rate flowing nicely even as many Space Rocks and UFOs are threatening your existence.
• Asynchronous code — a nice bit of async function and await / Promise usage!
• JS Classes  — including plenty of encapsulation, inheritance, static variables and such
• Game-pad support  — in addition to keyboard controls, I used the standard JS gamePad object to implement Xbox (or similar controller) support
• Sound — without any extra files, but rather using audioCtx oscillator features

CSS / SVG Features

• Animation — CSS animation of fills, strokes, etc.
• SVG Symbol and Def — for maximum re-use via SVG use.

In the end, I was able to achieve a LOT of interesting visual-effects without the need to resort to a lot of custom animation code. 

UFO-Infested Space Rocks Video Game

I placed my UFO-Infested Space Rocks Video Game online at Github for anyone that wants to play with it.  The game play evolves as you go, presenting "smarter" aliens and an ever more frenetic pace.  The game works wonderfully in modern Chrome browser on the PC.  There are issues with it in Firefox.  I have not even tried to use it on a phone or whatever (no idea how keyboard controls or game controller logic would make any sense there).

Further Software and Technology Reading

Continue to read this Software Development and Technology Blog for computer programming articles (including useful free / OSS source-code and algorithms), software development insights, and technology Techniques, How-To's, Fixes, Reviews, and News — focused on Dart Language, SQL Server, Delphi, NVIDIA CUDA, VMware, Typescript, JavaScript / ECMAScript, SVG, other technology tips and how-to's, plus my varied political and economic opinions.