Inspiration

Space games and survival mechanics have always felt naturally connected: limited oxygen, drifting in space, and dodging debris. I wanted a project that would be fun for students, teach core game logic, and still feel high‑stakes and cinematic. The idea of a stranded ship slowly running out of oxygen, racing to collect tanks while a boss asteroid looms at score 100, came from combining classic arcade dodging games with survival countdown tension.

What it does

Space Survival: Oxygen Crisis is a browser‑based space survival game. You pilot a spaceship, collect oxygen tanks, avoid increasingly fast asteroids, and face a boss asteroid at score 100. Oxygen drains over time (and faster as difficulty ramps); getting hit costs lives; low oxygen slows your ship. Power‑ups (shield, speed, rapid fire, extra life), combo scoring, and a boss with a second phase make the game feel dynamic. The game includes a start screen with difficulty selection, instructions, in‑game HUD, sound effects, a high‑score system, and win/game‑over screens.

How I built it

I built the entire game with HTML5 Canvas + vanilla JavaScript, using a single index.html file: Canvas 2D for drawing: layered starfield, nebula background, shaded asteroids, glowing lasers, engine exhaust, oxygen tanks, and boss. Game loop using requestAnimationFrame, with a time‑based update(dt) and separate draw() for smooth animation. State machine (start, playing, boss, win, gameover) to manage screens and transitions. Systems: oxygen decay, time‑based spawning for asteroids/tanks/power‑ups, collision detection, boss AI, power‑up timers, particles, screen shake, and difficulty modes. Web Audio API for synthesized sound effects and localStorage for persistent high scores. No external libraries or engines were used; everything from input handling to particle effects is hand‑coded.

Challenges I ran into

Balancing oxygen and spawn timing: Early versions sometimes felt unfair—oxygen drained before tanks appeared. I switched to time‑based spawning (using timestamps instead of frame counters) and tuned intervals and low‑oxygen boosts. Difficulty vs. fun: With only one mode, the game was too hard for some and too easy for others. Adding Easy/Normal required carefully scaling oxygen decay, asteroid speed, and spawn rates without breaking the feel. Visual polish without assets: With no image files, all graphics had to be drawn procedurally. Getting the ship, asteroids, and background to look “spacey” and not flat took a lot of tweaking with gradients, shadows, and shapes. Keeping logic simple but robust: Managing multiple systems (oxygen, score, boss phase, power‑ups, combos) in a single file while avoiding bugs like missed spawns or stuck states was a constant refactoring exercise.

Accomplishments that I'm proud of

Building a fully playable, polished game with start/instructions, HUD, difficulty, boss fight, win/lose flows, and restart—all in one HTML file. Implementing particles, screen shake, and glowing effects that make hits, explosions, and movement feel impactful without using a game engine. Designing a boss fight with a second phase (faster, more erratic movement) that genuinely changes how you play. Adding a high‑score system and “New record!” feedback so players feel rewarded and can measure improvement. Creating an experience that’s accessible to beginners but still technically interesting enough for a hackathon demo.

What I learned

How to structure a small game using separate update/render loops, time‑based logic, and simple state machines. Practical use of the Canvas 2D API for shading, gradients, and particle effects to fake depth and realism. How to use the Web Audio API to generate game sounds without assets, and how much a few well‑timed sounds add to the experience. The importance of game feel and difficulty tuning—small changes in speed, spawn timing, and feedback can turn a frustrating game into a fun one. How to design features (difficulty modes, power‑ups, boss phases) that can be implemented incrementally without over‑complicating the code. What's next for Space Survival Oxygen Crisis More content: Additional bosses, wave‑based progression, or new enemy types (e.g. homing mines or rotating debris fields). Power‑up variety: New abilities like temporary shields that reflect asteroids, slow‑motion time, or magnetized oxygen tanks. UI polish & accessibility: Mobile/touch controls, color‑blind‑friendly palettes, and subtle tutorials or tooltips. Leaderboard & sharing: A simple online leaderboard (via a backend/API) so players can compete beyond local high scores. Story touches: Short intro/outro scenes or mission briefings to give more narrative weight to surviving and defeating the boss.

Built With

• and-animations.-javascript-(es5/es6-style):-game-logic-(movement
• and-screens.-css3:-custom-styling-for-the-space-theme
• asteroids
• boss
• boss-fight
• buttons
• canvas
• collect
• collisions
• css3
• difficulty-modes).-apis-&-browser-features-html5-canvas-2d-api:-all-graphics-(ship
• etc.)
• explosion
• game-over)-using-oscillators-and-gain-nodes.-localstorage:-persistent-high-score-storage-in-the-browser.-requestanimationframe:-smooth-game-loop-for-updating-and-rendering.-keyboard-events:-keydown-/-keyup-for-controls-(arrows
• html5
• hud
• javascript
• lasers
• localstorage
• nebula).-web-audio-api:-synthesized-sound-effects-(laser
• overlays
• oxygen-tanks
• p).-frameworks-/-libraries-none:-no-external-js-frameworks-(no-react
• particles
• phaser.js
• power-ups
• requestanimationframe
• space
• spawning
• starfield
• win