🕹️ AI Generated Games Arcade

A collection of classic retro-style arcade games built with HTML5 Canvas and vanilla JavaScript. This project showcases four iconic games recreated with modern web technologies while maintaining that nostalgic 80s/90s arcade aesthetic...generated by local AI models in agent mode.

🎮 Games Collection

🚀 Asteroids

Classic space shooter featuring:

• Ship Controls: Thrust, rotate, and shoot lasers
• Physics Engine: Realistic momentum and inertia
• Progressive Difficulty: Asteroids break into smaller pieces
• Power-ups: Fast ship, rapid fire, and spray shots
• Enemies: UFOs with AI targeting
• Special Effects: Parallax starfield, comets with particle trails
• Audio: Web Audio API generated sound effects

Sprite Credits:

• Asteroids: NicePNG
• Space Shuttle: Space shuttle icons created by juicy_fish - Flaticon

🐦 Flappy Bird

Retro-styled obstacle avoidance game with:

• Simple Controls: Space or click to flap
• Pixel Art Style: Retro visual design
• Particle Effects: Visual flair and explosions
• Score System: Beat your high score
• Smooth Physics: Gravity and jump mechanics

🍌 Gorillas

Turn-based artillery combat featuring:

• vs AI Opponent: Intelligent AI that learns and adapts
• Physics Simulation: Realistic projectile trajectories
• Environmental Factors: Wind affects banana flight path
• Destructible Terrain: Buildings get damaged by explosions
• Progressive AI: Gets smarter as rounds progress
• Visual Effects: Explosion animations and trajectory trails

🕸️ Matrix Terminal

Interactive Matrix digital rain terminal featuring:

• Digital Rain Animation: Authentic falling characters with Japanese katakana
• AI Chat Integration: Chat with Matrix characters via Ollama (Oracle, Morpheus, Trinity, Neo, Agent Smith, etc.)
• Character Personalities: Each character has unique prompts and speaking styles
• Text-to-Speech: Immersive voice synthesis with character-specific voices
• Network Discovery: Automatically finds Ollama servers on local network
• Terminal Commands: Full command-line interface with Matrix-themed commands
• Cyberpunk Modes: Toggle between classic Matrix and cyberpunk symbol modes
• Voice Controls: Complete TTS configuration and voice selection
• Copy Features: Click to copy AI responses to clipboard
• Authentic Experience: Realistic terminal feel with Matrix quotes and sequences
• Ollama Integration: Requires Ollama with llama3.1 or compatible models for AI features

🎨 Design Features

Retro Aesthetic

