DEV Community

Cover image for I built Time Traveler’s Mosaic with Google AI
ANIRUDDHA ADAK
ANIRUDDHA ADAK Subscriber

Posted on

I built Time Traveler’s Mosaic with Google AI

#deved #learngoogleaistudio #ai #gemini

Education Track: Build Apps with Google AI Studio

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built Time Traveler's Mosaic, a web-based puzzle game where you piece together history, one tile at a time. The game presents you with a scrambled 3x3 mosaic. Your mission is to reassemble the image, which depicts a historical scene. Each solved puzzle unlocks the next chapter of a time-traveling story, all dynamically generated by AI. 🖼️

The core of the application relies on Google's AI models to create a unique experience every time:

  • Imagen 2 generates the beautiful, oil-painting-style images for the puzzles.
  • Gemini acts as the creative storyteller and game master, generating the historical scenarios, story chapters, image prompts for Imagen, and helpful in-game hints.

A key feature is the ability for players to go off the beaten path. Not only can you select pre-defined eras like 'Ancient Egypt' or the 'Viking Age', but you can also forge your own path by providing a custom prompt like "a jazz club in 1920s Harlem" or "the first landing on Mars," and the AI will craft a brand new, unique puzzle and story just for you!

Here are a couple of the key prompts that power the game's AI:

Key Prompt 1: Generating a new game chapter

You are a creative historian and storyteller. Based on the time period "${timePeriod.name} (${timePeriod.era})", generate a game scenario. Your response MUST be a valid JSON object with two keys: "imagePrompt" and "storyChapter".
1. "imagePrompt": A detailed, one-sentence description for an AI image generator. The description should create a vibrant, detailed oil painting of a single, coherent scene...
2. "storyChapter": The first chapter of a time-travel story related to the scene. It should be an engaging paragraph (around 100-150 words)...
Enter fullscreen mode Exit fullscreen mode

Key Prompt 2: Creating a custom journey from user input

You are a creative historian and storyteller for the game "Time Traveler's Mosaic". A player has suggested a theme: "${userPrompt}".
Your task is to flesh this out into a playable game chapter. Your response MUST be a valid JSON object with three keys: "timePeriod", "imagePrompt", and "storyChapter".
1. "timePeriod": An object with two keys: "name" and "era". Based on the user's prompt, create a suitable name for the time period and estimate its historical era...
...
Enter fullscreen mode Exit fullscreen mode

Demo

Here's a look at the game in action. Imagine you're the player...

1. You start by choosing your destination. You can pick a pre-set era or create your own adventure.

2. The AI gets to work! A loading screen appears while Gemini crafts the story and Imagen paints the scene.

3. The puzzle appears. You're presented with the scrambled mosaic and the first chapter of your story. You can drag and drop tiles to solve the puzzle, but each move costs you points!

Imapuxxle ion

4. Victory! Once you solve the puzzle, the tiles merge into the complete image, and you get a victory message with your final score. You're now ready for your next journey.

complete scription

You can try out the fully deployed application here: Game Link

My Experience

Working on this project was a fantastic deep dive into the practical application of modern AI. My key takeaway is how seamlessly different AI models can be chained together to create something greater than the sum of its parts.

What I Learned:

  • Prompt Engineering is Key: Getting a reliable, structured JSON response from Gemini was crucial. It took some iteration to craft a prompt that was both creative and strict, ensuring the game didn't break. The responseMimeType: "application/json" config was a lifesaver.
  • Synergy Between Models: The most powerful workflow was using Gemini to generate a descriptive imagePrompt and then feeding that directly into Imagen. This allowed the narrative and the visuals to be perfectly in sync, which is the heart of the game's experience.
  • Graceful Error Handling is Non-Negotiable: APIs can fail, and rate limits are real. I quickly learned to implement robust error handling that not only caught issues but also provided user-friendly feedback, like "The time stream is unstable" or "The hint generator is cooling down," which keeps the user informed without breaking the immersion.

What Was Surprising?
The most surprising part was how incredibly well Gemini handled the custom user prompts. I expected it to struggle with vague or unusual requests, but it consistently returned creative and fitting timePeriod names, eras, stories, and detailed image prompts. Seeing it turn "a cat cafe run by robots" into a coherent, playable chapter was a moment of pure magic. It felt less like I was programming a game and more like I was collaborating with a creative partner.

Thanks for reading about my journey through time. I hope you give the game a try! 🚀

Top comments (0)