Bulbasaur Charmander Squirtle

Pokemon verison of Rock Paper Scissor. Algorithm condensed to 3 if statements using math logic.

by Koding Kamp

HTML

<h1>
  Welcome to<br>
  <p class="name" id="one">Bulbasaur</p>
  <p class="name" id="two">Charmander</p>
  <p class="name" id="three">Squirtle</p>
</h1>
<div id="stats"></div>
<p />
<div id="description">
  Choose A Starter!
</div>
<div id="button-container">
  <input type="button" id="button1" class="button" onclick="play(0)" value="Bulbasaur">
  <input type="button" id="button2" class="button" onclick="play(1)" value="Charmander">
  <input type="button" id="button3" class="button" onclick="play(2)" value="Squirtle"><br>
  <input type="button" id="button4" class="button" onclick="randomPick()" value="Random*1000">
</div>

CSS

body {
  color: white;
  background-color: black;
  text-align: center;
}

.name {
  display: inline;
}

.button {
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 3px outset gray;
  color: white;
  text-shadow: 2px 1px black;
}

#button-container {
  margin-top: 20px;
}

#one {
  color: limegreen;
}

#two {
  color: orangered;
}

#three {
  color: cyan;
}

#button1 {
  background-color: limegreen;
}

#button2 {
  background-color: orangered;
}

#button3 {
  background-color: cyan;
}

#button4 {
  background-color: orange;
}

JavaScript

// variable declarations

// array for holding the option names for use with displaying to user
var choices = ["Bulbasaur", "Charmander", "Squirtle"] 
// variables for holding game stats
var wins = 0; // store total win count
var losses = 0; // store total lose count
var ties = 0; // store total tie count

// variables that point to elements for tidier code
var description = document.getElementById("description");
var stats = document.getElementById("stats");

// algorithm for rock paper scissors written with modulo
function play(x) { // x is passed when function called by button click
  // randomize computer selection (0, 1, or 2)
  var player2 = (Math.floor(Math.random() * 3));
  // for displaying options chosen
  var results = "You chose " + choices[x] + " and the Gary chose " + choices[player2] + ".<br>";

	/* Algorithm for win, lose, tie
  	B = Bulbasaur = index 0,
    C = Charmander = index 1,
    S = Squirtle = index 2;
    
    (playersChoice, computersChoice)
    B, B = tie
    B, C = lose
    B, S = win
    
    C, B = win
    C, C = tie
    C, S = lose
    
    S, B = lose
    S, C = win
    S, S = tie
    
    order is tie, lose, win wrapped around
    thus, if playerChoice == computerChoice, result is a tie
    if computerChoice was 1 more than playerChoice, result is you lose
    if computerChoice was 2 more than playerChoice, result is you win
    
    special cases when computerChoice is index 0 and playerChoice is index 2,
    result should be lose, however, 2 + 1 != 0, 2 + 1 = 3.
    thus modulo is introduced to wrap result of playerChoice index + y
    and compare that to computersChoice
    
  */
  if (x == player2) {
    description.innerHTML = "You both chose " + choices[x] + ".<br>Tie game.";
    ties++;
  } else if ((x + 1) % 3 == player2) {
    description.innerHTML = results + "You lost.";
    losses++;
  } else if ((x + 2) % 3 == player2) {
    description.innerHTML = results + "You win!";
    wins++;
  }
	
  // replace html in stats...