Hello everyone. If you're interested, please take a look at this sliding puzzle game. It's based on a template from @Photics (a huge thank you for that!!!). I'd be interested to know if anyone else has encountered issues with the game setup: after shuffling, one field should stay empty (i.e., blue). For one of my colleagues, this usually works but sometimes it doesn't—she sometimes sees three blue fields (she´s on a Windows machine..). How does it look on your end? I myself can't reproduce the error.
The game should also work on mobile phones and tablets.
For those who want to solve the game, here’s a helpful link, without which I probably wouldn’t have managed either...
Hallo lieber Kalle @ktewes
Great implementation of a Slide Puzzle ! We played it on an Android tablet and didn't encounter any errors you mentioned. Attached is my screenshot with the completed game. One comment though: Usually, when the game is completed, the last 16th empty square is filled automatically so the player knows the puzzle is solved. I guess it will be easy for you to add. Congrats!
Great, now I am getting the HURRA-scene upon completion. One question: is it possible for you @ktewes to reveal how did you do the numbering on and off -trick (Nummerierung an/aus)? Thanks.
It’s actually quite simple: each puzzle piece (symbol) contains an element (.tileNum) with the puzzle piece’s number, which is pulled from an HTML attribute attached to the symbol. Toggling the display on and off—just check the comments for details. If you have anymore questions, just ask!
No error messages. However, I think I found the issue: the error only occurs on a few specific devices. I tested it on about 10 devices—on one of them (iPhone 12 Pro), the error appeared, which helped me narrow it down. It seems to be related to the speed of the shuffling process. I reduced the time slightly, and—at least on this device—everything ran smoothly. I updated the link.
When this template was first created, the iPhone 12 Pro wasn't even released yet. So, maybe it's too fast? I'm not sure, but “sliding” was rewritten for the “Widgets” app. It looks like I dropped the delay and switched to using requestAnimationFrame.
There are some other changes too. It looks like I added ParseInt, probably to make sure that the square locks into place. It's fun when I go back and look at my code and then wonder, “What alien technology is this?”
I'm not sure if it matters, but is “Position with CSS left/top” checked or unchecked in your Hype project? I tried it with both, but I couldn't recreate the problem.
I thought about pasting the newer code here, but I'd probably rewrite it again.
I am considering creating “A Book About Making Web Games”. I've been waiting to see what's going on with Hype 5. But if nothing happens before the end of the year, I might just go without it.
I made a few changes/additions to your script: With sliding puzzles, it seems that not every configuration after shuffling leads to a solvable setting (there are certain mathematical prerequisites for this…). The script now checks after shuffling if the puzzle is solvable or not. If it isn’t, it re-shuffles briefly (5 rounds). This process repeats until a solvable configuration is achieved (thanks, ChatGPT...). I played through it dozens of times, and indeed, it was always solvable…
The shuffle should only be making valid moves, which is what makes the game solvable. The movement is based on the open space and the pieces next to the open space.
Basically, it's supposed to be scrambling the game like a humans would do in the 1880s.
Both of the issues you mention seem to be a timing problem. I think that's why the newer version uses parseInt, because 64px is not the same as 64.00000000002px. That would have been something to check in project before. When seeing more than one empty space, see if that element has integers as values.
