building a rock paper scissors game

ghost — Wed, 07 Apr 2021 11:49:43 +0000

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

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

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>

you can visit the website for the documentation or Github

we are going to create a boilerplate

where are now going to add the buttons

add the cdn onto the <head>

javascript

now it is time for sweet JavaScript to be added.

explanation

      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

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

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>

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;
}

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;
}

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>

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

about

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