
HTML5-based Space Shooter Game
Project Title: HTML5-based Space Shooter Game using JavaScript and HTML
Project Summary
This is a 2D space-themed shooter game developed using HTML5 Canvas and JavaScript. The player controls a spaceship and must shoot down waves of enemies while avoiding collisions. The game emphasizes reflexes, collision detection, and smooth animations — all rendered in the browser.
Core Components
Player Spaceship
- Controlled via keyboard (arrow keys or WASD) and spacebar for shooting.
- Can move left/right and sometimes up/down.
- Fires projectiles to destroy enemies.
Enemies and Waves
- Multiple enemy types that move toward or around the player.
- Spawn in waves with increasing difficulty.
- May fire back or move in patterns.
Projectile and Collision System
- Bullets or lasers are generated when shooting.
- Collision detection checks hits between player/enemies and projectiles.
- Explosion or score effect on successful hit.
Scoring and Health System
- Player earns points for each enemy destroyed.
- Health bar decreases on collision with enemies or enemy fire.
- Game ends when health reaches zero.
Game Loop and Animation
- Uses requestAnimationFrame() for a smooth and continuous update.
- Redraws and updates all entities each frame (player, bullets, enemies).
Technologies Used
- HTML5 Canvas (for rendering game objects, effects, and background)
- JavaScript (for game logic, movement, shooting, collision, and UI)
- CSS (for styling start screen, game over screen, buttons, etc.)
Learning Outcomes
- Implementing interactive gameplay with real-time rendering
- Using canvas for animations and game physics
- Writing game loops and handling sprite movement
- Understanding object-oriented game structure in JavaScript
- Detecting and responding to collisions between moving objects
Possible Enhancements
- Power-ups (e.g., shields, triple shot, health restore)
- Boss fights or level transitions
- Background music and sound effects
- Scoreboard and high score saving with localStorage
- Mobile controls for touch devices
- Parallax scrolling space background