Space Assault: JavaScript project
In this article, I will be going through what I learned whilst doing my phase 1 JavaScript project with Academy Xi.
The project that I created is a web app called Space Assault which is a game in which the player must protect their team of astronauts from enemy spaceships by clicking on them.
Space Assault was creating using vanilla HTML, CSS, and JavaScript. The game itself is purely made by utilizing HTML’s canvas to render an animation loop that is the basis for my game.
What is the project?
Starting out I had wanted to create something simple that would display some astronauts bouncing around, their names in a list on the side, and the ability to add your own astronaut to the pack and see them animated within the canvas box. One of the stipulations of this assignment was that we must interact with an API that will return and utilize data on our page. For this, I used an API that tracks the current astronauts in space. This API returns their names and the spacecraft they are stationed on. I used this information to display the astronauts' names above their heads as they bounce around.
Upon asking for feedback from my mentor, it was suggested that I take it further as I still had 2 weeks left to complete the project and it was still in a fairly ‘bare bones’ state. The suggestion that I received was that I should turn my page into some sort of game, maybe a quiz about the astronauts or space, etc. I decided to take the advice and go a slightly different direction by creating an interactive arcade-style game with persistent high scores, player-made teams, and a UI for the player.
Another of the stipulations for the project was that it all must be created using ONE HTML page. This meant no redirects to separate pages. Because of this, when changing ‘screen’ by pressing a button I used JavaScript to simply stop displaying certain elements. For example, if I was on the home screen and pressed the ‘High Scores’ button, it would then set the home screen elements display to ‘none’ and set the high scores page display to ‘inline-block’ or whatever I was using for that element. While this is probably not the most elegant solution out there, it was one that I came up with on my own and it solved my problem.
What did I learn?
I learned a lot through trial and error. Figuring out Canvas and how it does what it does was one of the hardest things I’ve done so far. Going from recently learning how to utilize and create objects in JavaScript to creating multiple objects with random values that dictate its velocity, direction, rotation, etc all of which are being updated every millisecond was something that I think improved my skills drastically.
I learned much more about classes, bootstrap, IIFE’s, game design, and a whole lot about problem-solving when I don't have strangers on the internet who have already asked my question.
What problems did I face?
I stumbled into several issues whilst creating this project. I could not find many people that had used canvas to create a game as I have and so I felt I was in unknown territory and found little relevant help on stack overflow. Many of the people that had used canvas and posted solutions to problems were simply creating an animation or a drawing tool. The biggest issue that I had was that I could not figure how to put event listeners on moving elements and have them be interactable. Whilst there were solutions on the internet, they all used very advanced math that I didn’t feel comfortable putting in my project as I didn’t understand what each part was actually doing. So I decided to create my own solution to this problem.
To preface the solution, I’ll explain the problem. While playing the game there are enemies flying towards a central point. The player must click on the enemy ships to destroy them before they reach the center. The enemies were not interactable as they were moving. At first, I was trying to simply add an event listener every time the loop drew them on the canvas. Whilst this did work in a way it ended up just adding thousands and thousands of event listeners onto each element which eventually (and quickly) crashed my site, and on a few occasions, my computer.
The way that I fixed this problem was simple. All I did was add an event listener to the canvas element that returned the X and Y coordinates of wherever I had clicked at the time. It would then run through all of the X and Y coordinates of my moving elements and if any of them were within those X and Y coordinates then that must be the element that I had clicked. This way I was able to interact with the elements without actually having to put event listeners on each one and making my site unusable.
Design process
I came up with how I wanted Space Assault to look as I went. As it all started coming together I had realized that I was going for a more retro look, using a very retro font, the buttons I had created looked retro. So I leaned into it and added the pixel art background with a subtle animation added to it to look like everything else was floating. I'm happy with how it all turned out however I would have liked to design the astronauts and enemies myself, sadly I ran out of time to do this though.
The Game
The following is each screen of the game:
Final Thoughts
I really enjoyed doing this project and am happy with how it all turned out. If I was to do it again I don't think that I would change much besides have a much more solid plan before starting development. My file structure was very messy towards the start and that made everything just a little bit harder. I would estimate that it cost me several hours over the course of the project just because my files were unordered and messy.
I have gained brand new respect for JavaScript and its power. It has certainly rivaled, if not surpassed, my love of Python and I think that I will be predominantly using it in the future.
