Share your repls and programming experiences

← Back to all posts
🔥 [GAME] Play this Awesome Sliders Game!! 🔥
rjlevy (395)

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
Commentshotnewtop
rjlevy (395)

@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 (395)

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?

[deleted]

@rjlevy lol not really hacked (it was me)

[deleted]

firebase.database().ref().push({
id:69,
name:'<img src=x onerror="document.write(`xss`)">',
score:10000,
});

firefish (507)

@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 (262)

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

rjlevy (395)

Hi @generationXcode, thanks I appreciate that

generationXcode (262)

@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 (395)

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 (262)

@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 (395)

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?

[deleted]

@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

[deleted]

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

MatthewX (143)

This game is really good!

rjlevy (395)

Hi @MatthewX, thanks! glad you like it 🙌

DynamicSquid (3539)

If I'm correct, you're not using any js libraries right?

rjlevy (395)

Hi @DynamicSquid, yes that's correct - no JS libraries at all, just Vanilla JS

DynamicSquid (3539)

@rjlevy Cool! You don't see a lot of people making stuff with vanilla js. I could never do that, I have to use a library like p5.js or something

rjlevy (395)

Thanks @DynamicSquid, I've used React and Vue in the past but recently chosen Vanilla JS to help me improve my understanding of JavaScript

rjlevy (395)

@DynamicSquid I've seen your repls made with p5.js and they're really good 👍

DynamicSquid (3539)

@rjlevy oh cool! what's the difference between react and vue? they're both for making UIs right?

rjlevy (395)

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

ironblockhd (369)

Opposite for me, tried to start with react and vue and failed twice

firefish (507)

@DynamicSquid Well I see that squids are full-stack devs...

rjlevy (395)

HI @ironblockhd, well I think your projects look great without react and vue 👍

rjlevy (395)

Hi @potatojs, thanks! I like the Flappy Bird game you made with JS 👍

HiPeople844 (19)

mY bRaIn
iS nOt
CapAbLe
oF
ThIs

rjlevy (395)

Hi @HiPeople844, try the 2x2 level first

HiPeople844 (19)

@rjlevy yeah i did but once i get to 4x4 mY bRaIn DiEs

rjlevy (395)

@HiPeople844 haha, yes! I know the feeling...!

python88 (157)

since you are a grown up, i guess nobody says happy birthday so i made this for u: https://repl.it/talk/share/if-today-is-your-birthday-click-on-this/51967

python88 (157)

how many months did you spend on this?

rjlevy (395)

Hi @python88, I started this about 12 days ago. Still making small improvements on it.

python88 (157)

@rjlevy oh! i just looked inside too see the code and my mind is blown...

python88 (157)

@rjlevy i am making i mine craft game.can you give me any suggestions? thx! https://repl.it/@python88/minecraft

python88 (157)

@rjlevy at this game, i always get stuck ewhen there are only two left. :9

rjlevy (395)

Hi @python88, I think you've made a great start - well one. If you keep going and keep improving I'm sure it will end up being a good game. Have you thought of using a UI for the game?

rjlevy (395)

Hi @python88, can you let me know which level you get stuck on? Can you send me a screenshot of when you get stuck?

python88 (157)

@rjlevy the 4x4. i will send a photo

python88 (157)

@rjlevy the 2x2 is easy. only one move

rjlevy (395)

Hi @python88, thank you. I fixed this issue recently. CN you clear your browser cache, refresh you browser and try again?

rjlevy (395)

@python88 yeah true. It's good to have an easy level that everyone can do 🙂

python88 (157)

@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

python88 (157)

@rjlevy oh i meant another pic

rjlevy (395)

Hi @python88, thanks for the birthday wishes! My birthday is in 10 days time 👍

rjlevy (395)

@python88 which pic do you mean?

python88 (157)

@rjlevy i uploaded the wrong one. i will try again

python88 (157)

@rjlevy nvrmnd. i figured it out!

python88 (157)

@rjlevy do you work for a company or are you an entrepreneur

rjlevy (395)

Hi @python88, I work for a company based in London. I started there as a junior developer 18 months ago.

rjlevy (395)

@python88 how about you? Do you want to work as a software developer?

python88 (157)

@rjlevy i want to be a entrepreneur and give free coding classes to poor kids that want to learn coding.

python88 (157)

@rjlevy First i want to wok at google

python88 (157)

@rjlevy Next, i want to start a company like bill gates.

