🏟️ HOME RUN DERBY - Early 2000s Edition ⚾

🌐 Play Now: https://yerry262.github.io/HomeRunDerby/

A retro-styled browser-based baseball batting game inspired by classic early 2000s arcade games!

🎮 How to Play

1. Open index.html in your web browser
2. Click PLAY BALL! to start
3. Watch the pitcher throw the ball
4. Click, tap, or press SPACE to swing at the perfect moment!
5. Time your swing when the ball reaches the strike zone (green flash)
6. All successful hits are HOME RUNS! 💥
7. Three strikes and you're OUT! ❌

🎯 Game Features

• Variable Pitch Speed: Each pitch has slightly different speed (70-130% variation)
• Timing-Based Gameplay: Perfect timing gives you a "PERFECT!" home run
• Three Strike Rule: Miss (or take) three pitches and the game ends
• Global High Score System: Top 100 Firebase leaderboard with 8-letter names
• Retro Styling: Early 2000s golden/orange button aesthetic
• Particle Effects: Satisfying visual feedback on hits
• Responsive Design: Works on desktop and mobile

🎨 Game Mechanics

• Perfect Timing Zone: Hit when ball is at ~92% of distance to home plate
• Good Timing Window: 85-98% of distance (all hits within this are home runs)
• Visual Cues: Strike zone flashes green when ball is in hitting range
• Progressive Challenge: As you get more hits, maintaining focus becomes harder!

🏆 High Scores

• Tracks top 100 players
• Persistent storage using Firebase Firestore
• 8-character name limit (classic arcade style)
• Global leaderboard shared across all players and devices

🕹️ Controls

• Mouse: Click to swing
• Keyboard: SPACE to swing
• Touch: Tap screen to swing (mobile-friendly)

📁 Project Structure

HomeRunDerby/
├── index.html           # Main game file
├── css/
│   └── style.css       # Retro styling
├── js/
│   ├── game.js         # Main game logic and state management
│   ├── physics.js      # Pitch mechanics and particle system
│   ├── input.js        # Input handling (mouse, keyboard, touch)
│   ├── renderer.js     # Canvas rendering (field, ball, batter)
│   └── highscores.js   # Leaderboard system
└── README.md

🚀 Quick Start

Simply open index.html in any modern web browser. No installation or build process required!

💾 Technologies Used

• Pure HTML5
• CSS3 (with animations and gradients)
• Vanilla JavaScript (ES6 classes)
• Canvas API for rendering
• Firebase Firestore for global high score persistence

🎨 Early 2000s Style

• Bold golden/orange gradient buttons
• Chunky borders and drop shadows
• Courier New monospace font
• Baseball field gradient backgrounds
• Retro particle effects

🎯 Tips for High Scores

1. Watch the green strike zone flash - that's your timing window!
2. Perfect timing (when the ball is centered) gives bonus visual feedback
3. Stay focused - three strikes end your run!
4. Each pitch speed varies, so adapt your timing
5. Practice makes perfect!

---

Created as a tribute to classic early 2000s arcade-style browser games!