Centre The Div!

Title Screen
The lore...
Level Select
LEVEL END REWARD
Level Complete!
YOU GOT THE INTERNSHIP!

Inspiration

The idea for Center The Div came from the frustration that many aspiring front-end developers face when learning basic web development... CENTERING DIVS IS HARD!

We wanted to turn this relatable problem into an engaging and fun game, drawing inspiration from the Stacker arcade game with a twist. The game's story follows YOU, a young and aspiring (but brain-rotted) developer making your way through the web dev space. With every div you stack, you get one step closer to landing your dream internship!

What it does

Center The Div is a game where players stack moving rectangles (representing "divs") from the bottom to the top of the screen, with the goal of centering each rectangle as accurately as possible. Points are awarded based on how close each rectangle is to the center of the screen. As the player progresses, the rectangles shrink and move faster, increasing the challenge. Once the stack reaches the top, a vertical brain rot video plays through the stacked rectangles, which become transparent. If the player has stacked the rectangles perfectly, the video plays smoothly; if not, it appears fragmented, reflecting the player’s accuracy.

How we built it

We used Vite as the build tool for its fast development environment and Tailwind CSS for styling, which allowed us to quickly design a responsive and visually appealing game interface. The game logic was implemented with JavaScript, handling the movement of the rectangles, stacking mechanics, and point system. We also used Tailwind to streamline the layout and animations, ensuring the game had smooth transitions and interactions.

Challenges we ran into

This was our team's first real deep dive into game development, and we encountered a number of challenges along the way. One of the biggest hurdles was coming up with a unique and engaging game idea that was both fun and had a clear connection to the storyline. Designing game mechanics that were both challenging and rewarding was also an interesting challenge, we needed to create something that was simple yet addicting.

Additionally, game design itself posed some unique challenges—ensuring the stacking mechanics and video playback worked together took a lot of time lol.

Accomplishments that we're proud of

Successfully combining arcade-style gameplay with the idea and theme of centering divs
The use of a brain rot video as a reward system, where the player’s accuracy directly affects how well they can watch the vid
Creating a responsive and fun experience that scales the difficulty in a way that feels rewarding rather than frustrating

What we learned

Game development is awesome! Coming up with an original idea and executing on it was such a blast and we would love to do it again.

What's next for Centre The Div!

Mobile Version: Creating a mobile version of the game and publishing on Google Play/App Store :O???!
Leaderboard and Achievements: Add a scoring system where players can compete for the best performance in centering their divs and unlock achievements for mastering specific levels.