🔥 [GAME] Play this Awesome Sliders Game!! 🔥
rjlevy (280)

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 👈

Features 💡

  • Mobile friendly
  • Includes Help section
  • Initializing sequence to randomize game
  • Made purely with Vanilla JavaScript and CSS; no front-end frameworks or libraries like React, Vue etc...
  • 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

Instructions 🛠

  • 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

Links 🔗

Demo 🏁

You are viewing a single comment. View All
fuzzyastrocat (235)

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.

rjlevy (280)

Hi @fuzzyastrocat, thanks for pointing that out. The only characters allowed in the Name input field are letters a-z, numbers 0-9, spaces and the @ symbol. I'll take a look at this bug...

fuzzyastrocat (235)

@rjlevy Ah, I think I found it — your regex is /[a-z0-9] @ /, which includes the space character. But I think somewhere else (or maybe in firebase) doesn't allow the spaces.

rjlevy (280)

@fuzzyastrocat that bug is fixed now 👍

fuzzyastrocat (235)

@rjlevy Awesome! Keep up the great work!

rjlevy (280)

@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, "&lt;").replace(/>/g, "gt;");

fuzzyastrocat (235)

@rjlevy Ah, ok. Nice catch, I probably wouldn't have found that so quick!

rjlevy (280)

@fuzzyastrocat yeah, makes sense - it's so much harder understanding someone else's code