I had nothing to do, I decided to test my skills and tried to create a 15 puzzle game for the browser using only JavaScript and CSS. During development, I did not read how this could be implemented, and did not use the Internet. In the end, everything went smoothly, as it seemed to me, but I often noticed that the last two puzzle squares could not be placed in the right places. At first it seemed to me that something was wrong with me, but the situation where the puzzle could not be completed was stable, and I began to figure out what went wrong.
After reading several articles on the mathematical analysis of this game, I learned that exactly half of all possible combinations of the initial position of the squares (20.922.789.888.000 (= 16!)) Will lead to the impossibility of solving the puzzle. Elsewhere I found out that this problem occurs if swap squares 14 and 15.
In such a situation, in my game, I used mixing squares, just replacing the random block with another random block, it was a very wrong decision. So I decided to replace this part of the game with a natural shuffle, the program just randomly shifted an empty block vertically or horizontally by one square. This option eliminated combinations of blocks that would get in the way of solving the puzzle.
About ten years ago I was making a similar game for Android, but then I did not face this problem, because the terms of reference said: "the movement of the squares when mixing should be visible." And then I remembered about one more item of the same task "The ability to move several blocks towards an empty cell." Oddly enough, when I tackled the previous problem, almost all versions of this game that I have seen did not use this feature. Then I decided to add the ability to move several blocks to my game, and the game became more interesting, the puzzle began to be assembled faster and new tactical possibilities appeared, but, most importantly, it became easier to collect large puzzles with 100 chips or more.
This is how a simple game became an interesting experience for me with new discoveries, despite the fact that I had done it before, with the only difference that at first I did the game on a task, and now for the sake of testing my skills.
But I didn't stop there and made an editor for this game "Fifteen Sliding Puzzle maker". You just need to add your own image and the editor will automatically split it into proportional blocks and adapt the CSS style. You can export the result to an HTML file for integration into your project, or simply use FrameWork "fifteen_puzzle.js", which can be easily modified to suit your needs.
Editor | Demo | itch.io | GitHub
Top comments (6)
Nice article, thanks.
Love solving puzzles, especially doing that online. Unfortunately, you can't order a lot of puzzles because the best of them are usually pretty expensive. And I don't wanna pay for shipping all the time, so solving them online can be a fun time to spend. Anyway, my friend found the jigsaw puzzles australia at journeyofsomething.com/products/10... that attracted my attention a lot. I've never solved 1000 pieces puzzle before, so that might be a challenge for me. The price is pretty reasonable for that one, so I hope I'm gonna get it soon.
Wow! This is amazing
This was an interesting read...
That cover image though! :O
does she confuse you?
🤔
This is a really cool project! Thanks for sharing.