Reiniciando el juego

El object location es parte de algo que algunas personas conocen como BOM (Browser Object Modal), que se diferencia del DOM.

Si bien esto no esta estandarizado (por ejemplo no lo encontrarás en la MDN) a mi parecer es una buena manera de entenderlo.

Al final preceden de window

Les dejo este excelente recurso que ahonda más en este tema.

DOM & BOM Revisited

Apliqué disabled para cuando el jugador seleccione una mascota, no le de opción de seguir cambiando

Este objeto, el cual puede utilizarse sin el prefijo window, nos sirve tanto para obtener la url o parte de ella, de la web donde nos encontramos como para redireccionarnos hacia otra página. 😎😎

esto es lo que hice antes de ver la solución del profe

A si va quedando

Creé una nueva función para que aparezca el botón de reiniciar con el mensaje final (así no tenerlo desde un principio)

.

Mi forma de resolver este reto fue al utilizar la propiedad disabled para desactivar los botones justo despues de que se conoce si se perdio o se gano, es decir dentro de la función revisaVidas

function revisarVidas() {
    if(vidasEnemigo == 0){
        crearMensajeFinal("FELICITACIONES GANASTE✨");
        botonFuego.disabled = true;
        botonAgua.disabled = true;
        botonTierra.disabled = true;
    } else if(vidasJugador == 0) {
        crearMensajeFinal("UPS, LASTIMOSAMENTE PERDISTE😪");
        botonFuego.disabled = true;
        botonAgua.disabled = true;
        botonTierra.disabled = true;
    }
};```



![plat.jpg](https://static.platzi.com/media/user_upload/plat-d7496e19-6d13-4372-8db8-5f7664372040.jpg)

el profe hace preguntan que te replantean la vida,. duere como 1 hora pensando, como reiniciar el juego

Yo para que los botones de los ataques no funcionen una vez llegado a “0” hice esto:

function combate() {
    
    let spanVidasJugador = document.getElementById("vidas-jugador")
    let spanVidasEnemigo = document.getElementById("vidas-enemigo")

  if (vidasEnemigo > 0 && vidasJugador > 0) {
    
    if (ataqueEnemigo == ataqueJugador) {
      crearMensaje("🤝EMPATE🤝");
      ;
    } else if (
      (ataqueJugador == "FUEGO🔥" && ataqueEnemigo == "PLANTA🍃") ||
      (ataqueJugador == "AGUA💦" && ataqueEnemigo == "FUEGO🔥") ||
      (ataqueJugador == "PLANTA🍃" && ataqueEnemigo == "AGUA💦")
    ) {
      crearMensaje("🏆GANASTE!!🏆");
      vidasEnemigo--
      spanVidasEnemigo.innerHTML = vidasEnemigo
      ;
    } else {
      crearMensaje("😢 PERDISTE No te Desanimes 😢")
      vidasJugador--
      spanVidasJugador.innerHTML = vidasJugador;
      ;
    }
    revisarVidas()
  }

Y yo que estaba reiniciando todo manualmente para luego el profe mostrar que se hacia con una sola linea 😦 jsjsj

Adicionalmente, para controlar la activacion de los botones, se puede crear una función que reciba como parametro true o false. True para desactivarlos, false para activarlos.

/**
 * Cambia el estado de los botones de ataque, si están habilitados los deshabilita y viceversa.
 */
function estaDesactivadoBotonesAtaque(estado) {
    botonFuego.disabled = estado;
    botonAgua.disabled = estado;
    botonTierra.disabled = estado;
}

Asi va quedando mi version, quiero poner dos opciones mas de personaje (cada personaje tiene diferentes estadísticas).
sume más elementos y cada elemento tiene 5 ataques con diferente daño y curación(la curación sólo afecta el escudo).

estoy seguro que cuando le meta css quedará más bonito, además quiero hacer unas cards para cada personaje y para cada ataque :3

Asi va quedando:

Pensé que iba a hacer una nueva función donde volviera a poner los valores iniciales de las vidas, deschequeara la mascota seleccionada y borrara el historial de combate pero mandar a recargar la página se ve mucho más práctico XD

para mi en la function revisar vidas

Me quedo asi, al pausar la clase fui a buscar documentacion y puesss, asi quedo 😄

function validacionVidas() {
  if (vidasIA == 0) {
    mensajeFinal("¡Ganaste el Combate!")
    apagarBotones()
  } else if (vidasPlayer == 0) {
    mensajeFinal("Perdiste...")
    apagarBotones()
  }
}

function apagarBotones() {
  let btnFire = document.getElementById("btn-fire")
  btnFire.disabled = true
  let btnWater = document.getElementById("btn-water")
  btnWater.disabled = true
  let btnEarth = document.getElementById("btn-earth")
  btnEarth.disabled = true
}

yo en vez de utilizar el location reload, reinicie todas las variables que utilize para validar que se haya acabado la partida, otra que utilize para mostrar en que turno estoy y otra para que no pueda elegir una mascota despues de haver una elegido una:

function reiniciar()
{
    contador_vida_mascota_jugador = 3;//resetea los contadores de las vidas
    contador_vida_mascota_enemigo = 3;
    turno = 1;//resetea el turno inicial
    seleccionar = 1;//variable para que no vuelva a seleccionar otro personaje salvo a reset
    fin = 0;//resetea el fin del juego para que tengas que presionar resetear
    alert("Reiniciando");
    let section_mensajes = document.getElementById("mensajes");
    section_mensajes.innerHTML = " ";
}

Esta es mi opción para el boton de reinicio. Todavia no vi el método nuevo del profe. Me falta aun, borrar los mensajes de las batallas…

function reiniciarJuego (){
let spanVidasJugador = document.getElementById(‘vidas-jugador’)
let spanVidasEnemigo = document.getElementById(‘vidas-enemigo’)
vidasJugador = 3
vidasEnemigo = 3
spanVidasEnemigo.innerHTML = vidasEnemigo
spanVidasJugador.innerHTML = vidasJugador
}

Lo que yo hice fue que en la función reservas vidas al final de cada condición inserte el location.reload() y así cada vez que pierdo o gano se reinicia automáticamente

function revisarvidas(){
    if  (VidasRival == 0){
        alert("FELICIDADES HAS GANADO!! 🎇✨🎉🎊🎆")
        crearMensajefinal("FELICIDADES HAS GANADO!! 🎇✨🎉🎊🎆")
        location.reload()
    } else if(VidasPropia == 0){
        alert("HAS PERDIDO 😥😥")
        crearMensajefinal("HAS PERDIDO 😥😥")
        location.reload()

    }
}

lo hice solo un poco diferente

function combate(){
    resultado = ''
    let spamvidasJugador = document.getElementById('vidas-jugador')
    let spamvidasEnemigo = document.getElementById('vidas-ememigo')
    if (ataqueJugador == ataqueEnemigo) {
        resultado = 'EMPATASTE'
    } else if ((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA')) {
        resultado = 'GANASTE'
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1
    } else if ((ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO')) {
        resultado = 'GANASTE'   
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1       
    } else if ((ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA')) {
        resultado = 'GANASTE'   
        spamvidasEnemigo.innerHTML = vidasEnemigo = vidasEnemigo -1     
    } else {
        resultado = 'PERDISTE'
        spamvidasJugador.innerHTML = vidasJugador = vidasJugador -1
    }
    
    crearMensaje()
 }

function crearMensaje() {
    let sectionMensajes = document.getElementById('mensajes')
    
    let parrafo = document.createElement('p')
    parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', las mascota del enemigo atacó con ' + ataqueEnemigo +' '+ resultado

    sectionMensajes.appendChild(parrafo)

    revisarVidas()
}
function revisarVidas() {
    if (vidasEnemigo == 0) {
      crearMensajeFinal('FELICITACIONES!!!!! Ganaste ')
    } else if (vidasJugador == 0) {
      crearMensajeFinal('LO SIENTO MUCHO!!!! Perdiste ')
    }
  }
function crearMensajeFinal(resultadoFinal) {
    let seccion = document.getElementById('mensajes')
    let parrafo = document.createElement('p')
    parrafo.innerHTML = resultadoFinal;
    seccion.appendChild(parrafo);
    document.getElementById('boton-fuego').disabled = true
    document.getElementById('boton-agua').disabled = true
    document.getElementById('boton-tierra').disabled = true
  }

Reutilicé lo que nos enseñó para inhabilitar los botones también al elegir la mascota, justo después de seleccionar a tu mascota ya no puedes cambiarla

lo agregué en la función de seleccion de la mascota del enemigo

function seleccionarMascotaEnemigo() {
    let mascotaAleatoria = aleatorio(1,3)
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')

    if(mascotaAleatoria ==1) {
        spanMascotaEnemigo.innerHTML = 'Hipodoge'
    }
    else if(mascotaAleatoria ==2) {
        spanMascotaEnemigo.innerHTML = 'Capipepo'
    }
    else {
        spanMascotaEnemigo.innerHTML = 'Ratigueya'
    }
    let botonMascotaJugador = document.getElementById('boton-mascotas')
    botonMascotaJugador.disabled = true
}

como los botones ya fueron extraidos del document en las lineas de arriba, solo puse los nombres de los botones con su propiedad .disabled = true

<code> 
 botonMascota.disabled = true
    botonAgua.disabled = true
    botonFuego.disabled = true
    botonTierra.disabled = true
</code>

Yo lo que hice fue mover de lugar las variables de los botones a la función seleccionarMascotaEnemigo()

Yo cree una función llamada bloquearAtaques, donde use las variables de botones con su respectivo id, para ponerle con la condición de si la vidas del enemigo o jugador sean 0 se bloqueara los botones de ataques, con su respectivo llamado hacia finalizar el combate.

location.reload()

Lo consegui utilizando esto:

<location.reload()> 

Esto si estaba difiicil 😦

que bueno nunca habia visto esto 😬

A forma de criterio constructivo, estaria bueno poder iniciar con los botones de ataque en disabled TRUE y que pasen a disabled FALSE cuando ya se elija las mascotas. Del caso contrario no estariamos obligando a el usuario a que elija la mascota y este va a poder atacar sin elegir.
A modo de sugerencia…
A menos que eso sea una tarea para nosotros 😐

yo hice esto asi, cada que chekeamos una mascota y le damos en el boton de “seleccionar” automáticamente se deshabiliten los otros radio de checked.

        if(radioHipodoge.checked){
            spanMascotaJugador.innerHTML = "<b>Hipodoge</b>";
            radioCapipepo.disabled = true
            radioRatigueya.disabled = true
        }else if(radioCapipepo.checked){
            spanMascotaJugador.innerHTML = "<b>Capipepo</b>";
            radioHipodoge.disabled = true
            radioRatigueya.disabled = true
        }else if(radioRatigueya.checked){
            spanMascotaJugador.innerHTML = "<b>Ratigueya</b>";
            radioHipodoge.disabled = true
            radioCapipepo.disabled = true
        }else{
            alert("selecciona una mascota pliz :D");   
        }