Summary  
This chapter covers how to build a responsive home screen UI by rendering interactive cards and implementing click event handling to navigate between different views.  

General domain of usage  
Game development

A memory game starts with a welcoming home screen. It 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, you'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 you'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

According to the prepared prompt, what should be displayed on the home screen of your Flip Card Memory Game?

Create simple browser games through the power of prompting in Cursor. 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