A modern reimagining of the classic Karel robot game — now playable with hand gestures using your webcam! 🚀 Built with HTML, CSS, and JavaScript, powered by MediaPipe Hands for real-time gesture recognition.
- 👆 Hand Gesture Commands via webcam (powered by MediaPipe Hands)
- ⌨️ Keyboard Controls for traditional gameplay
- 🎨 Responsive, animated UI with custom CSS
- 💎 Beeper pickup/drop system
- 🎮 Grid-based movement and real-time direction feedback
| Gesture | Action |
|---|---|
| 👆 Point up | move() |
| ✋ Open hand (left) | turnLeft() |
| ✋ Open hand (right) | turnRight() |
| 👍 Thumbs up | pickBeeper() |
| ✊ Fist | putBeeper() |
🤖 Tip: Hold your hand in front of the webcam and perform one gesture at a time. Gesture input is debounced to prevent repeated execution.
| Key | Action |
|---|---|
W / ↑ |
move() |
A / ← |
turnLeft() |
D / → |
turnRight() |
S / ↓ |
pickBeeper() |
Space |
putBeeper() |
can go to https://karel-cv.vercel.app or :
-
Clone the Repository
git clone https://github.com/yourusername/karel-gesture-game.git cd karel-gesture-game -
Open
index.htmlin a Browser✅ Preferably use Chrome or Edge — MediaPipe works best there.
-
Click "Enable Gesture Control"
- Allow camera access when prompted
- Show your hand in front of the camera
- Start issuing gestures and have fun!
- HTML5/CSS3 — modern responsive UI
- JavaScript — game logic & gesture handling
- MediaPipe Hands — real-time hand tracking
- CameraUtils & DrawingUtils — WebRTC + overlay tools
/
├── index.html # Main game file
├── README.md # You're reading it!
- Only detects one hand at a time
- Gesture recognition depends on lighting & hand visibility
This app requires webcam access for gesture detection. No camera data is stored or sent anywhere — everything runs locally in the browser.
- Hand tracking: MediaPipe by Google
- Inspired by Karel the Robot (Stanford CS Education)
MIT License — feel free to modify, share, and improve!