Summary  
This chapter covers constructing an interactive home screen interface by implementing clickable cards for topic selection and handling navigation events.

General domain of usage  
Web-based games

A memory game starts with a welcoming home screen. Ours will be cheerful and playful, with big cards for different topics that players can choose from before starting.

This game is a classic memory challenge: flip two cards, try to find a match, and keep going until all pairs are discovered. To make it more fun, players can choose a **topic** before they begin.

For the first version, we'll add three: **Animals**, **Fruits**, and **Space**. Each topic will appear as a large, colorful card with an emoji and a label. Clicking one will take the player into the game for that theme.

Let's set everything up step by step:

You can place it anywhere (Desktop, Documents, etc.). For example, call it "flip-card-memory-game".

Create your project folder.

Go to **File** → **Open Folder** and select the one you just made.

Open the folder in Cursor.

This is where we'll write our first prompt.

Open a chat in Cursor.

Cursor will generate the code for the home screen.

Type the prepared prompt (or your own version).

Once Cursor finishes, click **Go Live** to instantly preview the page in your browser.

If you'd like to tweak the design (change colors, try a new font, or adjust the layout), ask Cursor in plain English, and it will update the code for you.

Note

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      <textarea
        class="text-field"
        id="Your id"
        style="height: 200px; max-width: 100%"
      >
We are building a fun Flip Card Memory Game. Start with a playful home screen that has a big, friendly title at the top saying "Flip Card Memory Game" and a short subtitle underneath saying "Choose your topic to start playing." Below that, show three large colorful cards with emojis and labels for Animals, Fruits, and Space. When a person clicks one of these cards, they should be taken to the game for that topic. The whole page should feel bright, rounded, kid-friendly, and cheerful with a fun, bold font and smooth hover or tap effects. Make sure it looks good on both phones and laptops.</textarea
      >
      <button
        class="copy-button"
        onclick="handleClick('Your id', 'widget1-notify')"
      >
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Create simple browser games through the power of prompting in Cursor AI. Discover how to turn everyday ideas into interactive projects without coding knowledge. Practice guiding AI with clear instructions and polish your games into something you can proudly show.

Build your very first game by guiding Cursor AI with simple prompts. Explore how to flip cards, check for matches, and track progress in the browser. Learn to refine the AI output step by step and create a clean memory game anyone can play.

Create a fun and dynamic catching game with Cursor AI. Control a backpack at the bottom of the screen and catch school items falling from above. Practice adding scoring, player controls, and playful visuals while learning how to refine AI code generation.

Develop a small adventure where a rabbit tries to reach a carrot while avoiding foxes and wolves. Guide Cursor AI to generate movement, obstacles, and win or lose conditions. Learn how to adjust prompts to handle more complex logic and polish your game into a complete experience.

Creating the Home Screen

Prompt in Cursor

Awesome!

Creating the Home Screen

Prompt in Cursor