Share your repls and programming experiences

← Back to all posts
🚀 [GAME] Play SOLITAIRE!!! another awesome game! 🚀
RolandJLevy (497)

This game is so addictive - it tests your speed, logic and skill - it’s a race against time….

I built this from scratch in 10 days using vanilla JS and CSS. It's really fun to play. Below is a demo and instructions. See if you can finish with just one marble remaining in the centre of the board - there is a 1,000 point bonus if you can do it! 😄

⚡ Solitaire ⚡

Links 🔗

Demo 🏁

How to Play 👉

  • Aim of the game
    Take away as many marbles as possible in the 100 seconds countdown.
  • How to take away marbles
    Select a marble by clicking on it so it turns blue, then place it over an adjacent marble into an empty space. The marble you move over will be taken. To deselect a marble, click on it again so it turns from blue to gold. See the demo above ⬆
  • Scoring
    Each marble removed updates the score by the total marbles taken multiplied by the total seconds remaining. Eg, 20 marbles taken in 40 seconds scores 800. Finish the game at any time to submit your score to the Leader Board.
  • Bonus points
    If you finish with just one marble remaining, which is 'Solitaire', you get a bonus 500 points, and if your last marble finishes in the centre of the board the bonus is 1,000 points!

Features 💡

  • Built from scratch with Vanilla JavaScript and CSS; no front-end frameworks or libraries like React, Vue etc...
  • Completely responsive and mobile friendly
  • Includes Help section and Leader board
  • Scores are saved on the back-end with Google Firebase
Commentshotnewtop
rapidplane (15)

Nice fun game, voted up.

JosephSanthosh (1192)

I have to mention this thing is really making me hungry after yesterday's earthquake.

potatojs (804)

hungry.?.
you mean.. angry?
@JosephSanthosh

potatojs (804)

lmao
wait what is he talking about?
@rjlevy

RolandJLevy (497)

@potatojs haha! autocomplete error?

potatojs (804)

@rjlevy he literally said

because of yesterdays earthquick this game make hungry

what's the relation between your game and earth quicks?

RolandJLevy (497)

@potatojs if each marble weighed 10,000 tonnes maybe there would be some kind of relationship between my game and earthquakes but they're just made of pixels! :D

JosephSanthosh (1192)

@potatojs @rjlevy Why did I never get these notifications? Well what I meant is that the stress from the earthquake I felt had caused me to be hungry. Looking at the yellow balls in this game made me hungry. Do you get the connections?

RolandJLevy (497)

@JosephSanthosh oh, I see the connection now. Do the yellow balls remind you of a particular food? Cheese balls maybe?

JosephSanthosh (1192)

all the other kids got the pumped up kicks... @rjlevy

RolandJLevy (497)

@JosephSanthosh thanks! but what do you mean by 'pumped up kicks'? I'm from the UK so not sure what that means :D

JosephSanthosh (1192)

Oh its a song which WAS rly popular, im not sure what it means, but i think it means all the other kids are cooler. not too sure. @rjlevy

RolandJLevy (497)

Hi @JosephSanthosh ah, OK - thanks for explaining! :D

Spitfier720 (19)

There's even sound? I N V E S T

All jokes aside, could you update the code so that when there's no move to make, then to immediately stop?

RolandJLevy (497)

@Spitfier720 thanks for your feedback. Yes that's a good idea, I agree. This is a feature I would like to have. I tried but the logic was quite complex.

Spitfier720 (19)

@rjlevy you could try going through each of the pieces and seeing if they can make a move, and if none of them can, then exit

RolandJLevy (497)

Hi @Spitfier720, yes that's the solution. I tried to write the code for it a few weeks ago but it was difficult. I might try again. Do you think it would improve the game?

Spitfier720 (19)

@rjlevy i think that would greatly improve the game, since it would stop the game immediately, and since your score is based on time, it would present a more accurate kind of score

you could also make some sort of penalty or something if there are no moves available and more than one marble left

RolandJLevy (497)

@Spitfier720 thanks, yes - I agree it would improve the game. In terms of penalty, with the countdown timer there is already a penalty with every second wasted. Two things to motivate people is moving as quickly as possible and aiming to finish with just one piece remaining :)

