I Built a Digital Fifteen Puzzle~

Why I Spent My Weekend on This

Remember sliding those plastic tiles around as a kid? The satisfying click when a piece fell into place? Well, I got nostalgic and decided to rebuild the Fifteen Puzzle for the web. What started as a "quick afternoon project" turned into a deep dive that consumed my entire weekend (and maybe a few more).

You can check out what I built at 15puzzle.games.iamickdev.com - but let me tell you the story behind it first.

What's This Puzzle All About?

If you've never encountered the Fifteen Puzzle (lucky you, you're about to lose hours of your life), here's the deal: you've got 15 numbered tiles in a 4x4 grid with one empty space. The goal? Get all the numbers in order from 1 to 15.

Sounds easy, right?

Hah.

You can only slide tiles into the empty space, which means you're constantly moving pieces out of the way to get other pieces where they need to go. It's like trying to organize your messy room when you can only move one thing at a time and you have nowhere to put anything temporarily.

The Tech Stack (Because You Asked)

I went with SvelteKit because, honestly, I wanted an excuse to use it more. Plus, it handles state management beautifully, which is crucial when you're tracking tile positions and animations.

For the backend, I chose Supabase. I know, I know - it might seem overkill for a puzzle game, but I had bigger plans brewing (spoiler alert: leaderboards and save states).

The Development Rabbit Hole

Starting Simple (Famous Last Words)

My initial plan was straightforward: create a grid, make tiles clickable, animate movements. Should take a few hours, max.

Three days later, I'm debugging edge cases like "what happens when someone clicks really fast" and "why does the animation break when you resize the window mid-game?"

The Animation Struggle

Getting smooth tile animations was harder than I expected. CSS transitions are great until you need to animate multiple tiles moving in sequence, then suddenly you're dealing with timing functions and transform origins like you're choreographing a dance.

I probably rewrote the animation logic four times before settling on something that didn't make my laptop fans spin up like a jet engine.

The "Unsolvable" Problem

Here's something fun I learned: not every scrambled Fifteen Puzzle is actually solvable. There's this whole mathematical thing about "inversion parity" that determines whether a configuration can be solved.

I spent an embarrassing amount of time wondering why my random shuffle sometimes created impossible puzzles before discovering this. Now I generate solvable puzzles by starting from the solved state and making random valid moves backwards. Much smarter, right?

Features That Made Me Proud

The UI That Doesn't Suck

I'm not a designer, but I tried to make something that doesn't hurt to look at. Clean, minimal, responsive - the usual web dev buzzwords. The tiles have this subtle shadow and smooth hover effect that makes them feel... tactile? Is that the right word for digital tiles?

Supabase Integration (The Fun Part)

This is where I got carried away. What started as "maybe I'll save high scores" became:

• Progress saving - Start a puzzle on your phone, finish it on your laptop
• Global leaderboards - Because competitive puzzle solving is apparently a thing I enjoy
• Personal stats - Track your improvement over time (or watch yourself get worse, like me)

The Supabase integration was surprisingly smooth. Real-time subscriptions for the leaderboard updates, user authentication, data persistence - it all just worked. Sometimes I love modern web development.

What I Learned About Myself

Building this reminded me why I love coding in the first place. There's something satisfying about taking a physical thing you remember from childhood and bringing it into the digital world.

Also, I discovered I'm terrible at my own puzzle game. I can build the perfect sliding mechanism, but ask me to solve it in under 100 moves? Not happening.

The Unexpected Addiction

I built this thing, and now I can't stop playing it. It's become my go-to "just five minutes" activity that somehow turns into an hour of trying to beat my previous best time.

My girlfriend walks by and sees me clicking tiles furiously, and I have to explain that yes, I'm "working" on my "project." She's not buying it anymore.

What's Next?

I've got a list of features longer than my actual code:

• Daily challenges - Same puzzle for everyone, see who solves it fastest
• Different grid sizes - Because 4x4 isn't frustrating enough
• Multiplayer races - Real-time head-to-head puzzle solving
• Custom themes - Because apparently I want to become a game studio

Will I actually build all this? Probably not. Will I keep tinkering with it when I should be doing actual work? Absolutely.

The Real Motivation

Truth is, building this wasn't really about the Fifteen Puzzle. It was about that feeling you get when you take something from your imagination and make it real. When someone visits your website and spends 20 minutes playing a game you built from scratch.

It's about proving to yourself that you can still build things just for the joy of building them.

Try It Yourself

Go play it at 15puzzle.games.iamickdev.com. See if you can beat my embarrassingly high move count. Or better yet, build your own version - there's something magical about recreating the toys from your childhood with the tools of today.

Just don't blame me when you're still sliding tiles at 2 AM, convinced you're "almost done" with this puzzle.

---

Now if you'll excuse me, I have a puzzle to solve. Again.