Motion Runner.

Description

Motion Runner is an educational motion-controlled endless runner game that combines gameplay, physical activity, and learning mechanics. Players control the character using body movements detected through a webcam and answer educational questions during gameplay.

Background

This project explores the combination of browser-based computer vision and educational games. Instead of traditional keyboard controls, player actions are translated from body movements into game events.

Goal

The goal is to create an interactive learning experience where students stay physically active while practicing problem solving through game challenges.

Features

• Webcam-based body movement control.
• Support for LEFT, CENTER, RIGHT, JUMP, and CROUCH actions.
• Educational questions that appear before obstacles.
• Slow-motion question phases that allow players to respond before continuing.
• Movement detection separated from game logic for easier development and testing.
• Local pose processing to keep webcam data on the user’s device.

Technologies

• TypeScript for application logic and type safety.
• Phaser.js for browser game development.
• MediaPipe Pose / MoveNet for pose estimation.
• Browser Web APIs for webcam access and real-time interaction.

Technical Decisions

The system uses a separated pipeline:

Camera → Pose Estimator → Movement Detector → Game Controller

Pose landmarks are converted into meaningful movement events instead of directly controlling gameplay. This keeps computer vision logic independent from the game engine.

What I Learned

Developing motion-controlled games requires careful handling of noisy real-world input. Separating detection, game state, and interaction logic makes the system easier to calibrate and improve.

Notes

The project is designed as a browser-based prototype combining education, movement, and game mechanics.