Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

JavaScript Rock, Paper, Scissors

By: tk104 on Dec 23rd, 2011  |  syntax: None  |  size: 6.25 KB  |  views: 2,173  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Rock Paper Scissors with JavaScript</title>
  6.         <style>
  7.             body {
  8.                 text-align: center;
  9.                 font-family: sans-serif;
  10.                 text-shadow: 1px 1px 0 #e0e0e0;
  11.             }
  12.             #scoreBoard {
  13.                 list-style-type: none;
  14.             }
  15.             h3 {
  16.                 font-size: 1.9em;
  17.             }
  18.             #scoreBoard li {
  19.                 display: inline-block;
  20.                 font-size: 1.5em;
  21.                 font-weight: bold;
  22.                 margin-left: 1em;
  23.                 margin-right: 1em;
  24.             }
  25.             #scoreBoard span {
  26.                 color: orange;
  27.             }
  28.         </style>
  29.         <script>
  30.             // Global variables to keep score.
  31.             var wins = 0, losses = 0, draws = 0;
  32.            
  33.             // Expects a maximum and minimum number.
  34.             // Returns a random number between and including the max and
  35.             // minimum numbers.
  36.             function randomInt(min, max) {
  37.                 return Math.floor(Math.random() * (max - min + 1)) + min;
  38.             }
  39.            
  40.             // Expects a string with the winning condition: win, lose, or draw.
  41.             // Expects a number. The player's choice.
  42.             // Expects a number. The computer's choice.
  43.             function msgAlert(type, player, computer) {
  44.                 var name = ["", "Rock", "Paper", "Scissors"];
  45.            
  46.                 if (type === "draw") {
  47.                     alert("Draw!\n" + "Player: " + name[player] + "\n" + "Computer: " +
  48.                             name[computer]);
  49.                 }
  50.                
  51.                 if (type === "win") {
  52.                     alert("Player won!\n" + "Player: " + name[player] + "\n" + "Computer: " +
  53.                             name[computer]);
  54.                 }
  55.                
  56.                 if (type === "lose") {
  57.                     alert("Player lost!\n" + "Player: " + name[player] + "\n" + "Computer: " +
  58.                             name[computer]);
  59.                 }
  60.             }
  61.          
  62.             // Expects a string of win, lose, or draw. Updates the score
  63.             function updateScore(call) {
  64.            
  65.                 // Make references to the scoreboard HTML elements named win, lose,
  66.                 // and draw so we can update the score numbers on the page.
  67.                
  68.                 var winEl = document.getElementById("win"),
  69.                     loseEl = document.getElementById("lose"),
  70.                     drawEl = document.getElementById("draw");
  71.            
  72.                 if (call === "draw") {
  73.                     draws++;
  74.                     drawEl.innerHTML = draws;
  75.                 }
  76.                
  77.                 if (call === "win") {
  78.                     wins++;
  79.                     winEl.innerHTML = wins;
  80.                 }
  81.                
  82.                 if (call === "lose") {
  83.                     losses++;
  84.                     loseEl.innerHTML = losses;
  85.                 }
  86.             }
  87.            
  88.             // Expects a number of 1 for rock, 2 for paper, or 3 for scissors.
  89.             function throwHand(player) {
  90.                 var computer = randomInt(1, 3);
  91.  
  92.                 // The computer var holds a random number 1, 2, or 3.
  93.                 // Key:
  94.                 // 1 = rock
  95.                 // 2 = paper
  96.                 // 3 = scissors
  97.                
  98.                 // Next, we find out if the player won, lost, or if the game
  99.                 // ended in a draw.
  100.                
  101.                 // First, we'll see if it's a draw.
  102.                 if (player === computer) {
  103.                     updateScore("draw");
  104.                     msgAlert("draw", player, computer);
  105.                 }
  106.                
  107.                 /* Rock Conditions */
  108.                
  109.                 // If player's rock vs comp's paper.
  110.                 if (player === 1 && computer === 2) {
  111.                     updateScore("lose");
  112.                     msgAlert("lose", player, computer);
  113.                 }
  114.                
  115.                 // If player's rock vs comp's scissors.
  116.                 if (player === 1 && computer === 3) {
  117.                     updateScore("win");
  118.                     msgAlert("win", player, computer);
  119.                 }
  120.                
  121.                 /* Paper Conditions */
  122.                
  123.                 // If player's paper vs comp's rock.
  124.                 if (player === 2 && computer === 1) {
  125.                     updateScore("win");
  126.                     msgAlert("win", player, computer);
  127.                 }
  128.                
  129.                 // If player's paper vs comp's scissors.
  130.                 if (player === 2 && computer === 3) {
  131.                     updateScore("lose");
  132.                     msgAlert("lose", player, computer);
  133.                 }
  134.                
  135.                 /* Scissors Conditions */
  136.                
  137.                 // If player's scissors vs comp's paper.
  138.                 if (player === 3 && computer === 2) {
  139.                     updateScore("win");
  140.                     msgAlert("win", player, computer);
  141.                 }
  142.                
  143.                 // If player's scissor vs comp's rock.
  144.                 if (player === 3 && computer === 1) {
  145.                     updateScore("lose");
  146.                     msgAlert("lose", player, computer);
  147.                 }
  148.             }
  149.         </script>
  150.     </head>
  151.     <body>
  152.         <h1>Let's Play Rock, Paper, Scissors</h1>
  153.         <h2>Instructions</h2>
  154.         <p>
  155.             Click a button to choose what to throw.
  156.         </p>
  157.         <p id="controls">
  158.             <input type="button" value="Rock" onclick="throwHand(1);">
  159.             <input type="button" value="Paper" onclick="throwHand(2);">
  160.             <input type="button" value="Scissors" onclick="throwHand(3);">
  161.         </p>
  162.         <h3>Score</h3>
  163.         <ul id="scoreBoard">
  164.             <li>
  165.                 Wins: <span id="win">0</span>
  166.             </li>
  167.             <li>
  168.                 Losses: <span id="lose">0</span>
  169.             </li>
  170.             <li>
  171.                 Draws: <span id="draw">0</span>
  172.             </li>
  173.         </ul>
  174.     </body>
  175. </html>