A free falling sand game to play online, and how to make your own

Your own falling sand game, built in stages

Falling sand games (sometimes called powder games) look like magic, but every grain follows a few simple rules. That makes them a brilliant thing to build with AI: you describe the rules in plain English, and the assistant writes the code. You won't write any yourself. You describe, paste, test and paste back any errors.

• A sandbox that opens in any web browser, works offline and runs smoothly on a laptop or phone
• Sand, water, walls, fire, smoke, steam, oil, lava, ice, snow, salt, acid, glass, metal and more, each with grainy, natural colours
• Real reactions: lava turns water to steam and cools into stone, fire spreads through wood, plants grow into water, gunpowder explodes and throws things about
• Seeds that grow into flowers, ants that dig tunnels, fireflies and fireworks
• A toolbar with brush sizes and shapes, pause, speed, undo, gravity, wind, night mode and a heat view
• Ready-made scenes, a share link that holds the whole picture, and picture saving

Good for: kids and grown-ups who love sandbox games, anyone curious how games make water, fire and explosions, and older children who want a big project to build with a parent.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. So this guide builds the game in stages. After each stage, play with it, check it works and save a copy (sand-v1.html, sand-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

The idea behind the game is called a cellular automaton: a grid of cells where each cell looks at its neighbours and decides what to do next. AI assistants know it well. Famous examples to look at for inspiration are the original Powder Game, Sandspiel and Sandboxels.

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Start with sand that falls

   The first version only has sand, but it's the heart of every falling sand game: each grain looks at the cells below it and moves if there's room.

   Copy this promptCopy

   I don't know how to code. Please make me a "falling sand" 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. No external libraries and no internet connection.
   - A grid about 200 cells wide and 150 tall, stored in a typed array (Uint8Array) with one number per cell: 0 for empty, 1 for sand.
   - Draw the grid on a canvas using ImageData, scaled up so each cell is a few pixels big, with crisp edges (imageSmoothingEnabled = false). A dark background.
   - Every frame, go through the grid from the bottom row to the top. A grain of sand falls into the empty cell below it. If that is full, it slides down-left or down-right (pick one at random). Otherwise it stays put.
   - Swap the left-to-right direction on alternate rows so piles don't lean to one side.
   - Give each grain a slightly different shade of sand colour when it is made, so it looks grainy, not flat.
   - Hold the mouse button (or a finger) on the canvas to pour sand in a small circle. Don't let the page scroll while I draw on a phone.
   - Run it with requestAnimationFrame.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as sand.html and double-click it. Hold the mouse down: you should see a stream of sand pour out and pile up into a heap.

   Nothing happens? Press F12 (or Cmd+Option+I on a Mac), click the Console tab, copy any red text and paste it into the chat. The AI fixes most errors straight away once it can see the message.

2. Add water and walls

   Water is sand that also flows sideways. Walls stay put, so you can build cups, ramps and dams.

   Copy this promptCopy

   That works, thank you! Please add more materials:
   - Water: falls like sand, but when it can't go down it flows sideways up to 5 cells. Remember which way each water cell is flowing and keep going that way until it hits something, so pools level out smoothly.
   - Wall: never moves.
   - Sand sinks through water by swapping places with it.
   - An eraser.
   - Keep a small "moved this frame" marker for every cell, so nothing moves twice in one frame.
   - Give water a gently shimmering colour and a lighter line along its surface.
   - Under the canvas, a row of buttons to pick the material (each with a little square of its colour), and a brush size slider.
   - While I hold the mouse still, keep pouring. When I move fast, fill in the gaps between points so the line is unbroken.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Add fire, heat and reactions

   This is where it comes alive. Each cell gets a temperature, and materials change when they get hot or cold.

   Copy this promptCopy

   Please add heat and reactions:
   - Give every cell a temperature (a Float32Array). Heat passes between touching cells (not through empty air), faster through some materials than others, and everything slowly drifts back to room temperature.
   - Fire: rises and flickers, lasts a short time, then becomes smoke or vanishes. It sets fire to things it touches. Colour it from white-yellow (new) to dark red (old).
   - Smoke and steam: drift upwards with a little wobble and fade away. Steam turns back into water drops after a while, like rain.
   - Wood: stays still, and catches fire when hot. Burning wood glows, gives off flames, and leaves ash.
   - Oil: a liquid lighter than water, so it floats on top. It burns fiercely.
   - Lava: a thick, slow, very hot liquid. When it touches water, the lava turns to stone and the water turns to steam. It sets things alight, and cools into stone over time.
   - Water boils into steam above 100 degrees and freezes into ice below 0.
   - Make fire, lava and anything red hot glow: draw a blurred, low-resolution copy of the bright pixels on top using the "lighter" blend mode.
   
   Send me the complete updated file.

4. More materials and a proper toolbar

   Now add the fun extras: explosions, plants that grow, electricity, and a toolbar that makes it all easy to find.

   Copy this promptCopy

   Please add these materials, each with a short tooltip saying what it does:
   - Ice (melts near heat), Snow (falls slowly and drifts), Salt (dissolves in water and melts ice), Acid (eats most things, but not glass or wall).
   - Gunpowder: explodes when hot. An explosion destroys things near the middle and throws loose grains outwards as flying particles that land again, with a bright ring and a little screen shake.
   - Seeds: when they land on sand or soil they grow upwards into a stem with leaves and a flower on top, taller if there's water nearby. Plants also slowly grow into water they touch.
   - Glass (made when sand gets very hot), Metal, and Electricity: a pulse that runs along metal and sets off gunpowder at the end.
   - Cloner: copies the first material that touches it, for ever.
   - Fireworks: when lit they shoot upwards and burst into hundreds of coloured sparks.
   - Heat and Cool brushes.
   
   And a proper toolbar: material buttons grouped into Powders, Liquids, Solids, Fire and power, Living things and Tools, with the selected one highlighted. Brush shapes (round, square, spray, straight line), Pause, Step and Speed buttons, Undo for the last stroke, gravity buttons (down, up, left, right), a wind slider, a night mode that dims everything except glowing things, and a heat view that colours everything by temperature.
   
   Send me the complete updated file.

   Something stopped working? Tell the AI exactly what you did and what happened, for example: "When I pour water on lava, nothing happens. It used to make stone." That's usually all it needs.

5. Scenes and share links

   Ready-made scenes make it instantly fun, and a share link lets friends open exactly what you made.

   Copy this promptCopy

   Please add a row of scene buttons that build a picture instantly, worked out from the grid size so they fit any screen:
   - Volcano: a mountain of rock with lava pouring out of the crater into the sea (use a cloner of lava in the crater), at night, with an "Erupt!" button that throws lava bombs.
   - Rain forest: hills of soil, a pond, trees and seeds, with rain falling.
   - Build a dam: a challenge. A ridge with a village below it. Give me 10 seconds to build, then a storm fills the valley for 15 seconds. If water reaches the houses, I lose. Show a message with a countdown and a Try again button.
   - Hourglass: a glass hourglass full of sand with a "Flip it" button that turns gravity upside down.
   - Fireworks: a fuse along the ground that lights a row of fireworks.
   - Empty.
   
   Then add a "Share link" button: pack the grid into the link itself using run-length encoding, squash it further with the browser's built-in CompressionStream if it has one, and put it after a # in the address. Opening that link rebuilds the sandbox. Copy the link for me. Nothing should be uploaded anywhere.
   
   Send me the complete updated file.

6. Polish it until it shines

   The last step makes it feel finished: phones, keyboard shortcuts, pictures and speed.

   Copy this promptCopy

   Please finish it off:
   - Choose the grid size from the screen width so it runs smoothly on phones, and lay the page out so nothing scrolls sideways on a phone. Put the materials in a strip I can swipe on small screens.
   - Touch: draw with one finger, ignore a second finger, and never scroll the page while drawing.
   - Keyboard shortcuts: number keys for favourite materials, Space to pause, Z to undo, [ and ] for brush size, N for night, H for heat view, and a small panel listing them.
   - A "Save picture" button (downloads my-sandbox.png) and a full screen button.
   - A tick box, "Remember my sandbox on this device", off to start with. Only when it's ticked, save to localStorage.
   - A grain counter in the corner, and stop running when the game is scrolled out of view to save the battery.
   - Keep the simulation running even if my computer has "reduce motion" turned on. It's the whole point of the page.
   
   Send me the complete updated file.

Quick fixes

The game is slow on my laptop. Please make it faster: use typed arrays for everything, write pixels with a Uint32Array view of the ImageData, skip empty cells quickly, work out the glow at a quarter of the resolution, use a smaller grid on small screens, and pause when the tab is hidden or the game is scrolled out of view. Send me the complete fixed file.

Questions people ask

Twist it into something else

Once your sand engine works, you can turn it into all sorts of games:

Made something amazing? Press Share link and send it to us. We feature reader projects.

Simple rules, endless surprises

A falling sand game is one of the best ways to see how computers create worlds. Every grain only knows a handful of rules, yet together they make volcanoes, rivers and forests that nobody drew. Building one teaches you how to break a big idea into small rules, which is the most useful skill there is when you work with AI. And at the end you have a game your family will actually play.

What to build next