• Color Scheme: Neon green (#00ff00) and orange (#ff6b00)
• Typography: "Press Start 2P" pixel font
• Visual Effects: Glowing text shadows, animated grids, shimmer effects
• Animations: Smooth hover transitions, 3D card effects

Responsive Design

• Mobile-friendly layouts
• Adaptive canvas sizing
• Touch and keyboard controls
• Cross-browser compatibility

🛠️ Technical Implementation

Core Technologies

• HTML5 Canvas: All game rendering
• Vanilla JavaScript: No external frameworks
• CSS3: Modern styling with animations
• Web Audio API: Dynamic sound generation
• LocalStorage: High score persistence

Architecture

• Object-oriented game design
• 60 FPS game loops using requestAnimationFrame
• Modular code organization
• Event-driven input handling
• State management systems

Performance Features

• Optimized rendering loops
• Efficient collision detection
• Asset preloading
• Memory management
• Smooth animations

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (for development)
• For Matrix Terminal AI features: Ollama with llama3.1 or compatible models

Matrix Terminal AI Setup

To use the Matrix Terminal's AI chat features:

1. Install Ollama: Download from ollama.ai
2. Configure Environment Variables: Matrix Terminal README
3. Start Ollama: Run ollama serve in terminal
4. Install a model: Run ollama pull llama3.1
5. Open Matrix Terminal: The terminal will auto-connect to Ollama

See the Matrix Terminal README for detailed setup instructions.

Installation

1. Clone or download the repository

   git clone [repository-url]
   cd ai-games

2. Start a local web server

   Using Python:

   # Python 3
   python -m http.server 8000

   # Python 2
   python -m SimpleHTTPServer 8000

   Using Node.js:

   npx http-server

   Using PHP:

   php -S localhost:8000

3. Open your browser Navigate to http://localhost:8000

File Structure

ai-games/
├── index.html                 # Main homepage
├── README.md                  # This file
├── asteroids/
│   ├── index.html            # Asteroids game page
│   ├── scripts/
│   │   └── script.js         # Game logic
│   ├── styles/
│   │   └── style.css         # Game styling
│   └── assets/
│       └── sprites/          # Ship and asteroid images
├── flappy-bird/
│   ├── index.html            # Flappy Bird game page
│   ├── script.js             # Game logic
│   └── style.css             # Game styling
├── gorillas/
│   ├── index.html            # Gorillas game page
│   ├── game.js               # Game logic
│   └── style.css             # Game styling
└── matrix/
    ├── index.html            # Matrix Terminal page
    ├── script.js             # Terminal logic and AI integration
    ├── style.css             # Matrix-themed styling
    └── README.md             # Detailed Matrix Terminal documentation

🎮 Controls

Asteroids

• Arrow Keys: Rotate ship left/right
• Up Arrow: Thrust forward
• Spacebar: Fire lasers
• Escape: Pause game

Flappy Bird

• Spacebar: Flap wings
• Mouse Click: Flap wings
• Spacebar: Start/restart game

Gorillas

• Number Inputs: Set angle (0-90°) and velocity (1-100)
• Fire Button: Launch banana
• Spacebar: Fire (alternative)

Matrix Terminal

• ESC: Toggle matrix rain on/off
• CTRL+C: Clear terminal output / Interrupt operations
• CTRL+SHIFT+F: Toggle fullscreen mode
• Terminal Commands: Type commands like help, oracle connect, chat [character] [message]
• Tab Completion: Auto-complete commands and character names
• Voice Commands: voice on/off, voice rate [speed], etc.
• Chat: Interact with AI-powered Matrix characters via Ollama

Available Matrix Characters for AI Chat

• Oracle - The wise prophet who sees all possible futures
• Morpheus - The confident leader and mentor
• Trinity - The skilled hacker and fighter
• Neo - The chosen one, learning about his powers
• Agent Smith - The ruthless program hunting anomalies
• Tank - The loyal operator never plugged into the Matrix
• Architect - The cold creator of the Matrix system
• Cypher - The disillusioned crew member
• And more characters with unique personalities!

🎯 Game Features

High Scores

• Persistent high score tracking using localStorage
• Individual high scores for each game
• Automatic save/load functionality

Audio System

• Web Audio API for dynamic sound generation
• Sound effects for actions (shooting, explosions, throwing)
• Graceful fallback for browsers without audio support

Visual Effects

• Particle systems for explosions and trails
• Smooth animations and transitions
• Retro-style graphics and shaders
• Dynamic lighting effects

🔧 Development

Adding New Games

1. Create a new folder in the root directory
2. Include index.html, game script, and style.css
3. Follow the established retro aesthetic
4. Add navigation back to homepage
5. Update main index.html with new game card

Customization

• Colors: Modify CSS custom properties in each game's stylesheet
• Fonts: Update Google Fonts imports
• Sounds: Adjust Web Audio API parameters in game scripts
• Difficulty: Tweak game variables for balance

Browser Support

• Chrome: Full support
• Firefox: Full support
• Safari: Full support
• Edge: Full support
• IE: Limited support (missing Web Audio API)

📱 Mobile Support

All games include:

• Touch controls where applicable
• Responsive layouts
• Optimized performance for mobile devices
• Adaptive UI scaling

🎨 Styling Guide

Color Palette

• Primary: #00ff00 (Neon Green)
• Secondary: #ff6b00 (Retro Orange)
• Background: #0a0a0a, #1a1a2e, #16213e (Dark Gradients)
• Accent: #ffff00 (Bright Yellow)

Typography

• Main Font: "Press Start 2P" (Google Fonts)
• Fallback: "Courier New", monospace
• Effects: Glowing text shadows, letter spacing

🐛 Known Issues

• Web Audio API may require user interaction to start on some browsers
• Canvas scaling may affect performance on very large displays
• Touch controls may need fine-tuning on different mobile devices

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Follow the established code style
4. Test across multiple browsers
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.

🎮 Credits

• Original Game Concepts: Classic arcade games (Asteroids, Flappy Bird, etc.)
• Implementation: Built with modern web technologies
• Fonts: "Press Start 2P" by CodeMan38
• Inspiration: 1980s arcade culture and retro gaming
• Development Tools:
  • VS Code
  • GitHub Copilot Chat
  • Anthropic Claude (Sonnet 3.5, 3.7, and 4)
  • Copilot Agent MCP
  • Playwright MCP

🌟 Features Showcase

Technical Highlights

• 60 FPS Gameplay: Smooth animations using requestAnimationFrame
• Collision Detection: Efficient algorithms for game physics
• State Management: Proper game state handling and transitions
• Asset Management: Optimized loading and caching
• Cross-Platform: Works on desktop and mobile browsers

Visual Highlights

• Retro Aesthetics: Authentic 80s/90s arcade look
• Smooth Animations: CSS3 and Canvas-based effects
• Interactive UI: Hover effects and transitions
• Particle Systems: Dynamic visual effects

---

Enjoy playing these classic games with a modern twist! 🕹️

Built with ❤️ and powered by AI