building a rock paper scissors game
Tags: javascript, noob, rpsjs
Published: 2021-04-07 11:49:43

We all like building a fun project and one of them is a simple game.

today I will be building a rock paper scissors game with `RPSjs` library which I built myself a year ago.

the whole source code is at the [end](#code).

this is how it will look

![Desktop-screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co41n7fu22fkpwq0c7zj.png)

when you click the buttons it shows what the computer choose against yours and who won

![7cd19c054f22a60646f87ce541e422b1152def5b](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir7mbmeunkmg5n0mvbej.gif)
 
you can play with this [JSfiddle](https://jsfiddle.net/bethropolis/fdvxLk13/5/) 

# first

we will import the library through a CDN
```html
<script src="https://cdn.jsdelivr.net/npm/rpsjs@1.0.0/rockPaperScissors.min.js"></script>
```
you can visit the website for the [documentation](https://bethropolis.github.io/rockPaperScissorsjs) or [Github](https://github.com/bethropolis/rockPaperScissorsjs) 

we are going to create a boilerplate
![xdfsghh-svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxlcedde1rxdf9zlbqno.png)

where are now going to add the buttons
![gy8oooo-svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr9cjuny1q7n4hll4tz3.png)

> add the cdn onto the `<head>` 
![half-svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dohs8iayih4bkd6be4f0.png)


# javascript
now it is time for sweet JavaScript to be added.

![oggggui-svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awckayevg23ye838nilw.png)
 
## explanation
```js
      document.querySelectorAll("button").forEach(btn =>{
           btn.addEventListener('click',function(){
              startGame(btn.innerText)
           })
      })
```
in the Js, we first get how many buttons are on the document with the `document.querySelectorAll("button")` and for each button, we add an event listener which will call the `startGame()` function when clicked. the `btn.innerText` is passed as a parameter in the function which will be the user's choice. For example, if you click `<button>rock</rock>` then `rock` will be passed as a value in the function.

> This way is not recommended but I will use it just for this demonstration 

### second part

 ```js
function startGame(userChoice){
    const player = new Play(); 
    let data = player.Roll(userChoice); 
      console.log(data)
 }

```
 in the `startGame(userChoice)` function we place the users choice into a variable `userChoice`. 
Using the `play()` class we create a new class `player`(can be anything) which gives us access to the `player.Roll()` function, we pass `userChoice` onto the function which will return an object and finally we log out the result with `console.log(data)`.

this is what will be displayed on your console
> it won't be exact, since the computer's choice is random

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7exiqv9ze5w5jaqx5mag.png)
 
but displaying it on the console isn't that impressive so let's add some more code.

on the HTML let's add

```html
<div> 
   <h1 id="user"></h1>
   <h1 id="computer"></h1>
   <h1 id="won"></h1>
</div>
```
and css
```css
button{
	box-shadow:inset 0px 1px 7px -17px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:12px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:9px 26px;
	text-decoration:none;
   outline: none;
	text-shadow:0px 1px 15px #1570cd;
}
button:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
button:active {
	position:relative;
	top:1px;
}
```
the CSS is just to style the buttons and make them look great.

and let's update the javascript
```js
function startGame(userChoice) {
  const player = new Play();
  let data = player.Roll(userChoice);
  document.querySelector("#user").innerText = "user: " + data.user;
  document.querySelector("#computer").innerText = "computer: " + data.computer;
  document.querySelector("#won").innerText = "won: " + data.won;
}
```

# code
finally here is the whole source code
```html
<!DOCTYPE html>
<html lang="en">
  <head>
      <!--the css--> 
    <style>
      button{
      	box-shadow:inset 0px 1px 7px -17px #97c4fe;
      	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
      	background-color:#3d94f6;
      	border-radius:12px;
      	border:1px solid #337fed;
      	display:inline-block;
      	cursor:pointer;
      	color:#ffffff;
      	font-family:Arial;
      	font-size:16px;
      	font-weight:bold;
      	padding:9px 26px;
      	text-decoration:none;
         outline: none;
      	text-shadow:0px 1px 15px #1570cd;
      }
      button:hover {
      	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
      	background-color:#1e62d0;
      }
      button:active {
      	position:relative;
      	top:1px;
      }
    </style>
          <!--the cdn-->
    <script src="https://cdn.jsdelivr.net/npm/rpsjs@1.0.0/rockPaperScissors.min.js"></script>
  </head>
  <body>
     <!--to be displayed-->
    <div>
      <h1 id="user"></h1>
      <h1 id="computer"></h1>
      <h1 id="won"></h1>
    </div>
        <!--user buttons-->
    <button>rock</button> 
    <button>paper</button> 
    <button>scissors</button>
        <!--the js-->
    <script>
       document.querySelectorAll("button").forEach(btn => {
        btn.addEventListener("click", function() {
          startGame(btn.innerText);
        });
      });

      function startGame(userChoice) {
        const player = new Play();
        let data = player.Roll(userChoice);
        document.querySelector("#user").innerText = "user: " + data.user;
        document.querySelector("#computer").innerText = "computer: " + data.computer;
        document.querySelector("#won").innerText = "won: " + data.won;
      }
    </script>
  </body>
</html>
```

and there you go, you have your very own rock paper scissors game.
![huraaay](https://media.giphy.com/media/TdfyKrN7HGTIY/giphy.gif)

# about
I am Bethuel and this is my first post, I hope you enjoyed it and
thanks for sticking by.