fuzzyastrocat (744)

Cool! Puzzle games are great!

RolandJLevy (497)

@fuzzyastrocat yeah, they're fun to play and fun to code!

fuzzyastrocat (744)

@rjlevy Hey, speaking of which, would you mind checking out my new puzzle game? I really need some suggestions for how to make it better, but so far very few people have seen it so I don't really have much to go off of.

RolandJLevy (497)

Hey @fuzzyastrocat, I just posted a fun mini project on the Share board. Let me know what you think! :)

DynamicSquid (3608)

Wow ok this is awesome!

DynamicSquid (3608)

@rjlevy wait... is that a README.md file in lowercase letters????

RolandJLevy (497)

@DynamicSquid yes, why - do you prefer uppercase?

RolandJLevy (497)

@DynamicSquid yes, why - do you prefer uppercase?

RolandJLevy (497)

Hi @DynamicSquid, that's great - thanks for explaining and for the link. I read the advice on stackexchange.com and appreciate the reasons for using uppercase. I've changed my README.md to uppercase now. Do you have any other suggestions for improving my project?

DynamicSquid (3608)

@rjlevy no not really this project is perfect! oh quick question though, what does the linguist-vendored in .gitattributes do? haven't seen that before

RolandJLevy (497)

@DynamicSquid linguist-vendored in .gitattributes gets Github to display the language you want to assign to a repo. In this case, I want the game to appear as JavaScript repo.

Without it Github shows percentages for HTML, JS and CSS for this kind of repo.

More details here: https://github.com/github/linguist#vendored-code

python88 (172)

hi! long time no see!

RolandJLevy (497)

@python88 hey! How are you doing? Have you done any coding lately?

python88 (172)

yeah, im working on a pokemon game @rjlevy

RolandJLevy (497)

@python88 sounds good. What stage are you at?

RolandJLevy (497)

Hey @python88, I just posted something on the Share board. Check it out 😁

billehb (16)

How do I move the balls?

RolandJLevy (497)

Hi @billehb,

This game doesn't use drag and drop. Instead you have to click on any marble so it turns blue then place it over an adjacent marble into an empty space. The marble you move over will be taken. If you need to deselect a marble, click on it again so it turns from blue to gold.

Please see full instructions in the readme file or in the Help section of the game. Also, there is an animated GIF showing a demo of the game above ⬆

Let me know how you get on! 😀

billehb (16)

@rjlevy I dont know if Im just being dumb, but in the beginning I click new game then the board comes up and I click one of the marbles next to the middle were there is no marble, and the marble turns blue, but nothing happens when I click on anything else after that e.x the middle were there is no marbles, what do I do?

RolandJLevy (497)

Hi @billehb, no you're not being dumb. You have chosen a marble which can't be moved. To move a marble you need to choose one which has a neighbour and an empty space on the other side of the neighbour. For example, below you can move number 2 over it's neighbour, number 3, into the empty space.

(1) (2) (3) (_) (5)

Have you seen the animated demo above? That might help too :D

python88 (172)

can you make a game of tic tac toe plz? sorry if im asking for too much

RolandJLevy (497)

Hi @python88, thanks for your idea. It depends on how much time I have so I don't know if I'll be able to do it. It's always great to receive feedback and suggestions, so thanks!

CoolCoderSJ (0)

@python88 I made this a month ago https://repl.it/@CoolCoderSJ/Tic-tac-toe but you need 2 players and it's really basic

RolandJLevy (497)

@CoolCoderSJ thanks but that link doesn't seem to work for me...

ShivankChhaya (97)

Do you have any ideas for a logo?

RolandJLevy (497)

Hi @ShivankChhaya, thanks. No I haven't really thought about a logo. Where would you put it?

ShivankChhaya (97)

@rjlevy You now the repl cycle on your tab? Well, you would put it there. That's what I mean. I can give you the code if you don't know. (Put this in your <head>) <link rel='shortcut icon' type='image/<yourImageEnding>' href='<yourImageName'>

RolandJLevy (497)

