Inspiration
What it does
"Rage Quit Clicker" is a web-based game where the player's goal is to click a button that constantly tries to evade them. The button exhibits various "personalities" and evasion tactics, such as disappearing, moving erratically, or even spawning decoys. The game tracks the player's score (which decreases with each click), misses, and time played. It features a dynamic messaging system that taunts the player and an achievement system that rewards specific milestones, adding layers of challenge and replayability. The game is designed to be integrated directly into the Reddit platform via Devvit, allowing users to play within their subreddits.
How we built it
We built the frontend of "Rage Quit Clicker" using React, leveraging its component-based architecture for modularity and state management. We utilized CSS and Tailwind CSS for styling, creating a visually appealing and responsive interface that adapts to various screen sizes. The core game logic, including button movement, evasion patterns, message display, and achievement tracking, was implemented using React hooks like useState, useEffect, useCallback, and useRef to manage the complex interactive state.
For the backend, we integrated with Reddit's Devvit platform. This allowed us to deploy the game as a Reddit app, enabling features like creating new game posts directly within a subreddit. While the current game primarily relies on client-side logic, the project includes a Node.js serverless backend using Express, designed to handle future features like persistent game statistics and leaderboards, leveraging Devvit's Redis integration for data storage. Vite was used as the build tool for the client-side application, ensuring fast development and optimized production builds.
Challenges we ran into
One of the primary challenges was designing the button's evasion logic to be both challenging and fair, balancing frustration with fun. We experimented with various movement patterns, disappearance types, and personality shifts to keep the player engaged.
Another significant challenge, which we recently addressed, was refining the achievement system's logic. Due to the asynchronous nature of React state updates and frequent calls to the achievement checking function, some achievements, like "Patience Grasshopper," were triggering multiple times. We overcame this by implementing more robust state management within the setAchievements callback, ensuring achievements are only unlocked and displayed once.
Integrating with the Devvit platform also presented its own set of challenges, particularly around initial setup, authentication, and understanding the unique serverless environment and its limitations (e.g., not being able to use external databases like Supabase directly, and the need to playtest within a specific subreddit for full network functionality).
Accomplishments that we're proud of
We are particularly proud of creating a game that successfully delivers on its premise of being intentionally frustrating yet highly addictive. The dynamic button behaviors, combined with the taunting messages and the rewarding achievement system, create a unique and memorable user experience. We're also proud of the robust achievement tracking system, especially after refining its logic to ensure accuracy and prevent duplicate triggers. Finally, successfully integrating a complex interactive web application within the Reddit Devvit ecosystem is a significant accomplishment.
What we learned
Through this project, we gained a deeper understanding of advanced React state management techniques, especially when dealing with complex, interdependent states and asynchronous updates. We honed our skills in CSS animations and responsive design, crucial for creating a dynamic and cross-device compatible user interface. We also learned extensively about the Devvit platform's capabilities and constraints, understanding how to leverage its unique features for Reddit-native applications. The debugging process for the achievement logic reinforced the importance of meticulous attention to detail in asynchronous programming and state synchronization.
What's next
xpand Button Personalities and Evasion Tactics: Introduce even more unpredictable and humorous behaviors for the button. Implement Persistent Leaderboards: Utilize the existing backend API endpoints and Redis integration to track and display global player scores. Add More Achievements: Introduce new, creative achievements to further challenge and reward players. Enhance Reddit Integration: Explore deeper integrations with Reddit features, such as sharing scores directly to posts or user profiles. Introduce Customization Options: Allow players to personalize the button's appearance or game settings.
Log in or sign up for Devpost to join the conversation.