3

Buenas amigo en esta estoy estudiando basado en la metodología THE ODIN PROJECT que por cierto es muy bueno pero hay ciertas cosillas de la que creo que se pasan por alto (sin mencionar que todo es en ingles), lo cierto es que me parece muy buen inicio para comenzar esta maravillosa carrera. He investigado en los comentarios de THE ODIN PROJECT y visto varios de los códigos ya creados por otros programadores donde en esta prueba del Piedra, Papel y Tijera es donde muchos abandonan y YO aún no me doy por vencido pues creo mucho en la comunidad. A lo que voy, he intentado hacer todo sin trampas pero no puedo evitar ver los códigos de otros programadores para tratar de entender donde estoy fallando (yo creo que es algo natural) lo cierto es que en muchos código ya escritos, estos maravillosos programadores son de técnicas avanzadas donde veo que según lo que exige el proyecto como que se saltan ciertos pasos o les colocan su toque personal y bueno me es difícil llevarme al pie de letra, este es el codigo que he hecho.

// Crear una funcion que desvuelva al azar PIEDRA, PAPEL O TIJERA

// Variables globales a usar
let puntajeJugador = 0;
let puntajeMaquina = 0;
let playerSelection;
let computerSelection = computerPlay();

// Creando una funcion para iniciar el prompt
function emergente() {
  playerSelection = prompt("¿Qué eliges?\nPiedra\nPapel\nTijera", "Piedra");;
  let mensaje;
  if (playerSelection == null || playerSelection == " ") {
    mensaje = "Debes escribir algo o no podra jugar"
  } else {
    return playRound(playerSelection, computerSelection)
  }
  document.querySelector(".per").innerHTML = mensaje
}


function computerPlay() {
  let opcionAzar = Math.floor(Math.random() * 3)
  switch (opcionAzar) {
    case 0:
      return 'Piedra'
    case 1:
      return 'Papel'
    case 2:
      return 'Tijera'
  }
}

