Memory Trip, a Real-Time Memory Game

Memory Trip reimagines the classic memory game "I'm going on a trip..." for the generative AI era. Nano Banana visually brings the game to life by seamlessly editing each new item into the scene.

Comment

Inspiration

Memory Trip is an innovative visual memory game that challenges players to collaboratively build a scene using the power of generative AI. It's a unique blend of the classic "I'm going on a trip..." memory game with cutting-edge, real-time image generation, creating an engaging experience where players' imaginations directly shape the game world.

Initially conceived as a fun, local "pass-and-play" game for friends huddled around a single device, the project's primary goal was to break free from this physical limitation. By implementing a robust, cloud-native backend, Memory Trip has evolved into a real-time, shared adventure that connects players seamlessly, whether they're in the same room or on opposite sides of the globe.

Core Functionality

The gameplay loop is simple yet captivating:

  • Set the Scene: A player starts by providing a destination (e.g., "Bocas del Toro"). The AI first uses a powerful text model (Gemini 2.5 Pro) to enrich this idea into a detailed, descriptive paragraph. This enhanced prompt is then used by an image model (Gemini 2.5 Image Flash) to generate a photorealistic, "Google Street View" style starting image.
  • Take a Turn: On their turn, a player must correctly recall every item that has been added to the scene so far, in the correct order.
  • Add an Item: After successfully recalling the list, the player adds a new item of their own. The AI seamlessly edits this new item into the current scene (in-painting), creating an updated image for the next player.
  • Test Your Memory: The game continues, with the list of items growing longer and the scene becoming more surreal and challenging to remember with each turn. A mistake ends the game!

Key Features

Dynamic, AI-Powered Visuals: The entire visual landscape is generated and edited in real-time by the Gemini API, ensuring no two games are ever alike.

Multiple Game Modes:

  • Multiplayer (2-4 Players): Connect with friends from anywhere in the world using a simple four-letter code, or play the classic "pass-and-play" local mode.
  • Player vs. AI: A challenging single-player mode where you face off against an AI opponent with a distinct, randomly chosen persona (e.g., "The Whimsical Artist," "The Crooked Pirate"). The AI uses Gemini 2.5 Pro to generate creative and tricky items that fit its character.
  • Solo Mode: A relaxed, creative sandbox with no timers or memory tests. Players can freely build a scene to tell a story or create a piece of art.

Rich Post-Game Experience:

  • AI-Generated Journal: At the end of a game, Gemini 2.5 Pro writes a short, imaginative "traveler's journal" entry that humorously summarizes the bizarre trip based on the final list of items (e.g., "The Great Water Taxi Incident").
  • Shareable Digital Postcards: The app uses the Canvas API to generate a beautiful digital postcard featuring the final image, the AI-generated summary, and the list of items, which can be shared using the native Web Share API.
  • Trip Animation: Players can watch a replay of their game, seeing the scene evolve as each item is added.
  • Persistent Trip Gallery: All completed trips are automatically saved to local storage, allowing players to revisit their most memorable creations.

Intuitive & Accessible UX:

  • Voice Input: Integrates the browser's Web Speech API, allowing players to recall and add items using their voice.
  • Audio Feedback: Procedural sound effects generated with the Web Audio API provide satisfying feedback for game events.
  • Helpful Hints: Players can request a one-time hint per turn if they get stuck.

Technology Stack

  • Frontend: Built with React and TypeScript for a modern, type-safe architecture.
  • Styling: Tailwind CSS is used for a utility-first approach, augmented with custom CSS for unique animations and a cohesive "parchment and ink" visual theme.
  • Backend: A Node.js API hosted on Google Cloud Run. This stateless, serverless architecture is the key that unlocks the real-time, multi-device gameplay.
  • Database: Firestore acts as the central brain, managing the game state (player turns, scenes) in real-time.
  • Generative AI (Google Gemini API):
    • Gemini 2.5 Pro: Utilized for all language-based tasks, including initial prompt enrichment, creative AI opponent suggestions, and generating the final trip summary.
    • Gemini 2.5 Image Flash: "Nano banana" is the core visual engine, used for both generating the initial scene and performing all subsequent image editing (in-painting).
  • Browser APIs:
    • localStorage: For saving and retrieving trips for the gallery.
    • Canvas API: To dynamically generate the downloadable postcard image.
    • Web Share API: To enable native sharing functionality.
    • Web Speech API: For voice-to-text recognition.
    • Web Audio API: For creating procedural, non-intrusive sound effects.

Built With

  • canvas-api
  • css3
  • gemini-2.5-flash-image
  • gemini-2.5-pro
  • google-gemini-api
  • google/genai
  • html5
  • node.js
  • react
  • tailwind-css
  • typescript
  • web-audio-api
  • web-share-api
  • web-speech-api
Share this project:

Updates