Cosmokaze

Cosmokaze is a browser-based space shooter built with vanilla JavaScript, HTML5 Canvas and CSS. The player controls a spaceship with arrow keys, fires lasers with the spacebar and avoids falling meteors while collecting ammo drops. The game includes a scoring system based on survival time and meteors destroyed, with a game over screen and replay functionality.

While I’m generally interested in web development, I was inspired to give some work in the canvas a try after completing a natural simulations course on Khan Academy that used ProcessingJS. The project was also designed as an early exploration into object-oriented programming, and I structured the codebase around custom classes like Ship, Laser, Meteor, MeteorSystem, Explosion, etc.

One of the most technically interesting parts was the basic physics simulation. I implemented a custom Vector class to handle position, velocity and acceleration calculations, enabling meteors to bounce off walls and collide with each other using force-based responses.

The game also features a very basic particle system: the ship generates a dynamic exhaust trail, and I developed an explosion effect system that uses HSB-to-RGB color conversion to create vibrant particle bursts when meteors are destroyed. It’s a little silly, but I really enjoyed putting this together because I conceptualised and implemented it without following any template.

One major challenge for me was the collision detection system. I’m not at all familiar with game development or the typical ways to approach this. Determined to solve it independently without referencing online resources, I experimented with various geometric approaches, including triangular collision detection and Pythagorean calculations. Eventually, I settled on a two-stage system: first performing bounding box checks to quickly eliminate non-colliding objects, then using more precise point-based detection with 17 carefully positioned collision points on the ship’s shape. This approach balances performance with accuracy, ensuring that the game feels responsive while maintaining fair hit detection.

Give it a try and have fun!

View project
Gameplay in Cosmokaze.
Game over screen.