Mad Lab

Mad Lab is a body-controlled browser game built with JavaScript, HTML Canvas, and Google's MediaPipe Pose AI. Instead of a keyboard or mouse, the player uses their own body as the controller. A webcam tracks 33 points on the player's skeleton in real time to turn physical movement into gameplay. The concept is straightforward: you are a mad scientist protecting a glowing experiment from waves of cartoon enemies. Four enemy types attack from both sides of the screen: a government inspector, a robot, a safety officer, and an escaped lab test subject. Players hit enemies by physically moving their body into them, block projectiles by stepping in front of them, lean left or right to dodge, and raise both arms above their head to activate a temporary shield around the experiment. The goal is to fill a charge bar across three rounds without letting the experiment take three hits. The project started as a simper idea around pixel-based animation controlled by mouse movement. It evolved through several iterations - from background subtraction silhouettes to full AI body tracking, and from basic shapes to fully drawn cartoon characters. The final version includes an animated intro sequence, a character introduction screen, a how-to-play tutorial, a cartoon lab background, and four uniquely designed enemies. This project demonstrates practical applications of JavaScript in interactive design. It uses real-time computer vision, canvas-based rendering, collision detection, and animation to create an experience that responds directly to user movement. The goal was to explore how JavaScript can be used to build engaging, interactive environments without relying on external game engines or frameworks, and to show that the browser alone is a capable platform for creative, physical interaction.