@ShivankChhaya ah, OK - you mean a favicon. Yes, good idea. I'll make one soon. Thanks for the code!

ShivankChhaya (97)

@rjlevy thanks for telling what it is!

RolandJLevy (497)

@ShivankChhaya thanks for the suggestion too!

RolandJLevy (497)

Hi @ShivankChhaya, I've just added the favicon as suggested - take a look! :D

ShivankChhaya (97)

@rjlevy add one to your sliders game too!

RolandJLevy (497)

@ShivankChhaya, great idea - thanks! I just did it :D

RolandJLevy (497)

Hey @ShivankChhaya, I just posted something on the Share board. Check it out :)

FishingFights (124)

very cool! I'm currently working on a python version of this, I'll have to look over some of your logic for reference!

RolandJLevy (497)

Hi @FishingFights, thanks! That sounds great - I would love to see your Python version of the game. Let me know when it's ready so I can play it!

Epicmuffinepic (61)

This is a great game! I almost got on the leader board.

Bookie0 (3981)

Lol I thought this game would be the card game solitaire xD

RolandJLevy (497)

@Bookie0 Yes, both games have the same names!

[deleted]

Hey awesome, game love it
Trying to make a record

RolandJLevy (497)

@EvoEnder thanks! Good luck with getting a record score 👍

RolandJLevy (497)

@python88 hey! How is your coding going?

RolandJLevy (497)

@python88 yeah, that's my brother - he's very competative! He worked out how to finish with one marble in the centre of the board, therefore getting the 1,000 points bonus :)

28sh (5)

Great game, take an upvote.

NoNameByProgram (108)

so here are a few things i learned:

never make things symetrical in this game
you must have a quick reaction
i am bad at this game

RolandJLevy (497)

Hi @NoNameByProgram,

  • never make things symetrical in this game - agreed
  • you must have a quick reaction - yes, fastest gameplay is on mobile
  • I am bad at this game - do you mean bad as in good?

Thanks!

NISHoriginal (6)

This game is too good! Also, got a score of 2519!

RolandJLevy (497)

Hi @NISHoriginal, thanks! that's a good score, well done!

AmazingMech2418 (910)

You need to amp up your security. Great game though!

AmazingMech2418 (910)

@AmazingMech2418 Also, it appears as though you include your Firebase DB key in the obfuscated JS files. I'd recommend using Node and an ENV file instead.

RolandJLevy (497)

Hi @AmazingMech2418, thanks for pointing that out. Yes, I normally use a .env file in Node to hide API keys but this started as an HTML / CSS repl and I don't know how to convert it to a Node project without starting a new repl from scratch. Any ideas?

AmazingMech2418 (910)

@rjlevy Unfortunately, HTML/CSS/JS repls don't work the same way as normal repls, so you can't use a .replit file for it, but you could potentially just create another repl as a server that contains all of your API keys and sends requests to the Firebase API.

RolandJLevy (497)

@AmazingMech2418 are .env files always hidden from other repl users?

AmazingMech2418 (910)

@rjlevy Yes. However, strangely, any files that have anything before the "." are visible, so you must make sure the file is just .env.

RolandJLevy (497)

@AmazingMech2418 thanks, what do you mean by files that have anything before the "." are visible? Do you mean we shouldn't name files like this: name.env or name.gitignore?

AmazingMech2418 (910)

@rjlevy You're welcome! Yes, that is what I mean.

RolandJLevy (497)

Hi @AmazingMech2418, thanks so another repl with the API keys sends the request but how would the game receive the responses if it's in another repl?

AmazingMech2418 (910)

@rjlevy Yes. You'd just use the other repl as a middle-way between the database and the game just to prevent you from sharing the API keys.

RolandJLevy (497)

@AmazingMech2418, thanks - that sounds good. Where in the game would the response from the db be loaded and how?

AmazingMech2418 (910)

@rjlevy Basically, you'll just create your own API endpoint in the new repl using Express or just a plain Node.js server that will communicate with the server so your API key isn't given away.

RolandJLevy (497)

