Skip to content
← Back to Community
πŸš€ [GAME] Play SOLITAIRE!!! another awesome game! πŸš€
Profile icon
RolandJLevy

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 ⚑

Demo 🏁

Solitaire 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
Voters
Profile icon
userSM
Profile icon
Name12
Profile icon
mwilki7
Profile icon
TalinSharma
Profile icon
Rumble330
Profile icon
MarinZori
Profile icon
littlepenguin
Profile icon
mamahao
Profile icon
Bigbodyboy21
Profile icon
KaydenIreland
Comments
hotnewtop
Profile icon
guerrilla

Nice fun game, voted up.

Profile icon
RolandJLevy

Hey

@rapidplane
, thanks so much!

Profile icon
guerrilla

No problem!

Profile icon
leo-ironkey

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

Profile icon
RolandJLevy

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!

Profile icon
gibbsfreenergy

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

Profile icon
potatojs

hungry.?.
you mean.. angry?


@JosephSanthosh

Profile icon
RolandJLevy

@potatojs
,
@JosephSanthosh
or maybe hangry?

Profile icon
potatojs

lmao
wait what is he talking about?


@rjlevy

Profile icon
RolandJLevy

@potatojs
haha! autocomplete error?

Profile icon
RolandJLevy

@JosephSanthosh
can you explain to
@potatojs
and I?

Profile icon
potatojs

@rjlevy
he literally said

because of yesterdays earthquick this game make hungry

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

Profile icon
RolandJLevy

@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

Profile icon
potatojs
Profile icon
flameSpectrum

@JosephSanthosh
I felt it

Profile icon
gibbsfreenergy

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

Profile icon
RolandJLevy

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

Screen Shot 2020-10-02 at 10.05.21

Profile icon
potatojs

@rjlevy
lmao

Profile icon
gibbsfreenergy

Yea! ya ya it does! lol

@rjlevy
@potatojs

Profile icon
RolandJLevy

@potatojs
πŸ˜†

Profile icon
RolandJLevy
Profile icon
gibbsfreenergy

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

@rjlevy

Profile icon
RolandJLevy

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

Profile icon
gibbsfreenergy

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

Profile icon
RolandJLevy

Hi

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

Profile icon
ShivankChhaya

Do you have any ideas for a logo?

Profile icon
RolandJLevy

Hi

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

Profile icon
ShivankChhaya

@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 ) <link rel='shortcut icon' type='image/<yourImageEnding>' href='<yourImageName'>

Profile icon
RolandJLevy

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

Profile icon
ShivankChhaya

@rjlevy
thanks for telling what it is!

Profile icon
RolandJLevy

@ShivankChhaya
thanks for the suggestion too!

Profile icon
RolandJLevy

Hi

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

Profile icon
ShivankChhaya

@rjlevy
add one to your sliders game too!

Profile icon
RolandJLevy

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

Profile icon
RolandJLevy

Hey

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

Profile icon
Spitfier720

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?

Profile icon
RolandJLevy

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

Profile icon
Spitfier720

@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

Profile icon
RolandJLevy

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?

Profile icon
Spitfier720

@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

Profile icon
RolandJLevy

@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 :)

Profile icon
fuzzyastrocat

Cool! Puzzle games are great!

Profile icon
RolandJLevy

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

Profile icon
fuzzyastrocat

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

Profile icon
RolandJLevy

Hey

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

Profile icon
fuzzyastrocat

@rjlevy
Sure!

Profile icon
RolandJLevy

Hey

@fuzzyastrocat
, I just posted a new game, check it out and let me know what you think :) https://repl.it/talk/share/GAME-Play-POP-100-a-Totally-Awesome-Game/79626

Profile icon
DynamicSquid

Wow ok this is awesome!

Profile icon
RolandJLevy

Hey

@DynamicSquid
, thanks!!

Profile icon
DynamicSquid

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

Profile icon
RolandJLevy

@DynamicSquid
yes, why - do you prefer uppercase?

Profile icon
RolandJLevy

@DynamicSquid
yes, why - do you prefer uppercase?

Profile icon
DynamicSquid

@rjlevy
I mean, a lot of high reputation users on Software Engineering say so: https://softwareengineering.stackexchange.com/questions/301691/readme-txt-vs-readme-txt

Profile icon
RolandJLevy

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?

Profile icon
DynamicSquid

@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

Profile icon
RolandJLevy

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

Screen Shot 2020-09-20 at 18.43.16

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

Profile icon
LeahBrown111

