A classic arcade-style space shooter game built with vanilla JavaScript and HTML5 Canvas. Defend Earth from waves of alien invaders, dodge asteroids, and collect treasure in bonus rounds!
Simply download the index.html file and open it in your web browser - no installation required!
- Features
- How to Play
- Controls
- Game Mechanics
- Installation
- Technologies Used
- Browser Compatibility
- Contributing
- License
- 🎯 Classic Arcade Action - Smooth 60 FPS gameplay with responsive controls
- 👾 Multiple Enemy Types - Face off against different invader types with varying strengths
- ☄️ Dynamic Asteroids - Dodge falling space rocks that increase in frequency
- 🎨 Particle Effects - Explosive visual feedback for all interactions
- 🔊 Retro Sound Effects - Web Audio API-generated sounds for authentic arcade feel
- 📈 Level Progression - Difficulty increases with each level
- ⚡ Speed Scaling - Enemies move and shoot faster as you advance
- 🌟 Adaptive Spawning - Asteroid spawn rates increase over time
- 💰 Bonus Levels - Special coin-collecting rounds every 3 levels
- 🏪 Shop System - Purchase power-ups between bonus rounds
- 🛡️ Shield Protection - 10-second invincibility shield available for purchase
- ❤️ Extra Lives - Buy additional lives with collected coins
- ⏱️ Timed Challenges - 10-second treasure chest collection rounds
- ⏸️ Pause Function - Pause anytime with 'P' key or pause button
- 🔇 Mute Option - Toggle sound effects on/off
- 📱 Mobile Support - Touch controls for mobile devices
- 🖥️ Responsive Design - Adapts to any screen size
- Objective: Survive waves of alien invaders while achieving the highest score possible
- Destroy Enemies: Shoot invaders and asteroids to earn points
- Avoid Damage: Dodge enemy bullets and falling asteroids
- Complete Levels: Clear all invaders to advance (earn +1 life per level!)
- Collect Coins: Every 3rd level is a bonus round - shoot treasure chests for coins
- Shop Wisely: Use coins to buy extra lives or shield protection
- Survive: Game ends when you run out of lives or invaders reach your position
| Key | Action |
|---|---|
← / A |
Move Left |
→ / D |
Move Right |
SPACE |
Shoot |
P |
Pause/Resume |
Click |
Shoot (Mouse) |
- Touch buttons appear automatically on mobile devices
- Left/Right arrows for movement
- Fire button for shooting
- Weak Invader: 10 points
- Strong Invader: 20 points
- Asteroid: 10 points
- Level Completion: 100 points bonus
- Bonus Life: +1 life for each completed level
- Invaders: Move horizontally and descend when reaching screen edges
- Asteroids: Fall vertically with random rotation
- Enemy Fire: Invaders shoot randomly with increasing frequency
- Appears every 3 levels (3, 6, 9, etc.)
- 10-second timer to collect treasure chests
- Chests contain 10-40 coins randomly
- Coins can only be spent immediately after bonus round
| Item | Cost | Effect |
|---|---|---|
| Extra Life | 50 💰 | +1 life |
| Shield | 100 💰 | 10 seconds protection at level start |
- Invader Speed: +0.2 per level
- Shooting Rate: +0.0003 per level
- Asteroid Spawn: +0.003 per level
- Enemy Bullet Speed: +0.2 per level
- Download the
index.htmlfile - Open it in any modern web browser
- Start playing!
# Clone this repository
git clone [Space-Defender-Game](https://github.com/navaranjithsai/Space-Defender-Game.git)
# Navigate to the game directory
cd space-defender
# Open index.html in your browser
# On Mac:
open index.html
# On Windows:
start index.html
# On Linux:
xdg-open index.html- Fork this repository
- Go to Settings → Pages
- Select "Deploy from branch" → main → root
- Your game will be available at
https://yourusername.github.io/Space-Defender-Game/
- HTML5 Canvas - Game rendering and animation
- Vanilla JavaScript - Game logic and mechanics (no frameworks!)
- Tailwind CSS - UI styling via CDN
- Web Audio API - Dynamic sound generation
- CSS3 Animations - UI effects and transitions
| Browser | Version | Support |
|---|---|---|
| Chrome | 90+ | ✅ Full Support |
| Firefox | 88+ | ✅ Full Support |
| Safari | 14+ | ✅ Full Support |
| Edge | 90+ | ✅ Full Support |
| Opera | 76+ | ✅ Full Support |
| Mobile Chrome | Latest | ✅ Full Support |
| Mobile Safari | Latest | ✅ Full Support |
View Game Screenshots
Start screen with game controls
Active gameplay showing invaders, asteroids, and player ship
Treasure chest collection round
Power-up purchase interface
Player with protective bubble shield
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 🎮 New power-ups (rapid fire, multi-shot, etc.)
- 👾 Additional enemy types
- 🎨 Visual themes/skins
- 🎵 Background music system
- 🏆 High score leaderboard
- 🌍 Different levels/backgrounds
- 💥 Boss battles
- 🚀 Player ship upgrades
- Audio may not work on first interaction in some browsers or too beep sounds (requires user gesture)
- Performance may vary on older mobile devices
- Touch controls may overlap game area on very small screens
This project is licensed under the MIT License - see the LICENSE file for details.
Navaranjith Sai
- GitHub: @navaranjithsai
- LinkedIn: Navaranjith Sai Varayogula
- Inspired by classic arcade games like Space Invaders and Galaga
- Built as a learning project for HTML5 Canvas game development
- Thanks to the open-source community for inspiration and resources
- Local high score storage
- Online leaderboards
- Multiple difficulty modes
- Boss battles every 10 levels
- Power-up drops from destroyed enemies
- Co-op multiplayer mode
- Custom ship designs
- Achievement system
- Background music with mute option
- Save game progress
- Total Lines of Code: ~1,200
- Development Time: [2h]
- File Size: ~45 KB (single file!)
- No Dependencies: Pure vanilla JavaScript
- Load Time: < 1 second
Made with ❤️ and HTML/JavaScript By Tech4File
⭐ Star this repository if you enjoy the game!