Emoji Riddles

A fun and interactive game where you guess the meaning of emoji sequences. Riddles and guess evaluations are powered by the Gemini API.

Comment

Inspiration

The inspiration for this project came from the universal language of emojis. Emojis are a fun and creative way to communicate as they cross cultures, age groups, and even literacy levels, and I wanted to build a game that leverages this to create a fun and engaging experience for everyone. The idea was to create a simple, intuitive game that is easy to pick up and play, but also challenging enough to keep players coming back for more.

What it does

Emoji Riddles is a web-based game where players are presented with a series of emojis that represent a word or phrase from a chosen category. The player's task is to guess the correct answer. The game features a variety of categories, a scoring system, and a dynamic difficulty level that adjusts to the player's performance.

How I built it

This project was vibe-coded with Roo Code with some UI adjustments. The game is a single-page application (SPA) built with React (Vite) using TypeScipt. State management is handled using React hooks. The UI is styled with Tailwind CSS for a clean and modern look.

The core of the game's logic is powered by the Google Gemini API. The API is used to:

  • Generate the emoji riddles based on a given category and difficulty level.
  • Evaluate the player's guesses for semantic closeness to the correct answer.
  • Provide hints for the riddles.

Challenges I ran into

  • State Management: Managing the various states of the game (e.g., loading, playing, revealed, game over) and ensuring the UI updates correctly was a challenge. I also had to carefully manage the state for loading indicators for different actions to provide good user feedback.
  • Preventing Riddle Repetition: To ensure a good user experience, I implemented a system to prevent the same riddle from appearing twice in the same round. This involved tracking used riddles and filtering them out when generating a new one.
  • Prompt Engineering: Crafting the right prompts for the Google Gemini API to get the desired output (e.g., detailed breakdowns, fair evaluations) required some experimentation and refinement.

Accomplishments that I'm proud of

  • Dynamic Difficulty System: I'm proud of the dynamic difficulty system, which makes the game more engaging by adjusting the challenge level based on the player's performance.
  • Comprehensive Category System: The extensive category and subcategory system provides a lot of variety and replayability.
  • Clean and Intuitive UI: I focused on creating a user interface that is easy to use and visually appealing.

What I learned

  • Working with Generative AI: This project was a great opportunity to learn how to work with a powerful generative AI like the Google Gemini API. I learned how to craft effective prompts and parse the JSON output to integrate the AI's capabilities into a web application.
  • React Best Practices: I reinforced my knowledge of React best practices, including state management with hooks and component-based architecture.
  • Importance of User Feedback: The iterative process of building this game and responding to user feedback was a great reminder of how important it is to listen to users and continuously improve the product.

What's next for Emoji Riddles

  • Sound Effects: Adding sound effects for correct/incorrect answers and other interactions would make the game more immersive.
  • Multiplayer Mode: A multiplayer mode where players can compete against each other would be a great addition.
  • User-Submitted Riddles: Allowing users to create and submit their own riddles would create a community around the game and provide an endless stream of new content.
Share this project:

Updates