Hampter Run

GIF

Inspiration

We wanted to explore computer vision and how it could make games more interactive. Since gaming is usually a pretty sedentary activity, we thought it'd be fun to create something that actually gets players up and moving.

We ended up combining that idea with our love for those silly 'hampter' memes to make a game where your body becomes the controller. Instead of pressing buttons to make a character run, jump, or attack, you have to do those movements yourself.

Our goal was to make physical activity feel less like exercise and more like a game (even if that means looking a little ridiculous in front of your webcam).

What it does

Hampter Run is a browser-based, motion-controlled game where YOU are the controller. Using your webcam, the game tracks your movements and translates them into actions performed by your hamster.

Core Features:

Motion-Controlled Endless Runner/Platformer

Run in place to control your hamster as it moves through the course.
Physically jump to avoid incoming obstacles.
Collect power-ups that launch your hamster into the air.
Survive until the end without losing all your lives.

Evil Hampter Battle -The game transitions into a turn-based fight sequence.

During the enemy's turn, dodge incoming bullets by jumping.
During your turn, physically punch to attack the Evil Hampter.
Both characters have health bars, and attacks trigger custom animations and visual effects.

We also included keyboard controls so the game can be played without a webcam.

How we built it

We used JavaScript, HTML5 Canvas, CSS, and MediaPipe Pose.

Motion Controls: MediaPipe tracks body landmarks through the player's webcam. We use changes in wrist positions to detect running, changes in hip height to detect jumping, and arm extension to recognize punches. These movements are converted into actions that the game can respond to.

Gameplay: We built the game using HTML5 Canvas without a traditional game engine. This meant implementing our own player movement, physics, collision detection, sprite animations, and scrolling level. We also added power-ups, multiple platform paths, and a life system.

Fight Sequences: We created a separate turn-based combat system that switches between enemy and player turns. The enemy fires projectiles that the player must dodge, while player attacks trigger a dash animation and deal damage. We also added health bars, damage indicators, screen shake, and sound effects.

The game uses different states to manage transitions between running, enemy encounters, and combat.

Challenges we ran into

Motion detection: Getting physical movements to translate into reliable game inputs was one of our biggest challenges. We had to account for differences in how people move and avoid triggering actions repeatedly or accidentally.

Game physics and collisions: Since we weren't using a game engine, we had to handle movement, jumping, platforms, and collision detection ourselves. Getting the hamster to interact properly with the environment took a lot of tweaking.

Integrating everything: We worked on different parts of the project separately, so bringing the webcam controls, main game, and boss battle together required quite a bit of testing and debugging.

Accomplishments that we're proud of

We're proud that we managed to build a playable game controlled by actual body movements. Watching someone run in place and punch the air to control a hamster is probably our favorite part of the project.

We're also happy with how much we managed to include beyond our original idea. What started as a basic endless runner ended up having multiple paths, power-ups, enemy encounters, and a full boss battle.

Building the game mechanics ourselves without a traditional game engine was another accomplishment we're proud of.

What we learned

We learned a lot about how games work behind the scenes, especially when it comes to rendering animations, detecting collisions, handling player input, and managing different game states.

Working with MediaPipe also introduced us to pose estimation and how real-world body movements can be translated into interactive controls.

One of our biggest takeaways was how important it is to test a game by actually playing it. A mechanic might technically work, but that doesn't necessarily mean it feels good to use.

We also learned a lot about integrating different parts of a project built by multiple people, especially when those parts need to communicate in real time.

What's next for Hampter Run

We'd like to introduce more obstacles, power-ups, enemy types, and maybe even different playable hamsters. We also want to continue improving the motion tracking so the game works more consistently across different players and environments.

A leaderboard and additional movement-based actions would also be fun additions, along with more diverse level designs.