Rpsjs

this is a demo on how to make a rock paper scissors game with Rpsjs.

by bethropolis

HTML

<script src="https://cdn.jsdelivr.net/npm/rpsjs@1.0.0/rockPaperScissors.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>rpsjs demo</title>
  </head>
  <body>
    <div>
      <h1 id="user"></h1>
      <h1 id="computer"></h1>
      <h1 id="won"></h1>
    </div>
    <button>rock</button> 
    <button>paper</button> 
    <button>scissors</button>
  </body>
</html>

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

JavaScript

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