A web-based AI interactive Pokemon catching game inspired by Pokemon GO. This project uses MediaPipe for hand tracking and Three.js for 3D graphics to create an interactive Pokemon catching experience in your browser.
- 🗺️ Interactive Map: Explore the world with Pokemon spawns
- 🖐️ Hand Gestures: Use natural hand movements to throw Pokeballs
- 🎯 AI Tracking: Real-time hand position detection
- ✨ Visual Effects: Beautiful capture animations
- Interactive map with randomly spawning Pokemon
- Hand gesture-based Pokeball throwing mechanics
- AI-powered interactive capture experience
- Location-based gameplay
- Beautiful visual effects and animations
- Mobile-friendly design
- Three.js for 3D graphics
- MediaPipe for AI hand tracking and gesture recognition
- Mapbox for map integration
- HTML5 Canvas for rendering
- Modern CSS3 for animations and styling
- Vanilla JavaScript for game logic
- Modern web browser with WebGL support
- Camera access for AI hand tracking
- Internet connection for map data
- Your own Mapbox API token
- Clone the repository:
git clone https://github.com/yinkaizhai/AI-interactive-pokemon-go-web.git
cd AI-interactive-pokemon-go-web-
Download Pokemon GIF assets:
- Download the GIF pack from Google Drive
- Extract and place all GIF files in the
src/assets/gifsdirectory - Important: The
src/assets/gifsdirectory is not included in the repository due to size constraints. You must download and add these files manually.
-
Configure Mapbox:
- Sign up for a Mapbox account at https://www.mapbox.com
- Create your API token
- Replace the token in
src/js/map.js:mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
-
Serve the project:
- Use a local development server (e.g., Live Server in VS Code)
- Or use Python's built-in server:
python -m http.server 8000
-
Open in browser:
- Navigate to
http://localhost:8000 - Grant camera permissions when prompted
- Navigate to
- Allow camera access when prompted
- Look for Pokemon markers on the map
- Click a Pokemon to enter capture mode
- Use hand gestures to throw Pokeballs:
- Make a grabbing gesture to hold the Pokeball
- Move your hand up and forward to throw
- Time your throw to hit the Pokemon!
AI-interactive-pokemon-go-web/
├── index.html
├── README.md
├── LICENSE
├── src/
│ ├── js/
│ │ ├── map.js
│ │ ├── capture.js
│ │ ├── animations.js
│ ├── css/
│ │ └── style.css
│ └── assets/
│ └── gifs/
└── pokemon_files.json
Contributions are welcome! This is an open-source project aimed at creating a more comprehensive AI-interactive Pokemon game. Feel free to:
- Fork the repository
- Create your 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
- Pokemon GIF sprites from PkParaiso
- Map data provided by Mapbox
- Hand tracking powered by MediaPipe
- 3D graphics rendered with Three.js
- Multiplayer support
- More interactive Pokemon behaviors
- Advanced AI interactions
- Battle system implementation
- Pokemon evolution mechanics
- Social features and trading
This project is licensed under the MIT License - see the LICENSE file for details.
- Mapbox Token: The current Mapbox token in the code may be deactivated. Please use your own token for development.
- Pokemon Assets: The Pokemon GIF files need to be downloaded separately from the provided Google Drive link due to size constraints.
- Asset Credits: All Pokemon sprites are sourced from PkParaiso and are used for educational purposes only.
- AI Features: This project uses MediaPipe's AI capabilities for hand tracking and gesture recognition to create an interactive gaming experience.
This is a fan-made project for educational purposes. Pokemon and related properties are trademarks of Nintendo, Game Freak, and The Pokemon Company.