Project Overview

Space Invaders is a classic arcade-style shooting game built using HTML5 Canvas, CSS, and JavaScript. The player controls a spaceship at the bottom of the screen and must shoot incoming alien invaders before they reach the ground. The project includes animations, movement controls, waves, score tracking, and responsive touch controls for mobile users.

Screenshots

Key Features

1. Interactive gameplay using HTML5 Canvas
2. Animated alien invaders that move and descend
3. Player ship movement and shooting
4. Mobile-friendly touch controls
5. Live display of Score, Lives, and Wave
6. Animated star background
7. Start and Restart game button
8. Collision detection for bullets and enemies

Functionality

• Player moves left or right using keyboard (Arrow keys / A-D) or touch buttons
• Player fires bullets using Spacebar or the Fire button
• Alien invaders move in groups and descend toward the player
• If an invader reaches the player area or collides with the ship, a life is lost
• Score increases when enemies are destroyed
• The game progresses through multiple waves
• The interface shows current Score, Lives, and Wave
• The game ends when:
  • All waves are cleared (Win)
  • All lives are lost (Game Over)

Technology Used

1. HTML5 – Structure and gameplay canvas
2. CSS3 – Layout, styling, animations, and UI design
3. JavaScript (ES6) – Game logic, rendering, controls, collisions
4. Google Fonts (Orbitron) – Futuristic arcade-style font

Why This Project Is Useful

• Helps understand Canvas drawing, animations, and game loops
• Demonstrates both keyboard and touch input handling
• Useful for learning basic game physics and logic
• Strong portfolio project for showcasing JavaScript and front-end skills
• Easily extendable with additional levels, enemies, power-ups, and sound effects

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.