Share your repls and programming experiences

← Back to all posts
🚀 [GAME] Play SOLITAIRE!!! another awesome game! 🚀
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 ⚡

Links 🔗

Demo 🏁

https://github.com/rolandjlevy/js-solitaire-game/blob/master/images/solitaire-demo-large.gif?raw=true

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
userSM
Name12
mwilki7
TalinSharma
Rumble330
MarinZori
littlepenguin
mamahao
Bigbodyboy21
KaydenIreland
Comments
hotnewtop
rapidplane

Nice fun game, voted up.

RolandJLevy

Hey @rapidplane, thanks so much!

rapidplane

No problem!

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

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

FishingFights

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

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!

gibbsfreenergy

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

potatojs

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

RolandJLevy

@potatojs, @JosephSanthosh or maybe hangry?

potatojs

lmao
wait what is he talking about?
@rjlevy

RolandJLevy

@potatojs haha! autocomplete error?

RolandJLevy

@JosephSanthosh can you explain to @potatojs and I?

potatojs

@rjlevy he literally said

because of yesterdays earthquick this game make hungry

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

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

potatojs

L O L
@rjlevy

flameSpectrum

@JosephSanthosh I felt it

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?

RolandJLevy

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

potatojs

@rjlevy lmao

gibbsfreenergy

Yea! ya ya it does! lol @rjlevy @potatojs

RolandJLevy
RolandJLevy
gibbsfreenergy

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

RolandJLevy

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

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

RolandJLevy

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

ShivankChhaya

Do you have any ideas for a logo?

RolandJLevy

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

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

RolandJLevy

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

ShivankChhaya

@rjlevy thanks for telling what it is!

RolandJLevy

@ShivankChhaya thanks for the suggestion too!

RolandJLevy

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

ShivankChhaya

@rjlevy add one to your sliders game too!

RolandJLevy

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

RolandJLevy

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

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?

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.

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

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?

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

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

fuzzyastrocat

Cool! Puzzle games are great!

RolandJLevy

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

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.

RolandJLevy

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

fuzzyastrocat

@rjlevy Sure!

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

DynamicSquid

Wow ok this is awesome!

RolandJLevy

Hey @DynamicSquid, thanks!!

DynamicSquid

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

RolandJLevy

@DynamicSquid yes, why - do you prefer uppercase?

RolandJLevy

@DynamicSquid yes, why - do you prefer uppercase?

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

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?

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

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.

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

Name12

awesome!!

RolandJLevy

@Name12 haha! thanks buddy :)

Name12

@rjlevy NP
:)

python88

hi! long time no see!

RolandJLevy

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

python88

yeah, im working on a pokemon game @rjlevy

RolandJLevy

@python88 sounds good. What stage are you at?

RolandJLevy

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

python88
billehb

How do I move the balls?

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! 😀

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?

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

mamahao

wow, cool!

RolandJLevy

@mamahao thanks! :D

python88

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

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!

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

RolandJLevy

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

davidyu9

Awesome Game!

RolandJLevy

@davidyu9 thanks! :D

Epicmuffinepic

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

RolandJLevy

@Epicmuffinepic thanks, and good luck with your score!

RolandJLevy

@Epicmuffinepic thanks, and good luck with your score!

Epicmuffinepic

@rjlevy 1935!!!!

RolandJLevy
Bookie0

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

RolandJLevy

@Bookie0 Yes, both games have the same names!

Bookie0

lol :) @rjlevy

Henslo

Cool

RolandJLevy

@hello1964 thanks!

[deleted]

Hey awesome, game love it
Trying to make a record

RolandJLevy

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

python88

hi!

RolandJLevy

@python88 hey! How is your coding going?

python88

@rjlevy nice :)

python88

@rjlevy someone got 3500!

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

python88

@rjlevy wow!

28sh

Great game, take an upvote.

RolandJLevy

Hi @28sh, thank you!

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

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!

NISHoriginal

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

RolandJLevy

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

NISHoriginal

@rjlevy Thanks! :)

AmazingMech2418

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

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.

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?

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.

RolandJLevy

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

AmazingMech2418

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

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?

AmazingMech2418

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

RolandJLevy

@AmazingMech2418 ah, OK - thanks!

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?

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.

RolandJLevy

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

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.

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?

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.

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!

iocoder

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

RolandJLevy

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

CoolJames1610

E

RolandJLevy
Kookiez

this is really good!

RolandJLevy

Hey @OrangeJooce123, thanks so much!

Barry123

This is great!

RolandJLevy

Hey @Barry123, thanks so much!

Leroy01010

too hard!!!:(

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

RolandJLevy

@Leroy01010 haha! Nice one 🤣

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

RolandJLevy

@Leroy01010 hahaha!!! 😂🤣😆

Coder100

Cool!

RolandJLevy

@Coder100 thanks!

Coder100

np :D @rjlevy

python88

yay!

RolandJLevy

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

python88

@rjlevy it's hard tyhough

python88

@rjlevy is there a strategy?

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

python88

@rjlevy i got 500

python88
python88

@rjlevy 1015!

python88

@rjlevy i'm 10'th place!

python88

@rjlevy 6th!

python88

@rjlevy 4th!

RolandJLevy

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

python88

@rjlevy 3rd boi

python88
python88

1736 @rjlevy

RolandJLevy

@python88 wow! nice!

python88

@rjlevy i will get 1st

python88

@rjlevy oh, i have to go. bye

python88

@rjlevy I bet tomorrow this will get trending

RolandJLevy

@python88 yes, I think you will! 🤗

RolandJLevy

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

MusicByCameron

@python88 2nd place

RolandJLevy

@MusicByCameron that's awesome!

python88

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

python88

@rjlevy people are getting 3000!

RolandJLevy

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

python88