Rock-Paper-Scissors Game
Tags: javascript, gamedev, html, css
Published: 2020-12-16 21:38:26

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

![Game](https://dev-to-uploads.s3.amazonaws.com/i/57rye3le6ou5v3ad1jre.PNG)

###The game can be reached via this [link](https://rock-paper-scissors-swart-mu.vercel.app).


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

![Variables](https://dev-to-uploads.s3.amazonaws.com/i/xgwnam0pfgnvdp564tus.jpg)

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.

![eventListener](https://dev-to-uploads.s3.amazonaws.com/i/6eno43pyrhbcyetxdyhf.jpg)

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?*
![Computer Choice](https://dev-to-uploads.s3.amazonaws.com/i/l36mra4wmyon7lg5b1ad.jpg)


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.

![Gif I have created](https://dev-to-uploads.s3.amazonaws.com/i/20b7ad5qgcsnlg7632lg.gif)

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

![Point indicator](https://dev-to-uploads.s3.amazonaws.com/i/hlmo1r6c2762nw1ohaqw.jpg)

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

![Game Rules](https://dev-to-uploads.s3.amazonaws.com/i/a9x5ywhbijzuyb7e8udk.jpg)

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

![Who won](https://dev-to-uploads.s3.amazonaws.com/i/cl11fse8180z0qp0bbhp.jpg)

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!