MediaPipe · Canvas · Gesture Control
Hand-Tracked Maze Game
Point your index finger to steer the yellow player through the maze. The game remembers turns until the next corridor.
Click START CAMERA and allow webcam access.
WAITING
STEM Explanation
How Hand Control Works
Your camera sends video frames to MediaPipe. MediaPipe estimates 21 hand landmark points.
STEM CONCEPT: Direction Vector The program subtracts index PIP from index fingertip: dx = tipX - pipX, dy = tipY - pipY.
STEM CONCEPT: Angles JavaScript uses Math.atan2(dy, dx) to convert that vector into an angle.
STEM CONCEPT: Gesture Smoothing A direction must appear for several frames before the game accepts it, preventing one noisy webcam frame from changing the command.
STEM CONCEPT: Grid Movement The maze is a 2D array. A wall is a # tile, and the player moves only when the next tile is open.
STEM CONCEPT: Buffered Turning If you point before reaching an intersection, the game remembers the requested direction and turns when possible.
Game AI The red enemy uses a simple chaser algorithm. At intersections, it usually chooses the open corridor that moves closest to the player.