Tri Quest

Best game that you will ever play. A thrilling 3-in-1 Reddit game! 🚀 Test your skills, climb leaderboards & win rewards. Play, compete, and conquer! 🏆🔥

Comment


Note: The video is running in 2x, and that is why the player is sprinting 😅 Do play the game on your own (pinned post in the subreddit) to get mesmerized 🌟 Use your arrow keys or the UI joystick to control the player. View the entire project gallery also (as pictures tell a thousand words)


Inspiration Behind Tri Quest 🎮

In a world where passive content consumption dominates, I wanted to break the cycle and craft something that truly engages, educates, and challenges players. Tri Quest is not just a game—it’s a 2D RPG-style adventure designed to elevate knowledge and sharpen cognitive skills through interactive gameplay.

Games have always been powerful tools for learning, engagement, and problem-solving, but many educational experiences lack excitement. Tri Quest changes that. By blending thrilling game mechanics with intellectual challenges it creates an immersive environment where players don’t just play—they learn, think, and evolve. At its core, Tri Quest features three distinct game modes, each testing a different aspect of a player’s intelligence and agility

Beyond just entertainment, Tri Quest ensures that every moment spent in the game adds value to the player’s knowledge bank—all while providing a competitive and rewarding experience. It’s more than just a game; it’s a journey of mental agility and strategic thinking, all wrapped up in a captivating RPG experience.

This project is about bridging fun and education, making learning effortless while keeping players hooked with a rich, interactive, and competitive gameplay loop. Tri Quest isn’t just a game—it’s an evolution in how we learn, compete, and grow. 🚀🔥


What it does

Before starting the explanation, let me clarify that this project is super-responsive for every screen size. To get a perfect understanding of the game's layout, see the below zoomed-out image:

game map

From the start, a default music track will be played in the background. You can change the same by hovering over the other three tracks and enjoying the melody. This game was made compatible with every device type. I have appended some keys in the UI itself so that anyone can tap on them to enter the games.

Flip the tiles game 🧩

It is a challenging tile-matching puzzle that tests your knowledge and pattern recognition skills. Once you enter it, you will be presented with a 9/15 tileset (according to the difficulty level). Out of the total 5 levels, the first 3 are easy ones, having 9 tiles, while the latter two have 15 tiles. It is not a memory game where you have to find look-alike pieces; it's a logical game where you have to solve questions related to subjects like Javascript, Reddit, Operating Systems, DBMS, and DSA

🎯 Objective: Find the correct triplet—each set contains:

✅ 2 text-based tiles (concepts, terms, or keywords).

✅ 1 image tile (visually representing the concept).


🔹 How to Play?

1️⃣ Hover on a tile to flip it and reveal its content.

2️⃣ Identify the correct set of 3 related tiles.

3️⃣ Select them to lock in your answer (selected tiles will be highlighted in red)

4️⃣ If correct, the set is painted in a green border — keep matching until all tiles are gone!

5️⃣ If stuck, use hints to guide you (only works once for each of the easy levels)

getting hint

In the above screenshot, you can see that after selecting the tile having mascot, I clicked on the question mark icon at the top, and then the next correct tile of the triplet is marked by the pink border, which is snoo alien. And with that, I am sure that now I have to only find the remaining image tile, and that would be a REDDIT tile because the correct match is: masoct -> snoo alien -> reddit image tile because "Snoo alien is the masot for Reddit"

Note: You can use the hint feature after selecting the first tile of the triplet, and that only once for each easy level


Maze Runner 🌀

It is an adventure escape challenge where you must navigate through intricate mazes and reach the exit before time runs out. It’s a true test of your speed, memory, and decision-making skills!

🎯 Objective: Find the fastest route through the maze and reach the 🏠 exit before time runs out. There are a total of 6 levels/mazes with varying time limits.

🔹 How to Play? 1️⃣ Start at the entrance of the maze. 2️⃣ Use arrow keys (or joystick on mobile) to move in any direction. 3️⃣ Watch out for dead ends—choose the right path wisely! 4️⃣ Beat the clock—each level has a time limit to escape. 5️⃣ Advance through 6 levels, with increasing difficulty!

💡 Pro Tip: Pay attention to the layout before making a move—one wrong turn can cost valuable time!

⚡ Think fast, move smart, and prove your maze-running mastery! 🏆🔥


Q&A Playground 🎥

It is a knowledge-driven trivia game that tests your learning and quick-thinking skills. Watch a short video, absorb the information, and answer 4 challenging multiple-choice questions before time runs out!

🎯 Objective: Read the educational paragraph carefully and answer all 4 questions correctly within 20 seconds to progress!

🔹 How to Play? 1️⃣ Read the video (from one of 3 categories: Technology, History, or Environment). 2️⃣ Read the question carefully once the video ends. 3️⃣ Select the correct answer from the four options provided. 4️⃣ Act fast! You have 20 seconds per question. 5️⃣ Score high — every correct answer takes you closer to victory!

💡 Pro Tip: Pay close attention to key details in the video—they often hold the answers!

📚 Learn, play, and challenge your mind with every session! 🏆🔥


How I built it 🛠

Building Tri Quest required a blend of game mechanics, logic, and seamless interactivity to create an engaging 2D RPG-style gaming experience on Reddit. Here's how it came to life:

