Hello Everyone,
...who might read this.
First of all, I would like to mention that English is not my native language, so sorry for the grammar mistakes in advance.
So, I have just created this game in the previous 2-3 hours from scratch and decided to write some notes about that and also ask for the community's opinion.
The game can be reached via this link.
Regarding the (JS) building process:
Firstly, I created an object, which contains the text format of each possibility (rock,paper,scissors) and then added the image sources also to this object.
In my HTML I have made:
playerChoiceImg
playerChoiceTxt
computerChoiceImg
computerChoiceTxt
to be able to modify the content in each of them.
Then created a points variable, which will store the points of each player (player and computer).
After that, I needed a random generated number between 1 and 3 which will be indicating the computers choice.
To be honest, I gave these objects an ID, but havent used them in the project. I just used the index of each at the selection. Like: choices[0].image...
Adding the eventListener:
I have attached and eventlistener to the buttons, with the forEach() method, which I am learning to use properly nowadays.
This eventlistener will do most of the work.
As your can see on this screenshot, I am using if-else statements, to define, which button does what and according to the textContent of the button.
Here I would like to ask, if you have any suggestion regarding this solution? (1st question. I will be indicating a number at each question, so it will be easier to answer, if you want to)
** Now, let's go back to the explanation. **
So, the if-else statements:
If the button has the text "Rock" in itself, then please show "Rock" in the playerChoiceTxt and meanwhile change the image source of playerChoiceImg to the one stored in the object.
And the same for the other 2 options.
After that, I crated the computer's choice function, which looks the following:
(2nd question) Is there a proper way to paste code here with the original formatting?
Some explanation regarding that (because it's a little bit spaghetti):
1. I have created a looping gif from the 3 images I use for the rock, paper and scissors options.
This is kind of a workaround solution for not knowing how to do this in the code.
(3rd question) Any suggestions how should I loop through images and create a GIF like animation?
2. Then added a setTimeout, which is responsible for the duration of the animation.
3. Inside that, I told the function, to create a random number between 0-2, which are the element numbers in the choices object.
This will indicate the choice of the computer.
4. Changed the text and the image content to the chosen object element's name and image source.
5. Then ran the gameRules() function (which we will talk about later).
6. Updated the textContent of each player's point indicator.
7. Checking the points at each function call, to check if somebody won. (whoWon() function)
function gameRules()
This is what I am not really proud of.
So basically, this function checks the player's choice and checks if the computer choice can beat it or not.
I have set up these if-else statements according to the game's rules. If the computer won, add +1 to the computer's points, and at any other results, add +1 to the player's points.
(4th question) Is there an easier way? Any suggestion would come in handy.
function whoWon()
if-else statements again..and again..and again...
So basically, just checks the point array if anyone has already reached 10 points, and if so, then resets the points to their initial value.
Huhh..that's all, I guess..
This was my first post here, hopefully not the last, because it was a really enjoyable activity and language practice.
If you have any question/suggestion/remark, feel free to contact me.
Also, here is the GitHub repo, if you are interested in the source code:
https://github.com/crabyke/rock-paper-scissors
Bye everyone!
Top comments (6)
Looks great ! Do you mind creating an online snippet on JSitor.com ?
Hey! Thanks!
I have created an online snippet as you suggested:
jsitor.com/zEg-fwgno
Looks great, did you login and save ? Otherwise it will be hosted as anonymous. Better to keep it tracked by logging in 🙂
This post is very great, My English is not native too, but I understand(google translate :) ) your post very good, the link is broken. I think that write is incredible form that improve your English
Thanks for the feedback.
I have created an online snippet, which you can access here:
jsitor.com/zEg-fwgno
where did you get the images?