@AmazingMech2418 ok, thanks. I can make an endpoint in express but when I access that endpoint from the game in an HTML repl will I be exposing the response from the API (the API keys) in the game anyway?

AmazingMech2418 (910)

@rjlevy The API keys would only be used in the new server to access the database API. The only things that would be exposed are the database responses which are public in the leaderboard anyways.

RolandJLevy (497)

Hi @AmazingMech2418, thanks a lot for your help - I think it's much clearer for me now so I made a simple example of what you suggested...

This has been a great learning experience, so thanks again!

ridark (91)

Great game, and the fact that this game, like many games now, is built with just pure JS and no libraries is epic

RolandJLevy (497)

Hi @Programmer567, thanks! In the past I used React and Vue but more recently I much prefer using vanilla JS

Kookiez (123)

this is really good!

Leroy01010 (373)

too hard!!!:(

mind i know how too do it
me: ok go on
mind: there 335
me :O

Leroy01010 (373)

:)

MIND: WHAT IN THE WORLD ARE YOU DOING!!
me: doing a smiley-face
mind: humans these days don't do emojies. you guy's are old!!
me: were not!
mind: not listening

@rjlevy

RolandJLevy (497)

hey @python88! Here is the game as promised - it was fun to make 😀

RolandJLevy (497)

@python88 yes, but also it's about speed as the countdown is deducting points each second. It's easier to play on a mobile. I think it's possible to get a score of over 3,000

RolandJLevy (497)

@python88 haha, well done! You beat my high score 😁

python88 (172)

@rjlevy oh, i have to go. bye

python88 (172)

@rjlevy I bet tomorrow this will get trending

RolandJLevy (497)

@python88 yes, I think you will! 🤗

RolandJLevy (497)

@python88 no problem. I'll be watching the Leader Board! 😆

python88 (172)

you got trending. i told u i could see the future! @rjlevy

python88 (172)

@rjlevy people are getting 3000!

RolandJLevy (497)

Hi @python88, yes! there is a lot of competition. I don't think anyone can get more than 3500 but let's see!

ZDev1 (651)

this is amazing!
(also I am so DUMB at this game lol)

RolandJLevy (497)

@ZDev1 thanks! It takes a while to get the hang of it and it's easier to play on a mobile. Can you upvote ⬆ the game?

RolandJLevy (497)

@ZDev1 thanks! How are you doing?

ZDev1 (651)

@rjlevy I've started making a project

RolandJLevy (497)

@ZDev1 Oh great, what are you making and what languages are you using?

ZDev1 (651)

@rjlevy so, basically, I am making a video-chat-app with a chat near it... but I am still working on it
I am using Node.js (favorite language) and peerjs

Edit: I use also use ejs as a view

RolandJLevy (497)

@ZDev1 I just had a look at your repls. Is it called vroom? The code looks really good - well done! 👍

ZDev1 (651)

@rjlevy yes it is vroom
thanks!

ZDev1 (651)

@rjlevy because Zoom, you know
so I changed it to Vroom

RolandJLevy (497)

@ZDev1 nice - have you worked with socket.io much before? I haven't tried it yet...

RolandJLevy (497)

@ZDev1, ah nice 😁 did you teach yourself from a tutorial?

ZDev1 (651)

@rjlevy I look to other's project, and learn from them (psst, I am not a code copier :P)
Also, yes, I learn from tutorials

RolandJLevy (497)

@ZDev1 yes, I think I've already seen your chatroom - very good. I can see that you're not a copy/paste coder 😁 when you share your vroom on repl I will be the first to upvote it - just let me know when you plan to share it on repl

ZDev1 (651)

@rjlevy ok, thanks for the positive feedback :D

ZDev1 (651)

@rjlevy hey Roland
If u need to share it projects to me, don't send it to my discord, cuz I can't login into it :/

RolandJLevy (497)

@ZDev1 ok, no problem, I sent you message on discord today so maybe you didn't see it?

ZDev1 (651)

@rjlevy well I can't open discord, until I can login
I guess, that you sent a message on discord.
Sorry btw

RolandJLevy (497)

@ZDev1 ah, ok. No problem 🙂 thanks for explaining 👍