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 ⚡️
- Play the game
- View the source code
- Explore the Github repo
- check out SOLITAIRE - my other awesome game!
How to Play Sliders 👉
- 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
- See demo above ⬆
- 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
name:'<img src=x onerror="document.write(`xss`)">',
@rjlevy np this happens to my sites so often, so recently I just increased the security so much that people stopped. Have you tried storing you firebase creds in an environment file (.env)? Also only refer to them in local scope, that helps a lot so they wont be able to get to it from the console
Hi @generationXcode, I really wanted to and tried to implement a .env file but this doesn't seem possible with a front-end project like this. Unless you know of a way? I think it would need to be a node project with a server running and then install the dotenv node package.
How do you suggest I refer to variables in local scope? The score variable needs to be shared by src/Block.js and script.js. Any suggestions are much appreciated.
By the way, the firebase JS files have been obfuscated to help with security
Almost anything is hackable, one wrong line of code by the programmer and your in, even google etc have been hacked several times. My applications probably aren't secure either but its fun to hack lol
Hi @DynamicSquid, yes - they're both for making UIs. React is a library whereas Vue is a framework. React uses JSX to render UI elements whereas Vue renders UI elements directly as HTML. Also, Vue has two-way data binding which is cool. I find Vue more more intuitive and easier to work with. Hope that makes sense
@rjlevy i guess becasue you are a grown up, you don't have any one that sings happy birthday to you so i made this for you! https://repl.it/talk/share/if-today-is-your-birthday-click-on-this/51967
I think it's a great way to learn, and at the end of it you have a portfolio of work you can show people and they will see how good you are.
Hi @python88, for your first job try to choose an established company which will treat you well and offer opportunities for growth. Avoid small startups as they sometimes expect you to do long hours with demanding deadlines. It all depends on the company. I guess you have a few years until you need to apply for jobs. How old are you at the moment?
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;");
@JosephSanthosh That's because the scoring system works backward — i.e, the more tiles you move, the lower your score. It's like playing golf by starting with a score of 10, and on each stroke you subtract one point. The idea is that you only really have the score once you solve the puzzle.
Lol it was me