Projects › Games › Snake

Make your own Snake game with AI

Play it first. This game was made the same way the guide below shows you: by asking an AI assistant for it in plain English. Then make your own.

Starter 20 to 40 minutes Free · nothing to install Windows, Mac & Chromebook

Snake

Eat the red apples. Don't hit the walls or your own tail.

Score0
Best0
← ↑ → ↓ or WASD to steer
Space to pause
On a phone, swipe or use the pad.

It speeds up a little every time you eat. Your best score stays in this browser.

Watch it come together, start to finish
What you'll build

Your own Snake game, in about half an hour

You won't write any code yourself. You'll tell the AI what you want, copy what it gives you into a file, and double-click it. Your dog can be the snake. The food can be pizza. It's your game.

  • A classic Snake game that opens in any web browser
  • A score and a saved high score that survives closing the browser
  • Speed that creeps up as you get better, with start, pause and game-over screens
  • Arrow keys on a computer and swipes on a phone
  • Your own colours, characters and sounds

Good for: parents after a rainy-day project, teachers running a coding club, and anyone who has wondered "could I actually make a game?"

Before you start

What you need

An AI chat assistantClaude, ChatGPT or Gemini. The free versions are enough. Open one in another tab now.
A plain text editorNotepad on Windows, TextEdit on a Mac (choose Format › Make Plain Text first).
A web browserThe one you're reading this in is fine.
Step by step

Build it in seven steps

  1. Ask for the basic game

    Copy this prompt and paste it into your AI assistant.

    Copy this prompt
    I don't know how to code. Please make me a classic Snake game that runs in a web browser.
    
    Requirements:
    - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it to play.
    - No external libraries, no internet connection needed, no installs.
    - Arrow keys to steer. The snake grows each time it eats food. Game over if it hits the wall or itself.
    - Show the current score on screen.
    - A "Press Space to start" screen, and a "Game over, press Space to play again" screen.
    
    Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

    The AI replies with a long block of code. You don't need to read it. Look for a Copy button at the top or bottom of the code block and click it.

  2. Save it and play

    1. Open Notepad (Windows) or TextEdit in plain text mode (Mac).
    2. Paste the code.
    3. Save the file as snake.html. In Notepad, set Save as type to All files so it doesn't become snake.html.txt.
    4. Find the file and double-click it. It opens in your browser.
    5. Press Space. You're playing a game you made.
    New to saving files like this? Read How to save and open an HTML file. It takes two minutes.
  3. Add a high score that remembers

    Copy this prompt
    That works, thank you. Now please add a high score that is saved in the browser (using localStorage) so it is still there after I close and reopen the file. Show "Score" and "Best" side by side at the top. If I beat my best score, show "New best!" on the game-over screen.
    
    Please send me the whole updated file again, not just the changed parts.
    Always ask for the whole file. Then you can replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).
  4. Make it get harder

    Copy this prompt
    Please make the game speed up a little every time the snake eats 5 pieces of food, up to a sensible maximum speed. Also add a pause: pressing P should pause and unpause, with "Paused" shown on screen.
    
    Send me the complete updated file.
  5. Make it look like yours

    This is the fun part. Change the description to whatever you like.

    Copy this prompt
    Please restyle the game:
    - Dark green background with a subtle grid
    - The snake should be bright yellow with a darker head that has two little eyes facing the direction it's moving
    - The food should be a red apple drawn with a small green leaf (draw it with code, don't use image files)
    - Use a chunky, retro-looking font for the score
    - Centre the game on the page and make it fill most of the screen on any size of window
    
    Send me the complete updated file.

    Want your own pet as the snake's head? Put head.png in the same folder and ask:

    Optional
    I want to use a photo of my dog as the snake's head. Please change the game so it loads an image called head.png from the same folder as the HTML file and draws it as the head, rotated to face the direction of travel. If the image is missing, fall back to the normal head.
    
    Send me the complete updated file, and tell me how big the image should be.
  6. Add sounds

    Copy this prompt
    Please add simple retro sound effects using the Web Audio API (generated by code, no sound files): a short "blip" when the snake eats, and a falling "game over" tone. Add a mute button in the corner, and remember whether sound is muted.
    
    Send me the complete updated file.
  7. Make it work on a phone or tablet

    Copy this prompt
    Please make the game playable on a phone or tablet: swiping up, down, left or right on the game area should steer the snake, and tapping should start or restart the game. Stop the page from scrolling while playing. Keep the arrow keys working on computers.
    
    Send me the complete updated file.

    To play it on your phone, email the file to yourself or put it online with free hosting.

ADVERTISEMENT · IN-ARTICLE
If it goes wrong

Quick fixes

The file opens as text instead of a game

It was saved as snake.html.txt, or TextEdit saved it as rich text. Save it again as plain text with exactly .html at the end.

The page is blank

The AI's reply was probably cut off. The code should finish with </html>. If it doesn't, ask: "Your code was cut off. Please send the complete file again."

Something stopped working after a change

Tell the AI exactly what you see, in plain words. For example: "After your last change, the snake no longer moves when I press the arrow keys. Nothing else changed. Please find the problem and send me the complete fixed file."

I want to see the error the browser is hiding

Press F12 (or Cmd+Option+I on a Mac), open the Console tab and copy any red text into the chat. The AI can usually fix it in one go.

How do I keep a working copy?

Before each big change, save a copy as snake-v1.html, snake-v2.html and so on. If a change goes badly, you can always go back.

Make it your own

Twist it into a different game

A birthday game

The snake collects their favourite things.

At 20 points, show "Happy birthday, Sam!"

Two-player Snake

Race a friend on the same keyboard.

One player on arrow keys, one on W A S D.

Classroom quiz snake

Food is labelled with answers.

The snake must eat the right answer to grow.

Breakout instead

Same prompts, different classic. See our Neon Breakout.

Breakout game where a paddle bounces a ball to break bricks

Made something fun? Share a screenshot and tag us. We feature reader projects.

Why build it yourself?

You're learning the skill behind every project here

There are thousands of Snake games online. Making your own teaches you the most useful skill of the AI age: describing what you want clearly, then improving it one step at a time. Once you've done it here, you can do it for anything.

Keep going

What to build next