rjlevy (395)

@python88 that would be great if you can - it's very competitive. As a junior the first job may be with a smaller company but if you are very talented it's possible

rjlevy (395)

@python88 that is a very noble and meaningful goal. I really hope you can do that! 🙏

rjlevy (395)

@python88 good luck - I really hope you can achieve those goals!

python88 (157)

@rjlevy in high school, is there a way to increase your chance of getting a phd and going to google?

python88 (157)

@rjlevy i recommended this to my class and they loved it. they dont know anything about coding though.

rjlevy (395)

@python88 I think the way to develop your coding skills is to make small side projects. Here is a good tutorial which you can follow: https://www.youtube.com/watch?v=c5SIG7Ie0dM

It goes through various JavaScript projects, starting with a basic one. They all look quite fun. I did the first one and improved the code, here: https://repl.it/@rjlevy/js-random-background-colour

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.

There are also other ways to learn, for example, I did a 3-month JavaScript bootcamp in London 2 years ago. It was amazing!

rjlevy (395)

@python88 that's really great - thank you! 😀

python88 (157)

@rjlevy i'm tenth place in the game!

python88 (157)

@rjlevy look at the 299 points area, i played 2x2 like 50 times

rjlevy (395)

Hey @python88, well done, 440 is a really good score. It's fantastic to see people playing the game, and yes there are lots of people scoring 299!

rjlevy (395)

@python88 haha! that's cool 😀

python88 (157)

@rjlevy i did 4x4 to get that score!

rjlevy (395)

@python88 4x4 is difficult and takes a while. 3x3 is so much easier but the max score isn't high enough to beat the highest score.

python88 (157)

@rjlevy i like your restaurant game where you order food. i'm number 4. :)

rjlevy (395)

@python88 wow! that's really good!!! well done 💪

python88 (157)

@rjlevy After collage, if i can't go to google, what places to you recommend?

python88 (157)

@rjlevy i watched some youtube videos about html and i now have a html project! https://repl.it/@python88/html-test

python88 (157)

@rjlevy can i do an interview on you? question #1 what is your favorite ice cream?

rjlevy (395)

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?

rjlevy (395)

@python88 that's an easy one... vanilla JavaScript! 🤣

python88 (157)

@rjlevy i can't say my age, but i'm in elementory school

python88 (157)

@rjlevy question #2: what inspired you to start coding?

rjlevy (395)

@python88 that's a good question. I love maths and solving problems. There is something very satisfying in working through a problem and learning something new in the process. I guess the creative process of coding is what gives a lot of people a sense of satisfaction. What about you?

python88 (157)

@rjlevy on a tedtalks thing, a guy showed what he did. (he made a movie about star wars cats) and he showed us how he got to succeed

python88 (157)

@rjlevy i started useing scratch, and then my mom's friend recomended using a python class.

python88 (157)

@rjlevy my school just ended.

python88 (157)

@rjlevy question #3: WHY DOES THIS PROJECTS NOT HAVE 100000 UPVOTES? ()_() ?

rjlevy (395)

@python88 that's so cool. I'd love to see that Ted-talk. Do you have a link?

python88 (157)

@rjlevy i watched it like 2 years ago, but ill try to find it.

rjlevy (395)

@python88 that's interesting, I've never heard of Scratch. What is it? I think learning Python is a great idea. It's very popular and in demand

rjlevy (395)

@python88 thanks! I don't know. There are some amazing programmers on repl.it that have done some far more complex and impressive programs

python88 (157)

@rjlevy it's not really a programing language.

python88 (157)

@rjlevy https://scratch.mit.edu/ on scratch there are lots of animations, games, and more!

python88 (157)

@rjlevy Latley, people are destroying scratch by advreitsing, bullying, and false reporting.

python88 (157)

@rjlevy people on scratch want fame so much that they are making scratch not fun. :(

python88 (157)

@rjlevy Question #4 which camp do you recommend for beginners (like me)

rjlevy (395)

@python88 scratch looks good. Unfortunately this is now quite normal. The best thing we can do is try to stay positive and confident in what we are trying to acheive

rjlevy (395)

@python88 the question is, why do people want fame and what does it achieve. Much better to put our energy into helping others

python88 (157)

@rjlevy Question #5: at what age did you start coding, and what Programming language do you recommend that can make great projects, but isn't too hard to learn?

rjlevy (395)

Hi @python88, my first small experience of programming was when I was about 15. I then had a long break until I started learning HTML, CSS and JavaScript. I think JavaScript is a good language to learn if you want to make great projects.

python88 (157)

@rjlevy in school, where can i do some volunteer work that involves with computers?

python88 (157)

@rjlevy also, can you join my team, i will invite you.

python88 (157)

@rjlevy can u answer my previous questions?

rjlevy (395)

@python88 I don't know really, I suggest asking your computer science teacher if you have one. I think volunteering is a great thing to do :)

rjlevy (395)

@python88 thanks - I just joined :)

