Beat The Ghost X

Race against a real-time Ghost of the top player in this high-speed typing survival game. Master daily words, survive chaotic Glitch modes, and climb the global leaderboards. Speed is survival.

Comment

Beat The Ghost X 👻

Inspiration

The inspiration for Beat The Ghost X came from the adrenaline-pumping "Time Trial" modes in racing games, where players compete against a "Ghost" replay of the best lap. We wanted to bring that intense, competitive feeling to a classic typing test. We also noticed that most typing games on Reddit were simple text inputs. We wanted to push the boundaries of the Reddit Devvit functionality, creating a game that feels "Premium," alive, and visually stunning—something that makes you say "Wow" the moment you open it.

What it does

Beat The Ghost X is not just a typing test; it's a high-speed survival race.

  • Race Against the Dead: You don't just type against a clock; you race against the "Ghost"—a visual representation of the current world record holder's keystrokes.
  • Daily Challenges: Every day features a new word sourced dynamically from Reddit communities (like r/vocabulary) or Wikidata.
  • Glitch Mode 👾: A harder, chaotic mode that changes daily.
    • Vanish: Letters disappear immediately after you type them, forcing you to rely on memory.
    • Backwards: You must type the word in reverse (last letter to first).
  • Interactive Roasts: The game judges you. If you're slow or make typos, the AI roasts you with snarky comments. If you're fast, it praises you.
  • Community Integration:
    • Live Leaderboards: Real-time updates for Daily, Overall, and Glitch rankings.
    • Creative Sentence Challenge: The winner of the day gets their "Creative Sentence" featured prominently on the main menu for everyone to see.
    • Share to Reddit: Seamlessly share your results and "Roasts" directly to the comments.

How we built it

We built Beat The Ghost X using the Reddit Devvit Platform, leveraging modern web technologies to create a seamless experience.

1. The Core Engine (Frontend)

  • React & TypeScript: For a robust, type-safe UI architecture.
  • TailwindCSS: heavily utilized for the "Premium" aesthetic. We used advanced arbitrary values, glassmorphism (backdrop-blur), and custom keyframe animations (animate-pulse, slide-in) to make the interface feel alive.
  • Ghost Replay System: We record the "Fingerprint" (timestamp of every keystroke) of the record holder. When you play, we replay that fingerprint in real-time to animate the Ghost cursor, creating a genuine 1:1 race.

2. The Brain (Backend)

  • Hono: Used for routing and handling API requests within the Devvit server environment.
  • Redis (Data Persistence):
    • Leaderboards: We utilize Redis Sorted Sets (zAdd, zRange) to handle high-speed ranking for thousands of players.
    • Ghost Data: Storing the JSON "fingerprint" of the best run to replay it for others.
    • Caching: daily words and leaderboard snapshots to minimize API latency.

3. Dynamic Content

  • Word Sourcing: We built a fetcher that scrapes specific subreddits (like r/logophilia) for trending complex words, falling back to Wikidata for scientific/nature terms if Reddit is quiet. This ensures the content is always fresh.

Challenges we ran into

  • Ghost Synchronization: Making the Ghost feel "real" was tough. We had to ensure the replay frame rate matched the player's perception of time without lagging the input.
  • State Management: Handling the millisecond-precision timer, ghost position, input validation, and UI animations simultaneously caused performance hiccups initially. We optimized this by using requestAnimationFrame for visual updates independent of React's render cycle.
  • Redis Constraints: structuring our data to stay within Devvit's Redis limits while storing leaderboards for multiple modes (Daily, Overall, Glitch) required careful data design.
  • Glitch Mode Logic: Implementing "Backwards" typing was tricky—we had to reverse the validation logic entirely while keeping the user feedback instant.

Accomplishments that we're proud of

  • The "Feel": We are incredibly proud of the UI. The neon glows, the smooth transitions, and the sound design mimic a high-end native app.
  • The Roast System: It adds so much personality. Seeing the game tell you "My grandma types faster" genuinely motivates players to try again.
  • The "Vanish" Mechanic: It turned out to be a surprisingly fun cognitive challenge that tests short-term memory alongside typing speed.
  • Zero-Friction Sharing: The seamless integration with Reddit comments encourages a competitive community loop.

What we learned

  • User Feedback is Key: Adding sound effects (dings, buzzers) instantly made the game 10x more satisfying to play.
  • The Power of Redis: We learned advanced Redis patterns for leaderboard management that we hadn't used before.
  • Animation Performance: We learned how to optimize CSS animations to run on the GPU (compositor only) to ensure the typing input never lags, even on lower-end devices.

What's next for Beat The Ghost X

  • Multiplayer Duel: Real-time 1v1 races against other Redditors (socket-based).
  • Ghost Seasons: Unlockable Ghost avatars and themes for reaching specific tiers.
  • More Glitch Modes: "Scramble" (letters shuffle every second) and "Upside Down" (CSS rotation).
  • Pro Statistics: Detailed graphs showing your WPM progression over the month.

Built With

Share this project:

Updates