Midnight Despair

• 

  frontpage

• 

  frontpage

• 

  gameplay

Inspiration

I have always wanted to build games, and this is my second one (after creating a terminal-based Snake game in C). For this project, I aimed to keep things simple while exploring the idea of an endless shooter that feels satisfying to play. This is just the foundation — my goal is to continue polishing and improving it into a truly engaging experience.

What it does

Midnight Despair is a browser-based endless survival shooter built with HTML5 Canvas. You control a rotating cannon placed at the center of the screen, firing glowing bullets into the darkness. Enemies spawn continuously from random positions and move toward you. Shooting them increases your score, while letting them reach the cannon decreases it. The game ends when your score drops too low, challenging you to survive and beat your high score.

How we built it

I used HTML5 Canvas for all the graphics — including the cannon, its muzzle, bullets, enemies, and the glowing light effect.

For the game mechanics:

Collision detection: Implemented using the distance formula between a bullet and an enemy, comparing it with the sum of their radii.

Enemy movement: Also applied the distance formula to calculate the angle toward the center, ensuring enemies always move directly toward the cannon.

Game loop & animations: Managed with requestAnimationFrame for smooth rendering and setInterval for spawning enemies at regular intervals.

Everything was built with vanilla JavaScript, without any external libraries.

Challenges we ran into

I learned a lot while working on this project — from mastering the Canvas API to creating clever visual effects like the glowing light. Some of the main challenges I faced were:

High Score Tracking – Figuring out how to store and update scores across multiple game sessions.

Canvas Coordinates – Getting used to the coordinate system, which starts from the top-left corner, and handling translations/rotations around the cannon.

Enemy Spawning – Designing a system to spawn enemies randomly after a set time interval. I solved this using the setInterval method.

Rotation & Movement – Understanding how to translate and rotate the canvas so the cannon and bullets behave realistically.

These challenges helped me strengthen both my problem-solving and game development fundamentals.

Accomplishments that we're proud of

I’m proud of how I was able to apply mathematics in an elegant way to create something fun and interactive. From using geometry to calculate enemy movement toward the cannon, to ensuring bullets emerged naturally from the muzzle’s head, every part of the gameplay relied on math. It was exciting to see concepts like geometry and vectors come to life inside the game.

What we learned

JavaScript Math.random() – Using randomness to generate enemy spawn positions.

HTML5 Canvas – Drawing shapes, handling rotations, and creating visual effects.

HTML tag – Embedding sounds and controlling them with JavaScript.

setInterval() method – Spawning enemies at fixed intervals.

clearInterval() method – Stopping enemy spawns when the game ends. clearinterval method

What's next for Midnight Despair

Looking ahead, I plan to expand Midnight Despair into a more satisfying and immersive shooter. Some of the upcoming improvements include:

Real-time Enemy Fracturing – Implement physics-based simulations so that enemies break apart dynamically when shot, adding realism and visual satisfaction.

Power-ups & Upgrades – Introduce collectible items that boost player abilities, such as faster bullets, temporary shields, or multi-shot firing.

Boss Battles – Add challenging boss enemies with unique attack patterns and higher durability to keep gameplay exciting.

Enhanced Visual & Audio Effects – Improve particle effects, screen shakes, and sound design for a more engaging experience.

Git Repo:- https://github.com/KRiSHnA88H/moving_canon-web-

Built With

• css3
• html5
• javascript