NEW PROJECT – Space Invaders

Space Invaders is a bare-bones facsimile of the classic arcade game of the same name.

Objective

I wanted to take what I learned from the Asteroids Tutorial in my last project and iterate without the training wheels this time. Space Invaders has more lateral movement from the player and hostiles than in Asteroids, and has an additional interactable object in the form of shields between the player and the hostiles that require sphere-to-rectangle collisions.

Development

Establishing the canvas scene, controls, end screen, and missile-to-object collisions were very similar to the setup from asteroids, so I got that out of the way first. This time the hostile objects have projectiles of their own, so that was another object array to contend with. All four objects involved the same kind of spherical graphics, so the collisions were relatively simple. The sphere-to-rectangle collisions were uncharted territory and more complicated.

The aliens and shields are drawn from arrays that detect the width of the window and draw a number of objects based on the horizontal space available, so the game scales to the browser.

Hurdles

Getting the aliens to move in a tick sequence rather than gliding smoothly across the screen was more challenging than it needed to be. I ended up inadvertently making the first half of the other arcade game Centipede and forked my project at that point so I could use it as another practice game later. Ultimately, I needed to zero out the velocity all together and add/subtract position values on an interval timer. I was just over-thinking it.

The sphere-to-rectangle collisions were another sticking point, and I needed to cheat with the math a little. Because the shield objects have a width property, I needed to detect collisions with missiles all along the length. The logic of that threw me so I looked up a reference.

Takeaways

I need to take my time more when it comes to establishing formulas. I probably could have figured out the rectangle collisions on my own in a session or two if I’d had the patience. Part of my doing this is to code more readily without leaning on docs, forums, and chatbots as much. I did better overall than in the Asteroids game, though. There is enough overlap in some of the general principles of structuring little games like this that I’m starting to understand what’s needed. Draw the canvas, establish the animation loop, populate with objects that have positions, boundaries, and velocities, update objects in the animation loop, manipulate them with event listeners and timers, clean them up when they go off-screen, etc.

I ended up with some nice reusable functions for handling both sphere-to-sphere and sphere-to-rectangle collisions that I can carry over to my centipede game.

I might come back and add one more quality of life feature where the shields re-center after they are hit with a laser. I just need to detect if the hit is to the left or right of center, then shift the x position left or right accordingly.