🔹 Tech Stack & Tools:

Devvit SDK – To integrate with Reddit's ecosystem.

JavaScript (Vanilla & Devvit Blocks) – For game logic and UI interactions.

Redis – To store user progress, scores, and game state.

CSS & Media Queries – Ensuring responsiveness for both desktop & mobile.

WebView Posts – Enabling interactive gameplay within the subreddit.


🔹 Game Mechanics:

Flip the Tiles: Built using event-driven logic to detect correct triplets of tiles.

Maze Runner: Implemented pathfinding & movement tracking for smooth navigation.

Q&A Playground: Designed a dynamic video-based quiz system with real-time answer validation.


🔹 Optimizations & Enhancements:

Hover-based interactions (desktop) vs. Tap-based controls (mobile).

Joystick controls for better gameplay on touch devices.

Real-time leaderboard & weekly winner announcements using Redis Sorted Sets.

Every aspect of Tri Quest was built to ensure smooth performance, competitive gameplay, and an immersive learning experience—all within a Reddit-powered gaming environment! 🚀🎮


Challenges I ran into

⚡ Challenges I Ran Into Building Tri Quest came with its fair share of hurdles, pushing me to find creative solutions along the way.

🔹 🎮 Joystick & Player Controls: Adapting Maze Runner for mobile touchscreens required a virtual joystick instead of keyboard controls. Limited movement range and ensured smooth gameplay without accidental drifts.

🔹 📡 WebView Posts & Devvit Blocks: Embedding an interactive game inside a Reddit post required careful structuring. Managed state synchronization between WebView and game logic.

🔹 📊 Leaderboard & Score Handling: Redis Sorted Sets were perfect for ranking users, but fetching top scorers dynamically required fine-tuning. Ensured real-time updates and weekly resets for fair competition.

** 🔹 ⏳ Scheduled Jobs & Automation**: Setting up a CRON job in Devvit to announce weekly winners wasn’t straightforward. Solved it using custom event scheduling and automated score resets.

Despite these challenges, each solution enhanced the overall experience, making Tri Quest a seamless, engaging, and competitive game! 🚀🔥


Accomplishments that I'm proud of 🏆

1️⃣ Successfully integrated a fully interactive 2D RPG game inside Reddit.

2️⃣ Optimized gameplay for both desktop (hover) & mobile (touch/joystick).

3️⃣ Implemented a real-time leaderboard with automated weekly winner announcements.

4️⃣ Designed engaging challenges that make learning fun & rewarding.

5️⃣ Seamlessly handled WebView communication for smooth game interactions! 🚀

6️⃣ Appreciation and CRON job-generated winner posts are auto-approved by Devvit so that everyone can see them instantly. CRON job was itself a great achievement for me

7️⃣ Enhanced Appreciation & Recognition To make appreciation & congratulatory posts stand out, I implemented special enhancements that add to the overall engagement and excitement:

✅ 🎨 Visual Impact – Weekly winner posts include a custom celebratory image, making the recognition more vibrant and rewarding. ✅ 📝 Rich Text Formatting – Posts leverage Reddit’s rich text editor, incorporating bold highlights, structured paragraphs, and interactive elements for a more immersive experience. ✅ 📢 Dynamic Engagement – Each appreciation post automatically pops up in users’ feeds, boosting visibility, attracting new players, and bringing back returning users.

By integrating these personalized and visually engaging elements, Tri Quest ensures that players feel valued, driving motivation and strengthening the community!


What I learned 📚

1️⃣ Optimizing for both desktop & mobile requires adaptive UI/UX strategies.

2️⃣ Devvit & WebView Posts provide powerful ways to bring interactivity to Reddit.

3️⃣ Redis Sorted Sets are great for leaderboards but need careful structuring.

4️⃣ CRON jobs & automation help in scheduling tasks like weekly winners.

5️⃣ Balancing fun & learning makes a game more engaging and rewarding! 🚀🎮


🎉 Why Create Appreciation & Congratulatory Posts?

Since Tri Quest operates within a single game post, I wanted to expand the subreddit's reach and attract more players. The best way to achieve this is by recognizing and celebrating players' achievements through dedicated appreciation posts.

Each time a new congratulatory post is created: ✅ It appears in players' feeds, keeping them engaged and motivated. ✅ It highlights top performers, fostering healthy competition. ✅ It attracts new users while encouraging returning players to participate.

By consistently acknowledging players' efforts, the game remains active, competitive, and rewarding, making the subreddit a hub for skill-building and fun! 🚀🔥


What's next for Tri Quest 🚀

Currently, all game levels have been designed manually, ensuring a well-balanced challenge within the hackathon’s timeframe and scope. However, moving forward, the game will evolve dynamically to keep players engaged with fresh content each week.

With the automated CRON job running every Sunday at 1:30 PM GMT, the app will: ✅ Generate a new game post containing brand-new levels for the upcoming week.

✅ Disable the older game post, ensuring players always engage with the latest content.

✅ Showcase the past week's leaderboard, displaying the top 5 scorers and their achievements.

✅ Encourage continuous participation, as every week will bring fresh challenges, new learning opportunities, and renewed competition.

By implementing this rotating game cycle, Tri Quest will remain exciting, preventing repetition while consistently enhancing players' knowledge and problem-solving skills! 🚀🎮

Share this project:

Updates