Keep It Up!

Instructions
Start Screen
Object Selection (all with different physics!)
Gameplay
Game Over :(
Scores :)
Leaderboard!
Settings

Inspiration

Firstly, we just wanted to make a silly game with the hand landmark detection from MediaPipe, a pose detection software developed by Google. Gameplay-wise, we primarily took inspiration from the childhood experience of trying to keep a balloon in the air by any means possible, but also took some gameplay elements from mainly Fruit Ninja and other endless arcade games popular in the 2010s. Stylistically, this game aims to recapture the essence of childhood with stylized animations, taking inspiration from the aesthetics of the early internet era, such as 2010s mobile games, Windows XP, and early Facebook design. Because the goal of the game is to keep a balloon in the air, the name "Keep It Up!" serves a double meaning, referring to both the balloon and a simple message of encouragement to the player, accompanied with a thumbs up :)

What it does

Keep it up, the game uses your webcam that tracks hand landmarks to hit your balloon. LAZERS?

There are also bombs that drop randomly, that you want to dodge, or else your game will end and you will lose. There is a score that keeps track of how many taps you take to keep your balloon in the air. Once you lose the game by letting your balloon fall past the bottom of the screen or hitting a bomb, you have the option to save your score to add to the leaderboard. Once it is saved, you can view your current and previous scores on the main menu's "scores" button. Other features we added to the game are the setting function, which enables you to change the volume settings.

How we built it

Frontend: We built the majority of the game using ReactJS as the frontend. The frontend handled ball rendering, finger tracking overlays, and game logic. In the frontend, we used MediaPipe for hand pose detection and finger tracking.

The bulk of the visuals (titles and buttons) were hand drawn two frame animations in photoshop, which were then put into React Components to swap between frames. Backend: We built a backend using Flask and SQLAlchemy, which allowed us to store scores in a PostgreSQL database hosted on SupaBase. Our frontend would make requests to the routes defined in our backend to save scores and get scores to render the leaderboard.

Challenges we ran into

During the development process, we ran into several issues with modules and packages for both the backend and the frontend. In the frontend, we had difficulty importing the MediaPipe packages. In the backend, we had trouble with virtual environments and python versioning.