<h1>Rock, Paper, or Scissors?</h1>

<p>A steam-powered bot has challenged you to a game. <strong>Rock</strong> beats <strong>scissors</strong>, <strong>scissors</strong> beats <strong>paper</strong>, and <strong>paper</strong> beats <strong>rock</strong>.</p>

<div class="scoreboard">
  <h2>Scoreboard</h2>
  <table>
    <tbody>
      <tr>
        <td id="humanScore">0</td>
        <td id="computerScore">0</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>You</th>
        <th>Bot</th>
      </tr>
    </tfoot>
  </table>
</div>

<h2 id="choose-wisely">Choose Wisely</h2>

<button id="rock">Rock</button>

<button id="paper">Paper</button>

<button id="scissors">Scissors</button>


<div id="status"></div>


body {
  font-family: monospace;
  font-size: 20px;
  text-align: center;
  background: black;
  color: lime;
  margin: 3em;
}

strong {
  text-decoration: underline;
}

button {
  background: lime;
  color: black;
  border: none;
  padding: 10px 15px;
  font-size: 1.2em;
  font-family: monospace;
  font-weight: bold;
}
button:active {
  background: green;
}

.scoreboard {
  width: 14em;
  margin: auto;
  border: 1px solid lime;
}
.scoreboard h2 {
  border-bottom: 1px solid lime;
  margin: 0;
  padding: 10px;
}
.scoreboard table {
  margin: 10px auto;
  width: 100%;
  border-collapse: collapse;
}
.scoreboard th, .scoreboard td {
  text-align: center;
}
.scoreboard td {
  font-size: 3em;
  padding: 0 20px;
}

#status {
  margin-top: 20px;
}
var choice;
var playerScore=0;
var compScore=0;
var choices=["rock", "paper","scissors"];
var compChoice=choices[Math.floor(Math.random()*choices.length)];
document.getElementById("rock").onclick=function() {
  if (compChoice=="paper"){
    document.getElementById("choose-wisely").innerHTML="Paper beats Rock. Computer Wins!";
    compScore++;
    document.getElementById("computerScore").innerHTML=compScore;
  }
  else if (compChoice=="rock") {
    document.getElementById("choose-wisely").innerHTML="Tie!";
  }
  else {
    document.getElementById("choose-wisely").innerHTML="Rock beats Scissors. Player Wins!";
    playerScore++;
    document.getElementById("humanScore").innerHTML=playerScore;
  }
  compChoice=choices[Math.floor(Math.random()*choices.length)];
}
document.getElementById("paper").onclick=function() {
  if (compChoice=="scissors"){
    document.getElementById("choose-wisely").innerHTML="Scissors cuts Paper. Computer Wins!";
    compScore++;
    document.getElementById("computerScore").innerHTML=compScore;
  }
  else if (compChoice=="paper") {
    document.getElementById("choose-wisely").innerHTML="Tie!";
  }
  else {
    document.getElementById("choose-wisely").innerHTML="Paper beats Rock. Player Wins!";
    playerScore++;
    document.getElementById("humanScore").innerHTML=playerScore;
  }
  compChoice=choices[Math.floor(Math.random()*choices.length)];
}
document.getElementById("scissors").onclick=function() {
  if (compChoice=="rock"){
    document.getElementById("choose-wisely").innerHTML="Rock beats Scissors. Computer Wins!";
    compScore++;
    document.getElementById("computerScore").innerHTML=compScore;
  }
  else if (compChoice=="scissors") {
    document.getElementById("choose-wisely").innerHTML="Tie!";
  }
  else {
    document.getElementById("choose-wisely").innerHTML="Scissors cuts Paper. Player Wins!";
    playerScore++;
    document.getElementById("humanScore").innerHTML=playerScore;
  }  compChoice=choices[Math.floor(Math.random()*choices.length)];
 
  if(playerScore == 10){
    document.getElementById("rock").disabled = true;
    document.getElementById("paper").disabled = true;
    document.getElementById("scissors").disabled = true;
  }
  else if(compScore == 10){
    document.getElementById("rock").disabled = true;
    document.getElementById("paper").disabled = true;
    document.getElementById("scissors").disabled = true;
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.