Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html> <head><title>Rock Paper Scissors Lizard Spock</title></head>
<body onload=updateStats()>
​
<script>
var WinList = {
    Rock: {Scissors:'Crushes', Lizard:'Crushes'},
    Paper: {Rock:'Covers', Spock:'Disproves'},
    Scissors: {Paper:'Cuts', Lizard:'Decapitates'},
    Lizard: {Spock:'Poisons', Paper:'Eats'},
    Spock: {Rock:'Vaporizes', Scissors:'Smashes'}
}
​
var Stats = { roundNo:0, cpuWins:0, humanWins:0, ties:0 };
​
function evaluateMove() {
   //process the human's move and make a CPU move
   var move=document.getElementById('moveList').value;
   if (move == 'Random'){ move = rndMove(); }
   var cpuMove = rndMove();
   document.getElementById('move').innerHTML = move;
   document.getElementById('cpuMove').innerHTML = cpuMove;
   var winner = (WinList[move][cpuMove]) ? move : cpuMove;
   var loser = (winner == move) ? cpuMove : move;
   var result = (winner == move) ? 'You Win! ' : 'Computer Wins! ';
   result += winner + ' ' + WinList[winner][loser] + ' ' + loser + '.';
   if (move == cpuMove) { result = 'Tie.'; }
   document.getElementById('winner').innerHTML = result;
   updateStats(result)
}
​
function rndMove() {
   var moveList = new Array('Rock','Paper','Scissors','Lizard','Spock');
   return moveList[Math.floor((Math.random()*5))];
}
​
function updateStats(result) {
   if (result) {
      Stats.roundNo++;
      if (result.charAt(0)=='C') { Stats.cpuWins++; }
      if (result.charAt(0)=='Y') { Stats.humanWins++; }
      if (result.charAt(0)=='T') { Stats.ties++; }
   }
   document.getElementById('roundNo').innerHTML = Stats.roundNo;
   document.getElementById('humanWins').innerHTML = formatStats('humanWins');
   document.getElementById('cpuWins').innerHTML = formatStats('cpuWins');
   document.getElementById('ties').innerHTML = formatStats('ties');
}
​
function formatStats(stat) {
   //helper function, formats stats w/ percentage
   if (Stats.roundNo) {
      return Stats[stat] + ' (' + 
         (Math.round(Stats[stat]/Stats.roundNo * 100)) + '%)';
   } else return Stats[stat] + ' (100%)';
}
​
</script>
​
<h2>Rock Paper Scissors Lizard Spock</h2>
Your move: 
<select id=moveList>
   <option>Rock</option>    <option>Paper</option>   <option>Scissors</option>
   <option>Lizard</option>  <option>Spock</option>   <option>Random</option>
</select>
<input type=button value=Go onclick=evaluateMove()><br>
<hr/>
You: <span class=box id=move>-</span>
Computer: <span class=box id=cpuMove>-</span><br>
<p><b>Result: </b><span id=winner></span></p>
<hr/>
<h3>Statistics</h3>
Games Played: <span id=roundNo></span><br>
Human Wins: <span id=humanWins></span><br>
Computer Wins: <span id=cpuWins></span><br>
Ties: <span id=ties></span>
​
</body> </html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
matt_9kpro
0viewers