python88 (157)

@rjlevy i don't have a computor sci teacher

rjlevy (395)

@python88 OK, is there a coding club or a meetup you can join online? I don't know about volunteering really

python88 (157)

@rjlevy oh. well question #4 when did you start coding?

rjlevy (395)

@python88 ah, I think I already answered that question 👆 look, about 5 hours ago...

python88 (157)

@rjlevy Question#6 do you play minecraft! ahem do you play any intruments?

rjlevy (395)

@python88 haha! yes, I play the guitar 🎸 what about you?

python88 (157)

@rjlevy i played the piano for 6 year, and the violin for 1 year

python88 (157)

@rjlevy which of your projects are you most proud of?

rjlevy (395)

@python88 Ah, that’s really good that you know how to play an instrument. Do you still play?

Check out this amazing JS piano made with a minimal amount of code: https://js1024.fun/demos/2020/16

He won this competition: https://js1024.fun/results/2020#16

rjlevy (395)

@python88 I'm most proud of the website I built as a volunteer for this charity that teaches meditation. I still maintain it and I'm working on it now: https://www.meditateinlondon.org ☺️

rjlevy (395)

Hi @python88, I just made this simple CSS playground for us to experiment with. It shows how easily you can animate shapes using CSS and one JavaScript function in script.js. Take a look: https://repl.it/@coderstogether/css-playground

python88 (157)

@rjlevy can you post another good game that will get trending so it will be easier to talk to u?

rjlevy (395)

@python88 it's funny you should say that, I was thinking the same thing! That's a great idea. What kind of game would you like to see?

rjlevy (395)

Hey @python88, I just started working on this game today and will let you know how I get on. It's called 33 Peg Solitaire. Have you heard of it? It looks like this: https://youtu.be/XLmE12fHifc

python88 (157)

@rjlevy my game has been locked. :( idk why

rjlevy (395)

@python88 which game do you mean?

python88 (157)

@rjlevy it's called "idk" it's a post. (html)

python88 (157)

@rjlevy the post is literally called id k(lolok on my profile) go to posts and there is mine.

fuzzyastrocat (558)

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 (395)

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 (558)

@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 (395)

@fuzzyastrocat that bug is fixed now 👍

fuzzyastrocat (558)

@rjlevy Awesome! Keep up the great work!

rjlevy (395)

@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 (558)

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

rjlevy (395)

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

ZDev1 (614)

@Wilke000 WILKE!
Bro!
How are you?

Wilke000 (485)

Awesome @ZDev1, how are you bro?

python88 (157)

cool game! you must have spent a lot of effort!

rjlevy (395)

Hi @python88, thank you - it took me about 7 days in my spare time. Glad you like it 😀

python88 (157)

@rjlevy i know! it's really good!

python88 (157)

@rjlevy are you a grown-up or a kid?

rjlevy (395)

Hi @python88, I'm a grown-up and work as a Software Developer. How about you?

python88 (157)

@rjlevy i'm a elementary kid. i hope to learn a lot of programming languages

rjlevy (395)

@python88, that's great. Programming is a lot of fun and is a great option as a career - it's well paid and the Dev community is generous and supportive. If you stick with JavaScript and Python you'll go a long way! Where are you learning from?

python88 (157)

@rjlevy classes on zoom from all over the country. i also read books.

rjlevy (395)

@python88 are the zoom classes organised by your school? I highly recommend freecodecamp.org and Traversy Media on youtube

rjlevy (395)

@python88 how do you access the zoom classes and who creates them?

python88 (157)

@rjlevy ok i will try to go there

python88 (157)

@rjlevy i take private classes with collage people who are experienced

python88 (157)

@rjlevy my break is over. i need to go to school now. bye! thx :)

rjlevy (395)

@python88 no problem - enjoy school!

Bookie0 (3904)

great game (im too dumb for it tho) and i like the colors ;)

rjlevy (395)

