A retro arcade game for learning to identify secure vs. insecure code patterns. Defend against vulnerable code blocks in this Space Invaders-inspired security training tool!

Code Invaders is a browser-based arcade game that helps developers recognize secure coding practices, identify vulnerabilities, and spot malware patterns through engaging gameplay.

• Destroy insecure and malware code blocks as they fall
• Avoid hitting secure code blocks (they're the good guys!)
• Survive as long as possible while maximizing your score

• ← → or A/D: Move spaceship left/right
• SPACE: Shoot
• Click on code blocks: View full code in scrollable modal
• P: Pause/Resume
• E: End game early and review mistakes
• R: Restart (after game over)

• Drag: Move spaceship
• Tap anywhere: Shoot
• Tap on code blocks: View full code in scrollable modal
• End Game button: Available at bottom of screen to end early
• Restart button: Appears on game over screen

💡 Pro Tip: Tap/click code blocks to read them in full while the game continues running!

All code blocks are displayed with cyan borders and syntax highlighting for easy reading.

1. ✅ Secure Code

   • Best practices: prepared statements, parameterized queries, proper validation
   • DON'T SHOOT! Penalty: -15 points

2. ⚠️ Insecure Code (Vulnerabilities)

   • Vulnerabilities: SQL injection, eval(), unsafe shell execution
   • DESTROY! Reward: +10 points

3. ☠️ Malware

   • Obfuscated code, C2 beacons, suspicious patterns
   • DESTROY! Reward: +25 points

The game ends when:

• You shoot 15 secure code blocks (too many false positives!)
• You miss 10 vulnerabilities/malware combined (too many threats got through!)

• Responsive Design: Optimized for both desktop (5 lanes) and mobile (3 lanes)
• Touch Controls: Full mobile support with tap and drag mechanics
• Interactive Code Review: Click/tap any code block to view full code
• Progressive Difficulty: Spawn rate and speed increase over time
• Streak System: Chain correct hits for combo bonuses
• Level Progression: Based on survival time
• Learning Review: End-game report showing all mistakes with explanations
• Real Code Examples: Learn from actual secure/insecure patterns (JavaScript, Python, TypeScript)
• How to Play Guide: Built-in tutorial accessible via "?" button
• Retro Aesthetics: Purple-themed neon visuals, screen shake, particle effects

• Node.js (v14+)
• npm or yarn

1. Clone or download this repository

2. Install TypeScript compiler (if not already installed):

   npm install -g typescript

3. Compile TypeScript to JavaScript:

   tsc src/main.ts --outDir dist --target ES6 --lib ES6,DOM

4. Serve the game:

   Option A: Using Python

   python3 -m http.server 8000

   Option B: Using Node.js

   npx http-server -p 8000

   Option C: Using VS Code Live Server extension

   • Install "Live Server" extension
   • Right-click index.html and select "Open with Live Server"

5. Open in browser: Navigate to http://localhost:8000

code-invaders/
│
├── index.html                                # Main HTML file
├── styles.css                                # Game styling and UI
├── snippets.json                            # Code snippets database
├── code-invaders-trend-pack-annotated.json  # Rich annotated snippets (auto-loaded)
├── assets/
│   └── images/
│       └── player-ship.png                  # Custom player ship icon
├── src/
│   └── main.ts                              # TypeScript game source code
├── dist/
│   └── main.js                              # Compiled JavaScript (generated)
├── README.md                                # This file
└── DEPLOYMENT-GUIDE.md                      # How to deploy live

The game follows a clean entity-component architecture:

1. Game State Management

   • Centralized state object
   • Status tracking (playing, paused, game over)
   • Statistics and scoring

2. Entity System

   • Player: User-controlled spaceship
   • Bullets: Player projectiles
   • CodeBlocks: Falling code snippets
   • Particles: Explosion effects

3. Game Loop

   • 60 FPS target using requestAnimationFrame
   • Delta-time based updates for smooth animation
   • Capped delta to prevent large time jumps

4. Collision Detection

   • Axis-Aligned Bounding Box (AABB) collision
   • Efficient bullet-block intersection checks

5. Difficulty Scaling

   • Level progression every 15 seconds
   • Dynamic spawn rate adjustment
   • Increasing fall speed
   • Growing malware probability

Edit the CONFIG object in src/main.ts:

const CONFIG = {
    // Adjust player speed
    player: {
        speed: 300,        // Pixels per second
        shootCooldown: 0.25, // Seconds between shots
    },
    
    // Modify block behavior
    block: {
        initialSpeed: 60,  // Starting fall speed
        speedIncrement: 5, // Speed increase per level
    },
    
    // Change scoring
    scoring: {
        hitInsecure: 10,
        hitMalware: 25,
        hitSecure: -15,
        // ... etc
    },
    
    // Adjust difficulty curve
    difficulty: {
        levelDuration: 15,          // Seconds per level
        malwareChanceStart: 0.15,   // 15% initially
        malwareChanceMax: 0.35,     // Max 35%
    },
};

Easy! Just edit snippets.json - no coding required:

{
  "secure": [
    "stmt = conn.prepare(\"SELECT * FROM users WHERE id=?\")",
    "bcrypt.hash(password, 12)",
    "Add your new secure example here"
  ],
  "insecure": [
    "query = \"SELECT * FROM users WHERE id=\" + userId",
    "eval(userInput)",
    "Add your new vulnerability example here"
  ],
  "malware": [
    "eval(atob(\"dmFyIGE9ZG9jdW1lbnQuY29va2ll\"))",
    "Add your new malware pattern here"
  ]
}

The game automatically loads snippets from this file on startup. Just refresh the browser to see your changes!

This game teaches recognition of:

• Parameterized queries
• Input validation
• Proper encoding/escaping
• Secure cryptographic practices
• Safe subprocess execution

• SQL injection vulnerabilities
• Command injection flaws
• Cross-site scripting (XSS) vectors
• Unsafe deserialization
• Weak authentication

• Base64/hex obfuscation
• Suspicious network beacons
• PowerShell download-execute patterns
• Shellcode execution
• Encrypted payloads with XOR

# Make sure you're in the project root
tsc src/main.ts --outDir dist --target ES6 --lib ES6,DOM

• Check browser console for errors
• Ensure dist/main.js exists and is loaded
• Verify canvas element exists in DOM

• Close other browser tabs
• Check FPS in browser dev tools
• Reduce particle count in code if needed

1. Use the code viewer: Click/tap code blocks to read them in full detail
2. Start by observing: Let blocks fall to learn patterns
3. Focus on keywords: eval(), execute(), base64, + in SQL
4. Avoid panic shooting: Accuracy matters!
5. Build streaks: Combo multipliers significantly boost score
6. Watch the base line: Don't let malware through!
7. Review your mistakes: Use "End Game" button to see your learning report
8. Mobile players: Use landscape mode for better visibility

• ✅ Mobile Support: Full touch controls with tap and drag
• ✅ Responsive Design: Optimized for mobile and desktop
• ✅ Code Viewer: Click code blocks to view full code
• ✅ Learning Review: Detailed end-game analysis of mistakes
• ✅ Custom Player Ship: Branded with custom icon
• ✅ How to Play: In-game tutorial guide
• ✅ Mobile Buttons: End game and restart buttons for touch devices

Potential additions:

• Power-ups (slow-mo, multi-shot, shield)
• Boss blocks (large vulnerabilities requiring multiple hits)
• Multiplayer mode
• Leaderboards
• More code languages
• Difficulty settings
• Sound effects and music

Want to publish your game online? See DEPLOYMENT-GUIDE.md for complete instructions!

Quick Deploy:

./deploy-prep.sh

Then choose from:

• Netlify (easiest - drag & drop)
• GitHub Pages (free hosting)
• Vercel (auto-deploy)
• And more!

This project is provided as-is for educational purposes. Feel free to modify and extend!

Built as a secure coding training tool combining gaming and education.

Ready to defend against insecure code? Load up and start playing! 🎮🔐