DEV Community

ghost
ghost

Posted on

building a rock paper scissors game

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.

this is how it will look

Desktop-screenshot

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

7cd19c054f22a60646f87ce541e422b1152def5b

you can play with this JSfiddle

first

we will import the library through a CDN

<script src="https://cdn.jsdelivr.net/npm/rpsjs@1.0.0/rockPaperScissors.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

you can visit the website for the documentation or Github

we are going to create a boilerplate
xdfsghh-svg

where are now going to add the buttons
gy8oooo-svg

add the cdn onto the <head>
half-svg

javascript

now it is time for sweet JavaScript to be added.

oggggui-svg

explanation

      document.querySelectorAll("button").forEach(btn =>{
           btn.addEventListener('click',function(){
              startGame(btn.innerText)
           })
      })
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

but displaying it on the console isn't that impressive so let's add some more code.

on the HTML let's add

<div> 
   <h1 id="user"></h1>
   <h1 id="computer"></h1>
   <h1 id="won"></h1>
</div>
Enter fullscreen mode Exit fullscreen mode

and 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;
}
Enter fullscreen mode Exit fullscreen mode

the CSS is just to style the buttons and make them look great.

and let's update the javascript

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;
}
Enter fullscreen mode Exit fullscreen mode

code

finally here is the whole source code

<!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>
Enter fullscreen mode Exit fullscreen mode

and there you go, you have your very own rock paper scissors game.
huraaay

about

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

Top comments (2)

Collapse
 
__manucodes profile image
manu

Very useful! Thanks for sharing!

Collapse
 
trebble_ghost profile image
ghost

thank you