function playRound(playerSelection, computerSelection) {

  if (playerSelection == computerSelection) {
    document.querySelector(".per").innerHTML = "Estan empatados ambos han seleccionado " + playerSelection
  
  }
  else if (playerSelection == "Piedra") {
    if (computerSelection == "Papel") {
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido" + puntajeMaquina + " "
      puntajeMaquina++;
      
    }
    if (computerSelection == "Tijera") {
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      puntajeJugador++;
      
    }
  }
  else if (playerSelection == "Papel") {
    if (computerSelection == "Tijera") {
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido" + puntajeMaquina + " "
      puntajeMaquina++;
      
    }
    if (computerSelection == "Piedra") {
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      puntajeJugador++;
      
    }
  }
  else if (playerSelection == "Tijera") {
    if (computerSelection == "Piedra") {
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido" + puntajeMaquina + " "
      puntajeMaquina++;
      
    }
    if (computerSelection == "Papel") {
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      puntajeJugador++;
      
    }
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piedra, Papel, Tijera</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="contenedor">
        <h1>El resultado es:</h1>
        <button onclick="emergente()">clic</button>
        <p class="per"></p>
    </div>
    <script src="index.js"></script>
</body>
</html>

CODIGO JS



/* Escriba una NUEVA función llamada game(). Utilice la función anterior dentro de este para jugar un juego de 5 rondas que mantiene la puntuación e informa un ganador o perdedor al final. */

/* function game() {
  //let ronda = playRound(playerSelection, computerSelection)
  if (playerSelection.search("Has GANADO!")) {
    document.querySelector(".per").innerHTML ="Tu puntaje es " + puntajeJugador + " "
     puntajeJugador++;
     puntajeJugador++
     //console.log("Tu puntaje ahora es "+puntajeJugador+" ")
     console.log("Entre en he GANADO!")
  } else if (computerSelection.search("Has PERDIDO! ")) {
    document.querySelector(".per").innerHTML = "Has perdido" + puntajeMaquina +" "
     puntajeMaquina++;
     puntajeMaquina++
     console.log("El puntaje de la Maquina es "+puntajeMaquina+" ")
     console.log("Entre en he PERDIDO!")
  } 
  console.log("click")
  console.log(playerSelection)
}*/

La función que esta comentada game() la vi como algo muy innecesario y me he saltado esa parte pues realmente no he podido hacerla funcionar; lo que quisiera en que me ayudaran y es que he buscado un sin fin de info donde no le veo mi falla y que me tiene mas de una semana estancado es y es que Cuando se ejecuta la función prompt() en este agrego mi opción que predeterminadamente tengo PIEDRA y cuando la ejecuto esta me da el resultado, pero si le doy clic de nuevo al botón solo me da como resultado lo que ya haya elegido primeramente, es decir lo mismo a menos que reinicie el navegador y allí si! me da otra opción pero pierdo lo que llevo de puntuación ¿Que debiese corregir en ello? por favor.

4
  • a ver sis entendi.. tienes un problema una vez terminado el flujo del juego, en el que no se reinicia este, a menos que cierres el programa?
    – sysbot
    Commented el 11 ene. 2022 a las 4:09
  • Mira.. yo ordene tu codigo aca, y parece funcionar... podrias comprobar si es asi?
    – gbianchi
    Commented el 11 ene. 2022 a las 4:38
  • Por favor, trata de resumir más tu pregunta, recuerda que debes ser directo y claro. Commented el 11 ene. 2022 a las 8:12
  • Gracias a todos lo colaboradores, ya vi donde estaba mi falla, de verdad que les agradezco toda la buena intención SON MUY GRANDES. GRACIAS! a todos... Commented el 12 ene. 2022 a las 4:31

1 respuesta 1

5

El problema estaba en que al llamar al método playRound() en function emergente

return playRound(playerSelection, computerSelection)

Estabas llamando siempre al mismo valor de la función computerPlay() que tenías declarado arriba.

Si lo llamas al inicio nada más y lo introduces en una variable el valor siempre será el mismo.

let computerSelection = computerPlay();

Al llamar la función al inicio el valor no cambia en todo el código. Prueba a llamar a la función playRound haciendo una llamada a computerPlay() en vez de definirlo en una variable de la siguiente manera:

return playRound(playerSelection, computerPlay())

De esta manera tendrá un valor distinto cada vez que se llame a la función.

Además, si te fijas en todas los if que tienes para determinar si has perdido o ganado muestras la puntuación antes de sumar el valor al contador;

if (computerSelection == "Papel") {
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      puntajeJugador++;
      
    }

Por lo que cuando muestras la puntuación esta es incorrecta. Haz la suma de la puntuación previo a mostrarla al usuario de la siguiente manera:

if (computerSelection == "Papel") {

      puntajeJugador++;
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      
    }

Aplica esto mismo en el resto de condicionales para mostrarlo correctamente.

Además he modificado tu código para mostrar un contador permanente en el HTML.

CÓDIGO JS Y ESTRUCTURA HTML

// Crear una funcion que desvuelva al azar PIEDRA, PAPEL O TIJERA

// Variables globales a usar
let puntajeJugador = 0;
let puntajeMaquina = 0;
let playerSelection;
let computerSelection = computerPlay();

// Creando una funcion para iniciar el prompt
function emergente() {
  playerSelection = prompt("¿Qué eliges?\nPiedra\nPapel\nTijera", "Piedra");;
  let mensaje;
  if (playerSelection == null || playerSelection == " ") {
    mensaje = "Debes escribir algo o no podra jugar"
  } else {
    return playRound(playerSelection, computerPlay())
  }
  document.querySelector(".per").innerHTML = mensaje
}


function computerPlay() {
  let opcionAzar = Math.floor(Math.random() * 3)
  switch (opcionAzar) {
    case 0:
      return 'Piedra'
    case 1:
      return 'Papel'
    case 2:
      return 'Tijera'
  }
}

function playRound(playerSelection, computerSelection) {

  if (playerSelection == computerSelection) {
    document.querySelector(".per").innerHTML = "Estan empatados ambos han seleccionado " + playerSelection
  
  }
  else if (playerSelection == "Piedra") {
    if (computerSelection == "Papel") {

      puntajeMaquina++;
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido " + puntajeMaquina + " veces contra la máquina."
      
      
    }
    if (computerSelection == "Tijera") {

      puntajeJugador++;
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      
      
    }
  }
  else if (playerSelection == "Papel") {
    if (computerSelection == "Tijera") {

      puntajeMaquina++;    
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido " + puntajeMaquina + " veces contra la máquina."
      
      
    }
    if (computerSelection == "Piedra") {
      puntajeJugador++;
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      
      
    }
  }
  else if (playerSelection == "Tijera") {
    if (computerSelection == "Piedra") {

      puntajeMaquina++;
      document.querySelector(".per").innerHTML = "Has PERDIDO! " + computerSelection + " gana a " + playerSelection;
      document.querySelector(".per").innerHTML = "Has perdido " + puntajeMaquina + " veces contra la máquina."
      
      
    }
    if (computerSelection == "Papel") {

      puntajeJugador++;
      document.querySelector(".per").innerHTML = "Has GANADO! " + playerSelection + " gana a " + computerSelection;
      document.querySelector(".per").innerHTML = "Has ganado, tu puntaje es " + puntajeJugador + " "
      
      
    }
  }

  var cajaPuntuacionPropia = document.getElementById("puntuacionPropia");
  cajaPuntuacionPropia.textContent = ""
  var cajaPuntuacionOrdenador = document.getElementById("puntuacionOrdenador");
  cajaPuntuacionOrdenador.textContent = ""

  var puntuacionPropia = document.createTextNode("Tu puntuación: " + puntajeJugador);
  var puntuacionOrdenador = document.createTextNode("Puntuación ordenador: " + puntajeMaquina);
  
  

  cajaPuntuacionPropia.appendChild(puntuacionPropia);
  cajaPuntuacionOrdenador.appendChild(puntuacionOrdenador);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piedra, Papel, Tijera</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="contenedor">
        <h1>El resultado es:</h1>
        <button onclick="emergente()">clic</button>
        <p class="per"></p>
    </div>

    <div>
        <h1 id="puntuacionPropia">Tu puntuación: 0</h1>
        <h1 id="puntuacionOrdenador">Puntuación ordenador: 0</h1>
    </div>
    <script src="index.js"></script>
</body>
</html>

Espero que te sirva de ayuda y sigas aprendiendo.

1
  • Uffffff que bonito es esto de la comunidad de programadores, me gusta mucho como me lo has explicado de verdad que muchas gracias por el consejo y la orientación Commented el 12 ene. 2022 a las 4:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.