Example Subtitle
ποΈ
Read the article
π
Report a Bug
πββοΈ
Request Feature
WE WILL CHANGE TO EOS SOON!!! Creating a Rock-Paper-Scissors's game shouldn't pose a problem, right? WRONG
Our team always searching for new code-toys, new skies to fly-bye, started to develop a game using the latest file system on the town, IPFS. With IPFS the goal is to use a decentralized high-tech network that surely will change the internet as we know it. Using the concepts learned from bitcoin, blockchain, cryptocurrencies world, with core concepts as merkle-tree,
If you want to jump and play: Demo
The files follows the usual react-create-app structure:
JanKenPon-construction
βββ package.json
βββ public
β βββ bgimage.png
β βββ index.html
βββ src
βββ components
β βββ game-connection.js
β βββ game-lobby.js
β βββ game-match.js
β βββ game.js
β βββ style.css
βββ css
β βββ styles.css
βββ index.js
βββ img
βββ loading.gif
βββ Mano 1.png
βββ Mano 2.png
βββ Mano 3.png
βββ Mano 4.png
βββ Mano 5.png
βββ Mano 6.png
βββ Mano 1R.png
βββ Mano 2R.png
βββ Mano 3R.png
βββ match.png
βββ Online-Peers.png
βββ Papel.png
βββ Piedra.png
βββ search.gif
βββ Tijera.png
βββ title.png
You must know by now, but well... Open a terminal in the parent folder of your choose and type (or ol'faithful copy & paste):
git clone https://github.com/VertexStudio/FaircoinRPS.git
cd FaircoinRPS/ && npm install && npm start
This runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
We Recommend FIREFOX for both desktop and mobile. Specially on mobile we have issues with Chrome, but if you find any other bug please post an issue here.
You can refer to the React documentation for more information about supported browsers.
Games and coding are fun! At least until mistakes and errors arise. This is a classic aproach to Rock, Paper and Scissors game, but using IPFS to communicate moves.
First you will notice a jumpy monkey, and a prompt inviting you to enter your email. This is important because in this email you will receive the prize code if you win ingame. So is important that you double check your input. To play is not required that you enter an email, but if you win some Faircoins and we can't contact you, that Faircoins will be lost forever, so be careful, ok? (*blink).
At the bottom of the screen is the CONNECTION section. This shows OFFLINE at first, so notice that reflect the status of our ipfs-js node, a Guaranty Trusty way to get safest connection because we are talking about money here. When it changes to WAITING that means that IPFS created a node, and subscribe to our lobby channel.
At the bottom you will see a PeerID field, indicating your unique id inside the game. This ID is generated by IPFS and can't be shared by others players even inside your local network, even inside your own machine system! But if you change the machine your PeerID changes, take that into account. This PeerId is used as a sort of name, but if you feel like be even more unique, at the top of the viewport is a little icon whith the legend Change your Nickname
. You can choose to put your name or nickname for others to see it.
Also you will see another status field, first at CHILLING, meaning you are relaxing on our lobby, just waiting a challenge. Other status is Challenging, that means your are connecting with other player and trying to have an old fashioned match. The last possible status is Matching, when, yeah you guess it, you are actually playing the game against an human player.
Next you will see a growing list of ONLINE PEERS, that catch from the lobby other players in Chilling status. You can select one of them, or press the orangy button to select randomly, and notice that your status switch to Challenging. When the other player or you get a Challenging Call, a button on the Online Peers list will change color, and the way to answer is selecting back the colored button. If the challenge was accepted, the status will change to Matching.
ProTip: When nobody answer your challenge, the list will update after a minute of waiting
You can see the opponent's name atop the Match Window, also a counter of the times you win, tie or lose. To select an option, click or tap one of the buttons, that try to be self explanatory, but well... the first button from your left is the ROCK, the middle one is PAPER and the last is the SCISSORS.
If you don't know the game, here is a fancy guide:
- You play against other human. So you have to wait for the other to send their choose, but you can choose your selection right from the beginning.
ProTip: If the opponent don't answer with a move after a while, the match is invalidated and you return to LOBBY screen.
- The rules are explained in the next table:
"Isn't this fun?" | against Rock | against Paper | against Scissors |
---|---|---|---|
my Rock | Rock hits Rock. TIE | Rock is Wrapped by Paper. LOSE | Rock smash Scissors. WIN |
my Paper | Paper wraps Rock. Win | Paper rub Paper. TIE | Paper is cut by Scissors. LOSE |
my Scissors | Scissors is smashed by Rock. LOSE | Scissors cut Paper. WIN | Scissors sharpen Scissors. TIE |
- When both choose a move, an interesting algorithm about checking connection and deciding/validating is running to decide the result and distributing points. Please be patient if it hangs up, when the consensus is reached you can continue to play.
- When 3 rounds are played, the game will decide who win, and you will return to LOBBY screen.
- Use A-Frame WebVR instead of images.
- Direct FairCoin connection.
- Make your device fly or/and transform into a robot.
- Rozgo (TEAM LEADER)
- Max (SENIOR PROGRAMMER)
- Javi
- Israel
Games's sequence diagram:
To visualize the flow with a flow chart:
π€ Contributions, issues and feature requests are welcome! Feel free to check the issues page.
π€ Give a βοΈ if you like this project!
Icons from:
π This project is licensed under the MIT
Feel free to fork this project and improve it