Solitare is one of my favorite games. I remember when my parents got the first computer for it, solitaire was the first game that I ever played.
I've been searching for a long time for the game version that I was playing in my childhood. However, I wasn't able to find the exact one (((
Right now, I am spending my time playing solitaire on https://online-solitaire.com/. It's very captivating, and my wife also loves it. Tried to show this game to my children. However, they didn't like it, lol. They said it's old school))
I've been searching for a long time for the game version that I was playing in my childhood. However, I wasn't able to find the exact one (((

Profile icon
RolandJLevy

@LeahBrown111
thanks for your feedback. Yes, I love solitaire too, and that's what motivated me to create the game. I hope you enjoy playing it :)

Profile icon
Name12

awesome!!

Profile icon
RolandJLevy

@Name12
haha! thanks buddy :)

Profile icon
Name12

@rjlevy
NP
:)

Profile icon
python88

hi! long time no see!

Profile icon
RolandJLevy

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

Profile icon
python88

yeah, im working on a pokemon game

@rjlevy

Profile icon
RolandJLevy

@python88
sounds good. What stage are you at?

Profile icon
RolandJLevy

Hey

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

Profile icon
python88
Profile icon
billehb

How do I move the balls?

Profile icon
RolandJLevy

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! πŸ˜€

Profile icon
billehb

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

Profile icon
RolandJLevy

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

Profile icon
mamahao

wow, cool!

Profile icon
RolandJLevy

@mamahao
thanks! :D

Profile icon
python88

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

Profile icon
RolandJLevy

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!

Profile icon
CoolCoderSJ

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

Profile icon
RolandJLevy

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

Profile icon
davidyu9

Awesome Game!

Profile icon
RolandJLevy

@davidyu9
thanks! :D

Profile icon
Epicmuffinepic

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

Profile icon
RolandJLevy

@Epicmuffinepic
thanks, and good luck with your score!

Profile icon
RolandJLevy

@Epicmuffinepic
thanks, and good luck with your score!

Profile icon
Epicmuffinepic

@rjlevy
1935!!!!

Profile icon
RolandJLevy
Profile icon
Bookie0

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

Profile icon
RolandJLevy

@Bookie0
Yes, both games have the same names!

Profile icon
Bookie0

lol :)

@rjlevy

Profile icon
Henslo

Cool

Profile icon
RolandJLevy

@hello1964
thanks!

Profile icon
[deleted]

Hey awesome, game love it
Trying to make a record

Profile icon
RolandJLevy

@EvoEnder
thanks! Good luck with getting a record score πŸ‘

Profile icon
python88

hi!

Profile icon
RolandJLevy

@python88
hey! How is your coding going?

Profile icon
python88

@rjlevy
nice :)

Profile icon
python88

@rjlevy
someone got 3500!

Profile icon
RolandJLevy

@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 :)

Profile icon
python88

@rjlevy
wow!

Profile icon
28sh

Great game, take an upvote.

Profile icon
RolandJLevy

Hi

@28sh
, thank you!

Profile icon
NoNameByProgram

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

Profile icon
RolandJLevy

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!

Profile icon
NISHoriginal

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

Profile icon
RolandJLevy

Hi

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

Profile icon
NISHoriginal

@rjlevy
Thanks! :)

Profile icon
AmazingMech2418

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

image

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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?

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

@AmazingMech2418
ah, OK - thanks!

Profile icon
RolandJLevy

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?

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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

Profile icon
AmazingMech2418

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

Profile icon
RolandJLevy

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!

Profile icon
glitchish

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

Profile icon
RolandJLevy

Hi

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

Profile icon
CoolJames1610

E

Profile icon
RolandJLevy
Profile icon
Kookiez

this is really good!

Profile icon
RolandJLevy

Hey

@OrangeJooce123
, thanks so much!

Profile icon
Barry123

This is great!

Profile icon
RolandJLevy

Hey

@Barry123
, thanks so much!

Profile icon
Leroy01010

too hard!!!:(

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

Profile icon
RolandJLevy

@Leroy01010
haha! Nice one 🀣

Profile icon
Leroy01010

:)

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

Profile icon
RolandJLevy

@Leroy01010
hahaha!!! πŸ˜‚πŸ€£πŸ˜†

Profile icon
Coder100

Cool!

Profile icon
RolandJLevy

@Coder100
thanks!

Profile icon
Coder100
Profile icon
python88

yay!

Profile icon
RolandJLevy

hey

@python88
! Here is the game as promised - it was fun to make πŸ˜€

Profile icon
python88

@rjlevy
it's hard tyhough

Profile icon
python88

@rjlevy
is there a strategy?

Profile icon
RolandJLevy

@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

Profile icon
python88

@rjlevy
i got 500

Profile icon
python88
Profile icon
python88

@rjlevy
1015!

Profile icon
python88

@rjlevy
i'm 10'th place!

Profile icon
python88

@rjlevy
6th!

Profile icon
python88

@rjlevy
4th!

Profile icon
RolandJLevy

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

Profile icon
python88

@rjlevy
3rd boi

Profile icon
python88
Profile icon
python88
Profile icon
RolandJLevy

@python88
wow! nice!

Profile icon
python88

@rjlevy
i will get 1st

Profile icon
python88

@rjlevy
oh, i have to go. bye

Profile icon
python88

@rjlevy
I bet tomorrow this will get trending

Profile icon
RolandJLevy

@python88
yes, I think you will! πŸ€—

Profile icon
RolandJLevy

@python88
no problem. I'll be watching the Leader Board! πŸ˜†

Profile icon
MusicByCameron

@python88
2nd place

Profile icon
RolandJLevy

@MusicByCameron
that's awesome!

Profile icon
python88

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

@rjlevy

Profile icon
python88

@rjlevy
people are getting 3000!

Profile icon
RolandJLevy

Hi

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

Profile icon
python88