🚀 [GAME] Play SOLITAIRE!!! another awesome game! 🚀
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
very cool! I'm currently working on a python version of this, I'll have to look over some of your logic for reference!
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!
I have to mention this thing is really making me hungry after yesterday's earthquake.
hungry.?.
you mean.. angry?
@JosephSanthosh
@potatojs, @JosephSanthosh or maybe hangry?
lmao
wait what is he talking about?
@rjlevy
@potatojs haha! autocomplete error?
@JosephSanthosh can you explain to @potatojs and I?
@rjlevy he literally said
because of yesterdays earthquick this game make hungry
what's the relation between your game and earth quicks?
@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 I felt it
@JosephSanthosh oh, I see the connection now. Do the yellow balls remind you of a particular food? Cheese balls maybe?
all the other kids got the pumped up kicks... @rjlevy
@JosephSanthosh thanks! but what do you mean by 'pumped up kicks'? I'm from the UK so not sure what that means :D
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
Hi @JosephSanthosh ah, OK - thanks for explaining! :D
Do you have any ideas for a logo?
Hi @ShivankChhaya, thanks. No I haven't really thought about a logo. Where would you put it?
@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'>
@ShivankChhaya ah, OK - you mean a favicon. Yes, good idea. I'll make one soon. Thanks for the code!
@rjlevy thanks for telling what it is!
@ShivankChhaya thanks for the suggestion too!
Hi @ShivankChhaya, I've just added the favicon as suggested - take a look! :D
@rjlevy add one to your sliders game too!
@ShivankChhaya, great idea - thanks! I just did it :D
Hey @ShivankChhaya, I just posted something on the Share board. Check it out :)
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?
@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.
@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
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?
@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
@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 :)
Cool! Puzzle games are great!
@fuzzyastrocat yeah, they're fun to play and fun to code!
@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.
Hey @fuzzyastrocat, I just posted a fun mini project on the Share board. Let me know what you think! :)
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
Wow ok this is awesome!
Hey @DynamicSquid, thanks!!
@rjlevy wait... is that a README.md file in lowercase letters????
@DynamicSquid yes, why - do you prefer uppercase?
@DynamicSquid yes, why - do you prefer uppercase?
@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
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?
@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
@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
awesome!!
@Name12 haha! thanks buddy :)
@rjlevy NP
:)
hi! long time no see!
@python88 hey! How are you doing? Have you done any coding lately?
yeah, im working on a pokemon game @rjlevy
@python88 sounds good. What stage are you at?
Hey @python88, I just posted something on the Share board. Check it out 😁
How do I move the balls?
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! 😀
@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?
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
wow, cool!
@mamahao thanks! :D
can you make a game of tic tac toe plz? sorry if im asking for too much
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!
@python88 I made this a month ago https://repl.it/@CoolCoderSJ/Tic-tac-toe but you need 2 players and it's really basic
@CoolCoderSJ thanks but that link doesn't seem to work for me...
Awesome Game!
@davidyu9 thanks! :D
This is a great game! I almost got on the leader board.
@Epicmuffinepic thanks, and good luck with your score!
@Epicmuffinepic thanks, and good luck with your score!
@rjlevy 1935!!!!
Lol I thought this game would be the card game solitaire xD
@Bookie0 Yes, both games have the same names!
lol :) @rjlevy
Cool
@hello1964 thanks!
Hey awesome, game love it
Trying to make a record
@EvoEnder thanks! Good luck with getting a record score 👍
@python88 hey! How is your coding going?
@rjlevy nice :)
@rjlevy someone got 3500!
@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 :)
Great game, take an upvote.
Hi @28sh, thank you!
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
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!
This game is too good! Also, got a score of 2519!
Hi @NISHoriginal, thanks! that's a good score, well done!
@rjlevy Thanks! :)
You need to amp up your security. Great game though!
@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.
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?
@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.
@AmazingMech2418 are .env files always hidden from other repl users?
@rjlevy Yes. However, strangely, any files that have anything before the "." are visible, so you must make sure the file is just .env.
@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?
@rjlevy You're welcome! Yes, that is what I mean.
@AmazingMech2418 ah, OK - thanks!
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?
@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.
@AmazingMech2418, thanks - that sounds good. Where in the game would the response from the db be loaded and how?
@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.
@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?
@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.
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...
I made this Express repl: https://repl.it/@rjlevy/node-api-keys which has the .env file containing Unsplash API keys and various endpoints. It can be tested here.
Then I made this HTML repl: https://repl.it/@rjlevy/html-unsplash-search-without-api-keys which can be tested here.
The HTML repl fetches images from Unsplash by sending a request to this Express endpoint using the search input as the query, which is 'trees' in this example: https://node-api-keys.rjlevy.repl.co/json?s=trees
This has been a great learning experience, so thanks again!
Great game, and the fact that this game, like many games now, is built with just pure JS and no libraries is epic
Hi @Programmer567, thanks! In the past I used React and Vue but more recently I much prefer using vanilla JS
this is really good!
Hey @OrangeJooce123, thanks so much!
This is great!
Hey @Barry123, thanks so much!
too hard!!!:(
mind i know how too do it
me: ok go on
mind: there 335
me :O
@Leroy01010 haha! Nice one 🤣
:)
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
@Leroy01010 hahaha!!! 😂🤣😆
Cool!
@Coder100 thanks!
np :D @rjlevy
yay!
hey @python88! Here is the game as promised - it was fun to make 😀
@rjlevy it's hard tyhough
@rjlevy is there a strategy?
@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
@rjlevy i got 500
@rjlevy 1015!
@rjlevy i'm 10'th place!
@python88 haha, well done! You beat my high score 😁
@rjlevy 3rd boi
@python88 wow! nice!
@rjlevy i will get 1st
@rjlevy oh, i have to go. bye
@rjlevy I bet tomorrow this will get trending
@python88 yes, I think you will! 🤗
@python88 no problem. I'll be watching the Leader Board! 😆
@python88 2nd place
@MusicByCameron that's awesome!
you got trending. i told u i could see the future! @rjlevy
@rjlevy people are getting 3000!
Hi @python88, yes! there is a lot of competition. I don't think anyone can get more than 3500 but let's see!
this is amazing!
(also I am so DUMB at this game lol)
@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?
@rjlevy oh sry I forgot!
@ZDev1 thanks! How are you doing?
@rjlevy I've started making a project
@ZDev1 Oh great, what are you making and what languages are you using?
@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
@ZDev1 I just had a look at your repls. Is it called vroom? The code looks really good - well done! 👍
@rjlevy yes it is vroom
thanks!
@rjlevy because Zoom, you know
so I changed it to Vroom
@ZDev1 nice - have you worked with socket.io much before? I haven't tried it yet...
@ZDev1, ah nice 😁 did you teach yourself from a tutorial?
@rjlevy well I made a chatapp with it (https://chatapp.zdev1.repl.co)
@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
@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
@rjlevy ok, thanks for the positive feedback :D
@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 :/
@ZDev1 ok, no problem, I sent you message on discord today so maybe you didn't see it?
@rjlevy well I can't open discord, until I can login
I guess, that you sent a message on discord.
Sorry btw
@ZDev1 ah, ok. No problem 🙂 thanks for explaining 👍
@rjlevy np :D
Nice fun game, voted up.
Hey @rapidplane, thanks so much!
No problem!