Remasteroids

A semi-port of the arcade game Asteroids written in p5.js

Comment

Inspiration

I personally was inspired because I thought the simple design but more complex mechanics of Asteroids would be interesting to explore in Javascript. I also thought that exploring the kind of vector graphics employed in the original arcade game could be challenging but rewarding to implement.

What I learned

I learned a lot about making coordinates around a circle -- the rendering of the ship as well as the asteroids were founded on drawing points on a consistently rotating circle. I also explored the beginnings of AJAX in attempting to make a persistent leaderboard, but had to abandon these efforts due to difficulties arising from Chrome and my PHP file's failure to execute. I also learned a lot about writing code around classes, as the text rendering system I devised for my program relied on using several instances of a class emulating a 14-segment display.

How I built it

The program is written entirely in Javascript (about 430 lines of code) using the p5.js library -- everything, including text display, is handled as drawing lines between points as opposed to shapes or prebuilt fonts, in the same vein as the original Asteroids arcade game.

Challenges I faced

I experienced a lot of challenges both devising the text rendering system -- 14-segment displays are complicated, especially when handling a large character set! -- and in attempting to devise a persistent leaderboard, as mentioned above. Due to Javascript being a client-side language, it could not natively read and write the files I planned to use for storing high score tables, so I attempted to use PHP and AJAX to overcome this barrier, but browser difficulties, unclear documentation, and execution issues prevented this endeavor from succeeding, so the leaderboard as it stands is reset upon page refresh.

Built With

Share this project:

Updates