Hand Pong 🏓

A browser-based Pong game controlled by hand gestures via webcam, built with vanilla JavaScript and MediaPipe Hands.

Live Demo

🎮 Play here

About

This is a learning project. I'm building it to explore computer vision in the browser and improve my JavaScript skills. Part of the code is created with the help of AI agents to accelerate the learning process and development.

Tech Stack

• HTML5 Canvas
• JavaScript
• MediaPipe Hands (hand tracking)
• WebRTC (camera access)

How to Play

• Allow camera access in your browser
• Move your hand up and down to control the paddle
• Hit the ball against the wall and keep the rally going!

Roadmap

• Basic Pong with hand controls
• AI opponent
• Score tracking
• Difficulty levels

Status

🚧 Work in progress

What I learned so far

• How to use the MediaPipe Tasks Vision library for real-time hand tracking in the browser
• How browser script loading works — and why defer matters when mixing ES modules with classic scripts
• How to share data between JavaScript modules using window as a bridge