Get Auto

Build a Sliding Puzzle Game With Your Own Image (2026)

Want to turn a favorite photo into a sliding tile puzzle — one built around your image, your difficulty, your people? You can code it yourself, or you can describe it and have Auto build it for you in minutes.

The usual way: coding it yourself

If you searched for a sliding puzzle maker code tutorial or a sliding image puzzle javascript tutorial, here’s the honest shape of it. A basic sliding puzzle game in HTML, CSS, and JavaScript works like this:

  • Split your image into a grid (say 3×3 or 4×4) using CSS background-position on each tile.
  • Store tile positions in an array and leave one slot empty.
  • On tap, check if a tile is adjacent to the empty slot, then swap them.
  • Shuffle by making random valid moves so the puzzle is always solvable.

That’s the core of any sliding puzzle game with a custom image. There are also plenty of guides for how to create a slide puzzle game in Python, and a good beginner tutorial will get you a working demo. But you still end up wiring image uploads, aspect ratios, and touch controls yourself — and the result is generic.

The faster way: build your own in Auto

Auto is camera-first. You describe the game you want, snap or upload a photo, and Auto builds you a personal mini-app — a Frame — around it. No code, no app store, no settling for a puzzle that doesn’t fit your photo.

The point is ownership: your image, your grid size, your rules. If you want a 5×5 puzzle of a group photo from last weekend, you just say so.

How someone built theirs

A real Auto user built a photo tile game this way — here’s the gist of what they typed, in order:

  1. They asked for a photo tile game from images they send, with a selectable grid from 3×3 up to 5×5 — more tiles, more difficulty.
  2. They told Auto not to force a square aspect ratio, so the tiles matched the real photo instead of cropping it.
  3. They added tap-and-hold to drag tiles into place with a slide/swipe gesture.
  4. They asked for an upload indicator while sending a photo.
  5. They made sure every shuffle is solvable — no impossible boards.
  6. Then came polish: scaling the puzzle area so it fits without scrolling, adding top padding so the timer and move counter cleared the nav bar, making the play button bigger, and stopping the difficulty cells from jumping on tap.
  7. Finally, “make it more fun visually” — then walking that back a little by removing a shimmer effect they didn’t like.

That back-and-forth is the whole experience: you shape it until it’s exactly yours. Frames like Photo Puzzle show people are already building these.

FAQ

Do I need to know JavaScript? No. Coding is one path; in Auto you describe what you want in plain language and it builds the working game.

Can I use any photo? Yes — the puzzle is built around the image you send, and you can keep the photo’s real proportions instead of cropping to a square.

How hard can I make it? As hard as you like. A common setup is choosing anywhere from a 3×3 grid up to 5×5 — more tiles means a tougher puzzle.

How long does it take? Minutes. Most of the time goes into small tweaks to get it feeling right.