Home and Learn: Vibe Coding Course
Plan and Create Assets for a Match-Three Game
This is part one of our Match-Three tutorial. You will use Codex to plan the project, define the gameplay, choose a visual direction and create the game assets. The coding, game mechanics and testing are covered separately in part two, so this lesson stays focused on preparation and design. You can view and play the finished game here:
Play Match Three Game (opens in new window)
By the end of this lesson, you will have a clear plan and a collection of visual assets ready for implementation. If you are not able to create the assets, we have an asset pack you can download in part two, which includes all the sounds.
The most famous game in this genre is Candy Crush. The basic idea is simple: you have a grid filled with different items, such as candies, fruits, jewels, or gems. When three or more matching items appear next to each other in the same row or column, they are removed from the grid. New items then fall or appear to replace the ones that were cleared.
Players make moves by swapping one item with a neighbouring item in the same row or column. If that swap creates a match of three or more identical items, the match is cleared and the board updates. If the swap does not create a match, the game usually swaps the items back again. Below is an image of the kind of Match Three game we're going to vibe code.
A Match Three game can end in a few different ways. Some games give the player a limited number of moves and ask them to reach a target score or clear certain items before the moves run out. Others use a timer, where the player has to score as much as possible before time expires. Some games continue until there are no valid moves left on the board. For this tutorial, we'll use a clear goal so the game feels complete: the player will have a limited number of moves and will try to reach a target score before those moves run out.
New Project
We'll work in a new Project folder for this. In Codex, look at the left side panel. This is where you can move between your projects, chats, threads, and other workspace areas.
Hover your mouse over the word "Project". You should see some icons appear to the right. The three dots give you some organisation options, but click the page icon with the little cross, highlighted by a red circle in the image below.
Once you click the icon, you'll see a Create project dialogue box:
If you like, on your own computer, you can create a new folder to hold your projects, inside of a Documents folder, for example. After you create your folder, you can click the Use an existing folder option above. Otherwise, click the Next button. You'll see a box where you can enter a folder name:
Click Save to create a new project folder in the list on the left of Codex.
Keeping the game in its own folder helps Codex understand the project more clearly, and it also keeps the files for this tutorial separate from your other projects.
For this tutorial, we'll begin by asking Codex to plan the Match Three game with us before we ask it to write any code. Later, we'll ask Codex to create game assets for us. If you get no joy here, don't worry - you'll be able to download all our Match Three game assets.
Planning Stage
Before we start coding, we are going to get Codex to help us plan the game. This is the important lesson of the tutorial: don't jump straight to "build me a game." A better plan gives Codex a better target. It helps you decide what the board should look like, how swapping should work, how matches are detected, how scoring works, and how the game should end.
Codex has a built-in Plan mode. Plan mode tells Codex to slow down before implementation. It can gather context, ask clarifying questions, inspect the project, and propose an execution plan before it starts changing files.
In a new chat in your new Match Three Game project folder, type this in the prompt window:
/Plan
You should see a dropdown list appear:
Select Plan Mode. You'll see an indicator below the prompt area showing you that you have Plan Mode switched on:
(You can click the X on the indicator to get out of Plan Mode.)
Once in Plan Mode, enter the following as your prompt:
"I want to create a Match Three game. Can you help me plan out my idea? List some of the features that a successful Match Three game should include."
The results you get will look something like this:
Codex often pauses like this, especially in Plan Mode. It wants your input on what it should do next. On this occasion, we'll go with the top option, Level Puzzle. It's important to bear in mind, however, that you probably won't get exactly the same response as us. That is the nature of Agentic AI - different responses for different users. But you should have some sort of option on how to continue.
Once you do respond, Codex will give you what it thinks is a good plan for a Match Three game. Here is what it told us:
A successful Match Three game usually needs these feature groups:
Core Gameplay
- Swipe or click-swap adjacent tiles.
- Match 3+ identical pieces horizontally or vertically.
- Cascades after matches clear.
- Refill logic so new pieces fall into empty spaces.
- No-starting-match board generation.
- Detection for "no possible moves" and reshuffling.
Goals And Challenge
- Level objectives: clear target colors, collect items, break blockers, drop objects, reach score.
- Move limits or time limits.
- Difficulty curve across levels.
- Win/loss states with clear feedback.
- Level rating system, usually 1-3 stars.
Special Pieces
- Match 4 creates a row/column clearer.
- Match 5 creates a color bomb.
- L/T-shaped matches create area bombs.
- Special-piece combinations create bigger effects.
Progression
- A level map or level list.
- Unlocking new mechanics gradually.
- Boosters earned or selected before a level.
- Persistent score, stars, progress, and settings.
Polish
- Juicy animations: swaps, pops, falling tiles, cascades.
- Sound effects and music.
- Particle effects for clears and special pieces.
- Clear HUD for moves, goals, score, and progress.
- Responsive layout for desktop and mobile.
Retention Features
- Daily rewards or streaks.
- Achievements.
- Optional challenges.
- Cosmetic themes or worlds.
- Short, replayable levels.
Given your selected direction, I'd plan this as a level-based puzzle match-three game first: tight core loop, objective-based levels, special pieces, blockers, boosters, and a polished level-complete flow.
Design Stage
After you have a plan for the game, it is worth spending a little time on product design.
Product design means thinking about what the game should feel like before you build it. For a Match Three game, this includes the shape of the board, the colours of the tiles, the style of the buttons, the score display, the move counter, the win and lose screens, and the overall mood of the game. Is it bright and playful? Calm and cosy? Futuristic? Silly? Minimal?
Codex can help you explore these choices before you commit to one direction. You can ask it to suggest several visual styles for the same game idea, compare the strengths and weaknesses of each one, and turn your favourite direction into a more detailed design brief. For example, you might ask:
I want to design a Match Three game. Give me three different visual directions, including the board style, tile style, colours, UI layout, and win/loss screens.
You can also use an image generation model to create concept art or mockups. This can be helpful when you want to see different interface ideas quickly. For example, you could generate a mockup of a candy-themed game, a jewel-themed game, or a fruit-themed game, then use the image as a reference when asking Codex to build the actual web page.
Image generation is especially useful for mood, style, colour, and layout inspiration. It is less reliable for exact UI details, readable text, or production-ready assets. Treat generated images as concept sketches, not final instructions. Once you find a direction you like, describe it clearly in words so Codex knows what to build.
There are other good ways to explore design too. You can sketch the game on paper, make a simple wireframe, collect screenshots from games you like, or describe the layout in plain English. You can also use design tools and inspiration sites. Figma is useful if you want to create a more precise mockup, arrange the interface, choose colours, and test different layouts. Mobbin can be useful for studying real app and game interface patterns, especially things like menus, onboarding screens, settings screens, reward screens, and polished mobile layouts.
The goal is not to become a professional designer before writing code. The goal is to give Codex a clearer target. A vague prompt might produce a working game, but a thoughtful design direction will usually produce a game that feels more intentional, more polished, and more like something you actually imagined.
So add the text above to your prompt box. This text:
I want to design a Match Three game. Give me three different visual directions, including the board style, tile style, colours, UI layout, and win/loss screens.
You'll get something like this in response:
Go through the results and see which one catches your eye. Once you have chosen, you can ask Codex to come up with some actual designs, in image format. Try a prompt like this:
I'd like to go down the route of number 3, Treasure Forge. Use your image gen model to design the user interface for an 8-row by 8-column match three game. Give me four different designs so I can choose the one I want.
So we're asking Codex to come up with four images in a grid size of 8 by 8. Here is what Codex produced for us:
Notice how fast this was - 1 minute and 39 seconds. That's incredibly fast for four quality images!
But take a closer look at what a great job Codex's image generation AI has done with the game designs:
Design A, 1 of 4
Select one of the images that Codex generates, the one you feel would make for a great Match Three game. We're going to go with Design A. But you'll have different designs. Save the image somewhere on your computer, perhaps a handy Game Asset folder in Documents or your desktop.
The problem we have now is how to turn these great images into an actual game.
How to Create Game Assets
So we want to turn Design A above into some game assets.
The problems with the mockup image above is that it's just a flat 2D image. It is going to be no good like this in our game. That's because there is no separation of the various elements: the gems, the coins, the grid, the User Interface pieces. Everything is baked in to our flat image. What we need are separate game assets. We want to get from the image above to something like this asset pack:
So how do we get there? Why, with AI, of course!
Codex can use its image generation capabilities to create single assets from an image.
Make sure you are still in your Match Three project folder. We now need to create a prompt that will get us those separate assets.
First, let's attach our Match Three mockup image. In the bottom left of the prompt window, click the plus button:
From the menu that appears, select Add > Files and folders. Navigate to where you saved your mockup image to.
You now need a prompt to go with your image. You can adapt the following to your needs:
I have attached a mockup that I like of a Match Three game. Can you use your image gen to generate the various parts of the image and turn them into game assets? I need the items on the main 8 x 8 grid: 4 gems, a key, 2 coins, compass, hammer. I also need larger images of the bomb, the eyeglass, and hammer. I will also need the User Interface components, like the 8 x 8 grid itself, but without the items on top of the grid. I need the UI panels seen at the top, and the Win and Retry panels on the right. I would also like the panel at the bottom: the circles on a rectangle, only without any white numbers on the green background and any icons on top of the darker background.
Rewrite the prompt, entering your own list of things you'd like to extract from your mockup. Hit the up arrow to send your prompt. Codex will then go to work.
It may take a while, about 10 minutes for us. But you'll end up with some nice assets for your game. Codex will save the images to asset folders. Here are ours:
As you can see. Codex created some folders to hold our assets. For example, here is what is inside of our grid-items folder:
And here is what is inside of our ui folder:
They are all pretty decent assets, something we can use in our game straightaway. And the assets you create will be yours! You don't have to pay anyone or ask permission.
You can also extract the background image underneath your UI elements. Just ask Codex to do it for you. Something like this prompt:
I like the background image, the one underneath all the UI elements and other items. Can we isolate the background and reproduce it as a single image file to be used as the background of the game?
You'll end up with something like this:
(Don't worry - if you weren't able to create your game assets, we have an asset pack you can download in the next lesson.)
Nice! Now that we have a plan, a design direction, and some game assets, the next lesson can concentrate on implementation, game mechanics and testing.
Finally — build and test the Match-Three game! -->