Aprende JavaScript con 7 juegos 1/7 – Piedra, papel o tijeras

Por jcmuneraEducación, General, Programación

Piedra, papel o tijeras

Primero implementamos la interfaz de nuestro juego en un fichero index.html. La interfaz visualizará la elección del ordenador, la elección del usuario, el resultado y los tres botones para que el usuario pueda elegir piedra, papel o tijeras. Al presionar uno de los botones la interfaz se actualizará como corresponda.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
        <meta charset="utf-8">
        <title>Rock, paper, scissors</title>
  </head>
  <body>

      <h2>Computer: <span id="computer-choice"></span></h2>
      <h2>Your choice: <span id="user-choice"></span></h2>
      <h2>Result: <span id="result"></span></h2>

      <button id="rock">rock</button>
      <button id="paper">paper</button>
      <button id="scissors">scissors</button>

      <script src="app.js" charset="utf-8"></script>
  </body>
</html>

Creamos un fichero llamado app.js, y en este fichero referenciamos los diferentes componentes de la interfaz. Además, añadimos unas variables globales para almacenar la elección del usuario, el ordenador y el resultado (userChoice, computerChoice y result) .

onst computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result

Después capturamos el evento ‘click’ para todos los botones de la interfaz, para que al pulsar uno de los botones:

  • Se visualice la opción del usuario
  • Se genere una elección aleatoria para el ordenador (piedra, papel o tijeras = 1, 2 o 3)
  • Se visualice el resultado
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))

A continuación, implementamos la función generateComputerChoice() que genera la opción del ordenador:

function generateComputerChoice(){
  const randomNumber = Math.floor(Math.random() * 3) + 1
  if(randomNumber === 1){
    computerChoice = 'rock'
  }
  if(randomNumber === 2){
    computerChoice = 'scissors'
  }
  if(randomNumber === 3){
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

Y por último, implementamos la función que visualiza el resultado:

function getResult() {
  if(computerChoice === userChoice){
    result = 'its a draw!'
  }
  if(computerChoice === 'rock' && userChoice ==='paper'){
    result = 'you win!'
  }
  if(computerChoice === 'rock' && userChoice ==='scissors'){
    result = 'you lost!'
  }
  if(computerChoice === 'paper' && userChoice ==='scissors'){
    result = 'you win!'
  }
  if(computerChoice === 'paper' && userChoice ==='rock'){
    result = 'you lost!'
  }
  if(computerChoice === 'scissors' && userChoice ==='rock'){
    result = 'you win!'
  }
  if(computerChoice === 'scissors' && userChoice ==='paper'){
    result = 'you lost!'
  }
  resultDisplay.innerHTML = result
}

El código completo del fichero app.js:

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))

function generateComputerChoice(){
  const randomNumber = Math.floor(Math.random() * 3) + 1
  if(randomNumber === 1){
    computerChoice = 'rock'
  }
  if(randomNumber === 2){
    computerChoice = 'scissors'
  }
  if(randomNumber === 3){
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}


function getResult() {
  if(computerChoice === userChoice){
    result = 'its a draw!'
  }
  if(computerChoice === 'rock' && userChoice ==='paper'){
    result = 'you win!'
  }
  if(computerChoice === 'rock' && userChoice ==='scissors'){
    result = 'you lost!'
  }
  if(computerChoice === 'paper' && userChoice ==='scissors'){
    result = 'you win!'
  }
  if(computerChoice === 'paper' && userChoice ==='rock'){
    result = 'you lost!'
  }
  if(computerChoice === 'scissors' && userChoice ==='rock'){
    result = 'you win!'
  }
  if(computerChoice === 'scissors' && userChoice ==='paper'){
    result = 'you lost!'
  }
  resultDisplay.innerHTML = result
}

Fuente: Learn JavaScript by building 7 games de Ania Kubów