Make a 2048 game with AI (no coding needed)

Games with simple rules often come out right on the first try. Describe it in words and play it in the panel on the right.

For: Puzzle fans who want their own 2048 with custom colors or rules

Tools
Claude (web & app), ChatGPT, Gemini
Time
15 min
Difficulty
Easy
Cost
Works on a free account

What you need

  • A computer (the game uses the arrow keys)
  • A free Claude account (claude.ai) or a free ChatGPT account
  • You do not need to have played 2048 before. The AI knows the rules

What you get

A 2048 game on a 4x4 board where you merge matching numbers. It works with the arrow keys and phone swipes, and it keeps your score and best score. When you reach 2048, a congratulations message and a "Keep going" button appear.

2048 demo. Runs right here on the page.Open in new tab

Step by step

  1. 1

    Go to claude.ai and sign in

    Open claude.ai in your browser and sign in with a Google account or an email address. Signing up is free. For ChatGPT, go to chatgpt.com.

    You know it worked whenYou are ready when you see a chat box at the bottom of the screen.

  2. 2

    Paste the prompt and send it

    Copy the prompt below, paste it into the chat box, and send it.

    Prompt to paste
    Make a 2048 game that I can play right in my browser. Put everything in a single file.
    
    - A 4x4 board
    - Arrow keys slide the tiles on a computer. On a phone, swipe the screen
    - When two tiles with the same number collide, they merge and the score goes up. A tile that has already merged during one move must not merge again in that same move
    - Show the current score and the best score at the top, and remember the best score the next time I open the game
    - When a 2048 tile is made, show a congratulations message and a "Keep going" button
    - When no moves are left, show "Game over" and a "Play again" button
    - The higher the number, the darker the tile color
    - Dark background. All text in English

    Make it yours

    • Describe the tile colors you want, such as "pastel tones" or "shades of green".
    • Changing the board from 4x4 to 5x5 makes the game easier.
    • You can use fruits or animals instead of numbers. Tell the AI to keep the same merging rules.
    Want more control? (a slightly more technical version)
    Make a 2048 game as one self-contained HTML file.
    - 4x4 grid, arrow keys and mobile swipe
    - Score and best score (localStorage)
    - Congratulations message and a "Keep going" button when 2048 is made; game over when no moves are left
    - A tile that merged in a move must not merge again in the same move
    - Tile colors get darker as numbers get higher
    - Dark background, no external libraries
    - All UI text in English

    You know it worked whenIn Claude, a result panel opens on the right showing a 4x4 board with two number tiles.

    TipIf ChatGPT only shows a long block of code, say "Show it so I can play it right away (use Canvas)."

  3. 3

    Play it in the result panel

    Click once on the game in the panel on the right, then press the arrow keys. Check that matching numbers merge when they collide.

    You know it worked whenIf the tiles slide the way you press, matching numbers merge, and the score goes up, it works.

    TipIf the whole page scrolls up and down or nothing happens when you press the arrow keys, click the game board first.

  4. 4

    Check that the rules are right

    Set up a row with two pairs, like 2, 2, 4, 4, and slide it left. The correct result is 4, 8. If everything merges into a single 8, the rule is wrong.

    You know it worked whenIf 2, 2, 4, 4 becomes 4, 8, the rule is correct.

    TipIf it is wrong, say "Sliding 2,2,4,4 to the left should give 4,8. A tile that already merged in a move must not merge again."

  5. 5

    Change it by asking

    Ask for the features you want, one at a time.

    TipTry things like "Add an undo button that can be used once", "Make the tiles slide smoothly", "Change the board to 5x5", or "Make the numbers bigger".

  6. 6

    Check the best score and send the link

    Play until you have a score, then refresh the page to see if the best score is kept. Next, click Publish at the top right of the result panel to make a link and send it in a chat app like WhatsApp. For the full steps, see "Share it as a link" below.

    You know it worked whenYou are done when the best score survives a refresh and the link works with swipes on your phone.

Share it with a link

  • No photos or forms? Make it in Claude on the web and press Publish on the artifact. Anyone can open the link without an account.
  • Photos or forms? Save the code as index.html in a folder with your photos and drag the whole folder onto app.netlify.com/drop. Sign up for free to make the link public.
See it screen by screen

If you get stuck

The result panel does not appear

Say "Show it in the result panel." You can also start a new chat and send the prompt again.

The arrow keys do not work

Click the game once with your mouse, then try again.

On my phone, swiping also scrolls the page

Say "Stop the page from scrolling when I swipe on a phone."

The best score is not saved

Scores are not remembered in private (incognito) windows. Open it in a normal window.

Merging behaves strangely

The most reliable fix is to give the AI a concrete example, like step 4, and say "This is what should happen."

Try next

  • Add more games the same way, one at a time, as long as the rules are clear: sudoku, tic-tac-toe, minesweeper.

Features used here

/artifactsOpens artifacts you made and artifacts shared with you, or attaches them to the session.Claude CodeCommandsfrontend-designBuilds polished frontend UI that avoids the generic AI look.Claude CodePlugins

More recipes

All recipes

Written in November 2026. App screens change, so menu names are described in general terms. People and data in examples are fictional. How we write