An action-packed space-themed two-player strategy game from a galaxy far, far away- playable right in your browser. Optimized for both dekstop and mobile.
Tech used: HTML, CSS, JavaScript
This was my first full project using HTML, CSS, and JavaScript together. After seeing a simple tic-tac-toe project on Twitter, I decided to give it a shot myself- without the use of any tutorials.
It was important to me to come up with a theme to make the simple, predictable gameplay more entertaining. Presentation is everything, after all! While rewatching A New Hope, it suddenly came to me- X-wings and TIE Fighters looked an awful lot like X's and O's! And so, X-Wing VS TIE Fighter was born.
The JavaScript necessary for a functioning tic-tac-toe board ended up being relatively straightforward. Most of the time spent on this project was spent on the CSS and tracking down and converting media assets, fonts, and sound effects to use for the Star Wars theme. I learned several new CSS techniques- such as utilizing the relationship between an element's width property and it's padding-bottom property to create responsively resizable 1:1 ratio game board squares.
I also learned that you cannot play a JavaScript Audio object over itself, so I built an array of different sound effects for several different game events, moving onto the next Audio object in the array whenever a sound was played, in order to enable overlapping sound effects.
Anyways, give it a try and revel in the fandom!
May the Force be with you!
Take a look at these other awesome projects from my portfolio:
Magic Task Timer https://github.com/ramblingadam/magic-task-timer
Animal Crossing: New Horizons Database: https://github.com/ramblingadam/acnh
The Universe Console https://github.com/ramblingadam/nasapod
