Hey everyone! This Sliders brain-teaser game took me a week to code from scratch using only vanilla JS and CSS. It's really simple and fun to play - just read the instructions below. I challenge you to beat the highest score from the Leader Board! 😄
👉 Sliders 👈
- Mobile friendly
- Includes Help section
- Initializing sequence to randomize game
- Leader board scores saved on the back-end with Google Firebase
- Many thanks to @yevbar (Yev Barkalov) for this Firebase tutorial and to @Jp2323 (Jorge P) for this Firebase repl
- Choose the game size: 3x3, 4x4 etc...
- Slide pieces into the empty space from above, below or the side
- Position numbers in the correct order in the fewest possible moves
- Each move reduces the total score by 1
- Pieces turn green when in the correct position
- When all the pieces are correct you can add your score to the Leader Board
- Play the game
- View the source code
- Explore the Github repo
- check out SOLITAIRE - my other awesome game!
I seem to have found a bug — if you enter a name with spaces, it doesn't say "invalid", but the score doesn't get recorded.
@fuzzyastrocat the bug was happening because strings are escaped before being stored in Firebase and weren't being unescaped when being loaded into the Leader Board from Firebase. Usernames use %20 for any spaces included and the % symbol was being recognized as an invalid entry. I hope that makes sense. So the fix is this:
const nameStr = unescape(item.name).replace(/</g, "<").replace(/>/g, "gt;");