Show HN: I made a sliding puzzle game (opens in new tab)

(tileslide.com)

3 pointsmpetrovich3y ago3 comments

Inspired by another recent puzzle game [1] and bored at home while sick with the stomach flu, I decided to create a mobile-friendly version of the sliding-tile puzzle game that I once played as a kid.

How to play:

1. Tap a square to move it to the empty square.

2. Repeat until you've unscrambled the image.

Options:

- Allow swapping: Any image square can be moved to the empty square. (Easier)

- Only sliding: Only image squares that are directly adjacent to the empty square can be moved. (Harder)

Created in a day with React and the Unsplash random image API. Of course, that Unsplash API happens to be returning 503s at the moment of this submission, so I've manually added about 20 images for now.

It was a fun toy project, but I'd love to hear any feedback or suggestions. It's open source on GitHub [2] if you'd like to read and critique my shitty JS :P

[1] https://news.ycombinator.com/item?id=33718124

[2] https://github.com/mpetrovich/tileslide

3 comments

amadeuspagel3y ago

Nice. Have you thought about adding arrow keys?

mpetrovichOP3y ago

I hadn’t considered it since it’s mobile-first, but that’s a great idea to try!

I imagine that the arrow keys would control the movement of the empty space, right?

amadeuspagel3y ago

> I imagine that the arrow keys would control the movement of the empty space, right?

That's an interesting idea, and probably better then what I had imagined—that the arrow keys controls in what direction the tile that goes into the empty space moves. (The very fact that it's kind of hard to explain shows that your idea is probably better.)

j / k navigate · click thread line to collapse

Show HN: I made a sliding puzzle game (opens in new tab)

(tileslide.com)

3 pointsmpetrovich3y ago3 comments

How to play:

1. Tap a square to move it to the empty square.

2. Repeat until you've unscrambled the image.

Options:

- Allow swapping: Any image square can be moved to the empty square. (Easier)

- Only sliding: Only image squares that are directly adjacent to the empty square can be moved. (Harder)

It was a fun toy project, but I'd love to hear any feedback or suggestions. It's open source on GitHub [2] if you'd like to read and critique my shitty JS :P

[1] https://news.ycombinator.com/item?id=33718124

[2] https://github.com/mpetrovich/tileslide

3 comments

amadeuspagel3y ago

Nice. Have you thought about adding arrow keys?

mpetrovichOP3y ago

I hadn’t considered it since it’s mobile-first, but that’s a great idea to try!

I imagine that the arrow keys would control the movement of the empty space, right?

amadeuspagel3y ago

> I imagine that the arrow keys would control the movement of the empty space, right?

j / k navigate · click thread line to collapse