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

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 ⚡️

Links 🔗

Demo 🏁

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 ⬆

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
You are viewing a single comment. View All
rjlevy (301)

@Vandesm14, not sure if you remember but you previously helped me out with fixing one of my Node.js repls. I've seen your LowChat repl, very cool! https://repl.it/@Vandesm14/LowChat

rjlevy (301)

Hi @Vandesm14, this game is all of a sudden showing this alert

and then the page renders 'xss'

Do you think it has been hacked?

behavingEffort (33)

@rjlevy lol not really hacked (it was me)

behavingEffort (33)

name:'<img src=x onerror="document.write(`xss`)">',

firefish (418)

@rjlevy Welp, it's so easy to do this. because it's not stored under repl.it db, when I fork the repl it's still connecting to the same firebase, so I can inject some push to the database code that says whatever I please

And the scores can be alphanumeric.

generationXcode (256)

@behavingEffort dude, you dont have to break this game... I'm so sick of people doing this.

rjlevy (301)

Hi @generationXcode, thanks I appreciate that

generationXcode (256)

@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

rjlevy (301)

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

generationXcode (256)

@rjlevy oo, I only did this in a node project, so tbh I have no idea how to secure something that is vanilla. I hope you find out and please share it with me too!

rjlevy (301)

HI @generationXcode, well I searched and searched, but couldn't find anything.

Can you explain how it's possible to update variables from the console? In Score.js I've added a getter and setter so the moves property can't be updated directly. Would that help?

behavingEffort (33)

@rjlevy html/css/js projects are pretty much impossible to make secure, if the credientials are shared with score.js it's possible for the hacker to read it

behavingEffort (33)

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