Rock Paper Scissors

made in Javascript for Jorden

by MegaScience

HTML

<table>
  <tr>
    <td colspan="3">
      <p>Lets play Rock Paper Scissors!</p>
    </td>
  </tr>
  <tr>
    <td>User</td>
    <td></td>
    <td>Computer</td>
  </tr>
  <tr>
    <td><select id="userSelection">
    <option value="0">Rock</option>
    <option value="1">Paper</option>
    <option value="2">Scissors</option>
    </select></td>
    <td><button onclick="shoot()">Shoot</button></td>
    <td><select id="compSelection" disabled>
    <option value="0">Rock</option>
    <option value="1">Paper</option>
    <option value="2">Scissors</option>
    </select></td>
  </tr>
  <tr>
    <td>User</td>
    <td>Tie</td>
    <td>Computer</td>
  </tr>
  <tr>
    <td id="userWin">0</td>
    <td id="tieWin">0</td>
    <td id="compWin">0</td>
  </tr>
  <tr>
    <td colspan="3">
      <p id="result"></p>
    </td>
  </tr>
</table>

CSS

body {
  text-align: center;
}

table {
  margin: 0 auto;
}

JavaScript

const result = function(element, message) {
	this.sElement = document.getElementById(element)
  this.message = message
  this.score = 0
}

const data = {
	static: {
  	options: document.getElementById('userSelection').options,
    compElement: document.getElementById('compSelection'),
    result: document.getElementById('result')
  },
	results: [new result('userWin', 'The player wins!'), new result('tieWin', 'It\'s a tie!'), new result('compWin', 'The computer wins!')],
  beats: [2, 0, 1]
}

const shoot = () => {
  const selectedUser = Number(data.static.options.item(data.static.options.selectedIndex).value)
  const selectedComp = data.static.compElement.value = Math.floor((Math.random() * 3))
  //`You broke the game! (User: ${selectedUser} Comp: ${selectedComp})`
  const i = data.beats[selectedUser] === selectedComp ? 0 : (selectedUser === selectedComp ? 1 : 2)
  data.results[i].sElement.textContent = ++data.results[i].score
  data.static.result.textContent = data.results[i].message
}