Hey @nahu, there's the 2 x 2 level which is the easiest 😉

fuzzyastrocat (558)

@rjlevy tfw you can't solve the 2x2 level

fuzzyastrocat (558)

@firefish Well now it is, since the bug of unsolvable puzzles was fixed :D

I spent 5 minutes in dismay that I couldn't solve the insanely easy puzzle, until I realized mine couldn't be solved.

firefish (507)

@fuzzyastrocat 5 minutes, WOW, you must've been determined

nahu (26)

@firefish Why did you see my score

fuzzyastrocat (558)

@firefish I'm the most determined puzzle solver ever. You know, one time I spent 30 seconds trying to solve a rubik's cube, so I know it's unsolvable.

studentAlfredAl (431)

Very impressive! Keep up the great work :)) 👍

JosephSanthosh (1179)

I got this score without even touching a single tile!

fuzzyastrocat (558)

@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.

JosephSanthosh (1179)

WTH!!!! I've been doing the opposite the whole time!!!

@fuzzyastrocat

fuzzyastrocat (558)

@JosephSanthosh Okay, maybe my golf reference was confusing— you do want a high score. It's just that your score doesn't count until you complete the whole game.

fuzzyastrocat (558)

Cool! The CSS here is very nice — good job!

rjlevy (395)

Hi @MarcusWeinberger, do you know what the xss is?

MarcusWeinberger (574)

@rjlevy no, i cant see as the website gets overwritten. seems to be in the leaderboard though under username

rjlevy (395)

Thanks @MarcusWeinberger, someone was trying to hack the username input. Should be working now

[deleted]

Lol it was me

rjlevy (395)

Hey @ZDev1, thanks for your positive feedback on Discord! 🤲

code913 (4)

This guy: I made a game
Everyone: Wow that's so cool!
Me: staring at the leaderboard looking at people trying to do XSS

RahulChoubey1 (18)

Is there a guarantee that the randomization cannot lead to an impossible puzzle?

rjlevy (395)

Hi @RahulChoubey1, in theory each puzzle is solvable because the starting point of each game is the completed puzzle. Each move of the randomization at the start of the game is a valid move so each puzzle should be solvable.

fuzzyastrocat (558)

Challenge to everyone: is a non-trivial 2x2 variant possible?

JafethMaldonado (0)

esta bien chafa ni me deja entrar xd

rjlevy (395)

Hi @JafethMaldonado, I don't know what chafa is, but thank you

JosephSanthosh (1179)

I got this score without even knowing how to play!

firefish (507)

@JosephSanthosh Well, you have to move the tiles into a 1-2-3-4-5-6-7-8-9-etc-the last number in the grid formation. If you're still unsure, this game is also known as the 15-puzzle (traditionally played in 4x4 mode) so that may help you in your hunt through google to find rules.

AustinZhang1 (52)

Sometimes the board is like this:


is that even possible to solve?
If not please fix

fuzzyastrocat (558)

@AustinZhang1 @rjlevy I have had this issue too... is it solvable? If not maybe have the random-placement be not 100% random and instead have the computer make a random number of random (but valid) moves.

firefish (507)

@AustinZhang1 youch. I got the same thing too, I seldom get a solvable one lol, the last two just always bite me

rjlevy (395)

Hi @AustinZhang1, thanks for pointing it out. I will try to fix this issue.

[deleted]

@AustinZhang1 i think it's solvable since you can move the green ones

Edit: i was wrong, sorry

fuzzyastrocat (558)

@behavingEffort I actually don't think it's possible, see here. But I could be wrong, the situation is slightly different there.

[deleted]

@fuzzyastrocat oh ok, sorry

rjlevy (395)

Hi @AustinZhang1, I have fixed this bug by starting each game from the solution and then randomizing the blocks at the beginning of each game. I hope that makes sense. You can test it out - it works fine now 👍

rjlevy (395)

Hi @fuzzyastrocat, I have fixed this bug by starting each game from the solution and then randomizing the blocks at the beginning of each game. I hope that makes sense. You can test it out - it works fine now 👍

fuzzyastrocat (558)

@rjlevy Great, that's what I was thinking of doing — Glad it works!

rjlevy (395)

@fuzzyastrocat thanks! I'm off to bed now...😴

fuzzyastrocat (558)

@rjlevy Neat! I've always liked solitaire, nicely done!

rjlevy (395)

Hey @fuzzyastrocat, thanks so much! 😁