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

cuando en el minuto 7 deja a la mascota enemiga con -4 vidas

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

.

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. 😎😎

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

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

El profe Juan me recuerda a

A si va quedando

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

Para bloquear el boton de seleccionar jugador, justo despues de seleccionarlo seria asi:

vamos a reiniciar el juego
Esto lo vamos a realizar cuando una de las mascotas llegue a cero.
Esto lo haremos desabilitando los botones cuando se llegue a cero vidas y mostrar un boton de reiniciar
Podemos usar el método location.reload(); para que cuando se presione el botón de reiniciar, se reinicie todo el juego

function reiniciarJuego(){
    location.reload();
}

Ahora vamos a desabilitar los botones

Esto lo haremos con el atributo disabled como lejemplo podríamos tener un botón desabilitado de esta forma

<button id = "boton-fuego" disabled>Fuego 🔥</button>

Pero como lo que queremos hacer es cambiar las propiedades de un botón, haremos lo siguiente

function crearMensajeFinal(resultadoFinal){
    let sectionMensaje = document.getElementById("mensajes");

    let parrafo = document.createElement("p");
    parrafo.innerHTML = resultadoFinal;

    sectionMensaje.appendChild(parrafo);

    let botonFuego = document.getElementById("boton-fuego")
    botonFuego.disabled = true;
    let botonAgua = document.getElementById("boton-agua")
    botonAgua.disabled = true;
    let botonTierra = document.getElementById("boton-tierra")
    botonTierra.disabled = true;
}

Como podemos ver, esto va incluido en la función de mensaje final dado que se desabilitará cuando alguna de las vidas llegue a cero

Hola!

Yo hice que cuando las vidas (del enemigo o las propias) lleguen a 0, se reinicie la partida automáticamente:

function revisarVidas() {
    if (VidasEnemigo == 0) {
        location.reload()
        alert('GANASTE!!!')
        //crearMensajeFinal('GANASTE!!!')
    } else if (VidasJugador == 0) {
        location.reload()
        alert('PERDISTE :(')
        //crearMensajeFinal('PERDISTE :(')
    }
}

location.reload()🔄

Creo que ya esta todo y asi me quedo:

Una ayuda es que si sus disabled no funcionan, revisen si estan bien escritos, yo tenia dias con ese error hasta que me di cuenta que no era disable, si no disabled, con “d” al final 😂

para los HTML lovers, así lo modifican directamente desde el DOM y se ahorran 3 lineas de código 😉

document.getElementById("button-fire").disabled = true
        document.getElementById("button-water").disabled = true
        document.getElementById("button-grass").disabled = true 

Asi va quedando:

El tema de los botones y no poder usarlos lo que hice fue, que no funcionaran los botones de ataque hasta que no se eligiera una mascota, luego al momento de elegir la mascota deshabilite el boton de elegir, se coloca su respectivo nombre, vidas y comienza el juego, al momento de llegar a 0 vidas aparece tu victoria y coloque una condicional de que si alguna de las dos vidas llega a 0 los botones dejan de funcionar 😃
Estoy feliz de poder haberlo hecho hace como 4 clases atras por pura curiosidad, siento que voy por buen camino

ahh bueno con disabled queda mejor que mi solución del retrun jajajajajajjajajaa 🤪

💚Así lo hice💚:

1. Primero genero una función que me permita deshabilitar lo botones de ataque una vez que hayamos perdido o ganado.

function deshabilitarBotones(){
    let botonFuego = document.getElementById("boton-fuego")
    botonFuego.disabled = true

    let botonAgua = document.getElementById("boton-agua")
    botonAgua.disabled = true

    let botonTierra = document.getElementById("boton-tierra")
    botonTierra.disabled = true
}

1. Usamos el atributo .disabled = true para hacer que estos pierdan su uso al llamarla en la función “revisarVidas()”:

function revisarVidas(){

    if(vidasEnemigo == 0){
        crearMensajeFinal("GANASTE LA BATALLA✌")
        deshabilitarBotones()
    }else if(vidasJugador == 0){
        crearMensajeFinal("PERDISTE LA BATALLA😞")
        deshabilitarBotones()
    }

}

1. Al final creamos las siguientes variables en la función “iniciarJuego()”:

let botonReciniciar = document.getElementById("boton-reiniciar")
botonReciniciar.addEventListener("click", reiciciarjuego)

1. Para después usar “location.reload()” al hacer clic en el botón “reiniciar”:

function reiciciarjuego(){
    location.reload()
}

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.

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;
}

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

Soy nuevo en Programación. Este es mi primer curso. Como no tenia el conocimiento, busque en mi navegador, “¿Cómo recargar la página con código JS?” y me salió el código: window.location.reload() y Listo!!

¡Nunca paren de aprender! Animo!!

let ataquejugador;
let ataquealeatorioenemigo;
let vidajugador=3;
let vidaenemigo=3;

function cargarpagina(){
    let botonMascotaJugador=document.getElementById('boton_mascota');
    botonMascotaJugador.addEventListener('click',seleccionarMascotaJugador);
    
    let botonfuego=document.getElementById('boton-fuego');
    botonfuego.addEventListener('click',ataquefuego);
    let botonagua=document.getElementById('boton-agua');
    botonagua.addEventListener('click',ataqueagua);
    let botontierra=document.getElementById('boton-tierra');
    botontierra.addEventListener('click',ataquetierra);
    let boton_reiniciar=document.getElementById('boton-reiniciar');
    boton_reiniciar.addEventListener('click',reiniciarjuego);
}
function seleccionarMascotaJugador(){
    let inputhipodoge=document.getElementById('hipodoge');
    let inputcapipepo=document.getElementById('capipepo');
    let inputratigueya=document.getElementById('ratigueya');
    let nombre_tumascota=document.getElementById('nombre-tumascota');
    if (inputhipodoge.checked){
        nombre_tumascota.innerHTML='Hipodoge';
    }else if(inputcapipepo.checked){
        nombre_tumascota.innerHTML='Capipepo';
    }else if(inputratigueya.checked){
        nombre_tumascota.innerHTML='Ratigueya';
    }else{
        alert('No has seleccionado ninguna mascota');
    }
    seleccionarmascotaenemigo();  
   
}

function aleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function seleccionarmascotaenemigo(){
    let nummascotaenemigo=aleatorio(1,3);
    let spammascotaenemigo=document.getElementById('nombre-mascotaenemigo');
    
   
    if (nummascotaenemigo==1){
        spammascotaenemigo.innerHTML='Hipodoge';
    }else if (nummascotaenemigo==2){
        spammascotaenemigo.innerHTML='Capipepo';
    }else{
        spammascotaenemigo.innerHTML='Ratigueya';
    }

}

function ataquefuego(){
    ataquejugador='FUEGO';
    //alert('Escogiste atacar con: '+ ataquejugador +' Enemigo escogio: '+ aleatorioenemigo());
    crearmensaje();
} 

function ataqueagua(){
    ataquejugador='AGUA';
    //alert('Escogiste atacar con: '+ ataquejugador+' Enemigo escogio: '+ aleatorioenemigo());
    crearmensaje();
}

function ataquetierra(){
    ataquejugador='TIERRA';
    //alert('Escogiste atacar con: '+ ataquejugador+' Enemigo escogio: '+ aleatorioenemigo());
    crearmensaje();
}

function aleatorioenemigo(){
    let numaleatorioenemigo=aleatorio(1,3);

    if(numaleatorioenemigo==1){
        ataquealeatorioenemigo='FUEGO';
    }else if(numaleatorioenemigo==2){
        ataquealeatorioenemigo='AGUA';
    }else{
        ataquealeatorioenemigo='TIERRA';
    }
    return ataquealeatorioenemigo;
}

function ataque(){
    let span_vidajugador=document.getElementById('spanvidamascota')
    let span_vidaenemigo=document.getElementById('spanvidaenemigo');


    if(ataquejugador==ataquealeatorioenemigo){
        return 'Es un empate';
    }else if(ataquejugador=='AGUA' && ataquealeatorioenemigo=='FUEGO'){
        vidaenemigo--;
        span_vidaenemigo.innerHTML=vidaenemigo;
        return 'Ganaste';
        
    }else if(ataquejugador=='FUEGO' && ataquealeatorioenemigo=='TIERRA'){
        vidaenemigo--;
        span_vidaenemigo.innerHTML=vidaenemigo;
        return 'Ganaste';
        
    }else if(ataquejugador=='TIERRA' && ataquealeatorioenemigo=='AGUA'){
        vidaenemigo--;
        span_vidaenemigo.innerHTML=vidaenemigo;
        return 'Ganaste';
        
    }else{
        vidajugador--;
        span_vidajugador.innerHTML=vidajugador;
        return 'Perdiste';
    }

}   
function crearmensaje(){
    let sectionmensaje=document.getElementById('mensajes');
    let parrafo=document.createElement('p');
    parrafo.innerHTML='Escogiste atacar con: '+ ataquejugador+' Enemigo escogio: '+ aleatorioenemigo()+' - '+ataque() ;
    sectionmensaje.appendChild(parrafo);
    revisarvidas();
}
function revisarvidas(){
    if(vidaenemigo==0){
        mensajefinal("--FELICIDADES GANASTE- EL JUEGO HA TERMINADO--");
        disabledbotones();
        
    }else if(vidajugador==0){
        mensajefinal("--LO SIENTO . PERDISTE- EL JUEGO HA TERMINADO--");
        disabledbotones();
    } else {
        mensajefinal("--EL JUEGO CONTINUA--");
    }
}
function mensajefinal(resultadofinal){
    let sectionmensaje=document.getElementById('mensajes');
    let parrafo=document.createElement('p');
    parrafo.innerHTML=resultadofinal;
    sectionmensaje.appendChild(parrafo);
    
    
}
function disabledbotones(){
    let botonfuego=document.getElementById('boton-fuego');
    botonfuego.disabled=true;
    let botonagua=document.getElementById('boton-agua');
    botonagua.disabled=true;
    let botontierra=document.getElementById('boton-tierra');
    botontierra.disabled=true;
}
function reiniciarjuego(){
    location.reload();
}
    window.addEventListener('load',cargarpagina);```

location.reload() --> recarga la pagina web

disable --> atributo que desabilita elemento

También de la importancia de conocer bien la herramienta, me estaba imaginando una lógica más complicada para que no se continuara restando las cifras. como con un while y colocando un mensaje reinicia el juego algo así 🙆‍♂️

Le agrege además del boton de reiniciar uno de terminar y así quedó el código

<code> 
```function iniciarJuego() {
    let botonMascotaJugador = document.getElementById ("boton-mascota")
    botonMascotaJugador.addEventListener("click",seleccionarMascotaJugador)

    let botonFuego = document.getElementById ("boton-fuego")
    botonFuego.addEventListener("click",ataqueFuego)
    let botonAgua = document.getElementById ("boton-agua")
    botonAgua.addEventListener("click",ataqueAgua)
    let botonTierra = document.getElementById ("boton-tierra")
    botonTierra.addEventListener("click",ataqueTierra)
    let botonAire = document.getElementById ("boton-aire")
    botonAire.addEventListener("click",ataqueAire)

    let botonReiniciar = document.getElementById("boton-reiniciar")
    botonReiniciar.addEventListener("click", reiniciarJuego)

    let botonTerminar = document.getElementById("boton-terminar")
    botonTerminar.addEventListener("click", terminarJuego)

}

<code>

function reiniciarJuego(){
    location.reload()
}

function terminarJuego(){
    let terminarJuego = document.getElementById("mensaje final")
    
    let parrafo = document.createElement("p")
    parrafo.innerHTML = "¡Hasta la próxima!😊"
    terminarJuego.appendChild(parrrafo)

<code> el HTML

 

```   <section id ="Reiniciar">
                <h2><p style="color:#f0b850";>¿Quieres jugar otra vez?🎉</p></h2>
                 <button id= "boton-reiniciar">¡Empezar!</button>
                 <button id= "boton-terminar"> Quizás Mas tarde 🤐</button>
            </section> 
            <section id="mensaje final">
            </section> 

``

Yo lo colocaría en la función revisarVidas cuando ganes o pierdas, inhabilitaría los botones y enviaría un mensaje que debe reiniciar el Juego.

1:36 Yo crearía una función aparte, que cree y configure el botón de reiniciar.

En la función revisar vidas podría quedar el código para reiniciar el juego

Yo creería que se puede realizar el ejercicio después de la función revisarVidas, porque determina el final de los ataques

aggrege un nivel extra de seguiridad antes de iniciar el combate, ya que si inpeccionamos elemento al HTMl y quitamos la propiedad “disabled”, aun se puede atacar, y no queremos eso 😃 , asi que de esta manera se validamos, si no hay vidas, no se ejecute el codigo de combate , y hago un reinicio forzado del juego.

if(vidasEnemigo == 0 || vidasJugador ==0){
        alert("EL JUEGO YA FINALIZO, REINICIAR")
        reiniciarJuego()

Y yo que en las primeras clases donde empezamos a escribir el HTML, le puse una etiqueta “a”, con el atributo “href”, con el parámetro del index.html dentro del botón de reinicio. jajaja Era lo único que sabía en ése momento, no me maten jaja

woooo, esto es genial, se me ha complicado un pero, cada vez me entusiasmo más

Ahí va quedando 😉

Es bueno buscar la documentación como nos enseño el profe Juan, yo busque en google y trate de entender el problema, aunque no es fácil , pero con la práctica lo vamos a lograr!!

agregué el botón reiniciar:

 let botonReiniciar = document.getElementById('boton-reiniciar')
    botonReiniciar.addEventListener('click', reiniciar)

creé la función reiniciar:

function reiniciar(){
    let spanVidasJugador = document.getElementById('vidas-jugador')
    let spanVidasEnemigo = document.getElementById('vidas-enemigo')

    vidasJugador = 3
    vidasEnemigo = 3 
    spanVidasJugador.innerHTML = vidasJugador
    spanVidasEnemigo.innerHTML = vidasEnemigo
}

y la inicié en la función revisar vidas:

function revisarVidas(){
    if (vidasJugador == 0){
        crearMensajeFinal('Lo siento PERDISTE :(')
        reiniciar()
    }
    else if (vidasEnemigo == 0){
        crearMensajeFinal('Felicitaciones GANASTE :)')
        reiniciar()
    }
}

Seguimos con la vida al máximo

En la pausa: Yo colocaría el mensaje en la anterior función que realizamos donde aparece el mensaje final.

Para las personas que les falla (como a mi) o simplemente no quieren complicarse creando funciones para el boton de reiniciar, lo pueden hacer en una sola linea de codigo, aqui les dejo como.

Deben quitar el id del button reiniciar - Espero haber ayudado

Es increible el codigo que utilizo el profesor Juan para desabilitar los botones una vez el juego haya terminado. Despues que haya usado el codigo para desabilitar los botones del juego.

Así lo hice yo, me tocó buscar la documentación del location.reload() pero… ¡Funciona! 😄

let ataqueJugador = ""
let ataqueRival = ""
let vidasJugador = 3
let vidasRival = 3

function iniciarJuego() {
    let botonMascotaJugador = document.getElementById("boton-seleccionar-mascota")
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)

    let botonFuego = document.getElementById("boton-fuego")
    botonFuego.addEventListener("click", ataqueFuego)
    let botonAgua = document.getElementById("boton-agua")
    botonAgua.addEventListener("click", ataqueAgua)
    let botonPlanta = document.getElementById("boton-planta")
    botonPlanta.addEventListener("click", ataquePlanta)

    let botonReiniciar = document.getElementById("boton-reiniciar")
    botonReiniciar.addEventListener("click", reiniciarJuego)
}

function seleccionarMascotaJugador() {
    let inputFloxi = document.getElementById("floxi")
    let inputEchalot = document.getElementById("echalot")
    let inputColemani = document.getElementById("colemani")
    let spanMascotaJugador = document.getElementById("mascota-jugador")
    
    if (inputFloxi.checked) {
        spanMascotaJugador.innerHTML = "Floxi"
    } else if (inputEchalot.checked) {
        spanMascotaJugador.innerHTML = "Echalot"
    } else if (inputColemani.checked) {
        spanMascotaJugador.innerHTML = "Colemani"
    } else {
        alert("NO SELECCIONASTE NADA")
    } seleccionarMascotaRival()
}

function seleccionarMascotaRival() {
    let spanMascotaRival = document.getElementById("mascota-rival")
    let eleccionRival = random(1,3)
    if (eleccionRival == 1) {
        spanMascotaRival.innerHTML = "Floxi"
    } else if (eleccionRival == 2) {
        spanMascotaRival.innerHTML = "Echalot"
    } else {
        spanMascotaRival.innerHTML = "Colemani"
    }
}

function ataqueFuego() {
    if (vidasJugador > 0 && vidasRival > 0) {
        ataqueJugador = "🔥"
        ataqueAleatorio()
    } else {
        crearMensajeFinDelJuego()
    }
}

function ataqueAgua() {
    if (vidasJugador > 0 && vidasRival > 0) {
        ataqueJugador = "💧"
        ataqueAleatorio()
    } else {
        crearMensajeFinDelJuego()
    }
}

function ataquePlanta() {
    if (vidasJugador > 0 && vidasRival > 0) {
        ataqueJugador = "🌱"
        ataqueAleatorio()
    } else {
        crearMensajeFinDelJuego()
    }
}

function ataqueAleatorio() {
    let ataqueRandom = random(1,3)
    if (ataqueRandom == 1) {
        ataqueRival = "🔥"
    } else if (ataqueRandom == 2) {
        ataqueRival = "💧"
    } else {
        ataqueRival = "🌱"
    } crearMensaje()

}

function crearMensaje() {
    let sectionMensajes = document.getElementById("mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerHTML = "¡Tu mascota atacó con " + ataqueJugador + "! - ¡La mascota del rival atacó con " + ataqueRival + "! - " + decidirGanador()
    sectionMensajes.appendChild(parrafo)
    checkVidas()
}

function crearMensajeFinal(resultadoFinal) {
    let sectionMensajes = document.getElementById("mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerHTML = resultadoFinal
    sectionMensajes.appendChild(parrafo)
}

function crearMensajeFinDelJuego() {
    let sectionMensajes = document.getElementById("mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerHTML = "¡Hey! El juego terminó, si quieres jugar de nuevo debes presionar el botón de reiniciar. 😉"
    sectionMensajes.appendChild(parrafo)
}

function reiniciarJuego() {
    location.reload()
}

function decidirGanador() {
    let resultado = ""
    let spanVidaJugador = document.getElementById("vida-mascota-jugador")
    let spanVidaRival = document.getElementById("vida-mascota-rival")
    if (ataqueJugador == ataqueRival) {
        resultado = "¡EMPATE! 😐"
    } else if ((ataqueJugador == "🔥" && ataqueRival == "🌱") || (ataqueJugador == "💧" && ataqueRival == "🔥") || (ataqueJugador == "🌱" && ataqueRival == "💧")) {
        resultado = "¡GANASTE! 🥳"
        vidasRival--
        spanVidaRival.innerHTML = vidasRival
    } else {
        resultado = "¡PERDISTE! 😭"
        vidasJugador--
        spanVidaJugador.innerHTML = vidasJugador
    } return resultado
}

function checkVidas() {
    if (vidasJugador == 0) {
        crearMensajeFinal("¡Suerte para la próxima! Has perdido... 😢")
    } else if (vidasRival == 0) {
        crearMensajeFinal("¡Felicidades! ¡Has ganadooo! 😍")
    }
}

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

window.addEventListener("load", iniciarJuego)

de esta forma puedes deshabilitar todos los botones que quieras al mismo tiempo.

 let btn = document.getElementsByClassName('btn')

function msgFinal(result){
    mensajeFinal.innerHTML = result
    for (const item of btn) {
        item.disabled =true
    }

Yo escribiría el código para reiniciar el juego en la función combate.

cuando se recarga la página, y no se selecciona mascota, luego del alert, lo que hace el juego es avanzar hacia la seccion de atacar. para que ello no suceda, reutilizando la funcion Reiniciar, la coloque abajo del ultimo else dentro de la funcion seleccionarMascotaJugador. De esa forma, si no se elige una mascota, arroja la alert y se reinicia el juego
function seleccionarMascotaJugador() {
let sectionSeleccionarMascota = document.getElementById(“Seleccionar-Mascota”)
sectionSeleccionarMascota.style.display = “none”

let sectionSeleccionarAtaque = document.getElementById("Seleccionar-Ataque")
sectionSeleccionarAtaque.style.display = "block"

let inputHipodoge = document.getElementById ("hipodoge")

let inputCapipepo = document.getElementById ("capipepo")

let inputRatigueya = document.getElementById ("ratigueya")

let spanMascotaJugador = document.getElementById("mascota-jugador")

if (inputHipodoge.checked){
    spanMascotaJugador.innerHTML = "Hipodoge"

} else     if ( inputCapipepo.checked){
    spanMascotaJugador.innerHTML = "Capipepo"

} else    if( inputRatigueya.checked) {
    spanMascotaJugador.innerHTML = "Ratigueya"

} else {
    alert ("Selecciona Una Mascota")
    reiniciarJuego()

}

seleccionarMascotaEnemigo()

}

aclaro: nose de programación aún pero se me ocurrió, probé y paso jajajja

Refrescar página usando JavaScript. El método location reload() en HTML DOM se utiliza para volver a cargar el documento actual. Este método, actualiza los documentos actuales. Es muy similar al botón de actualización en el explorador.

Sintaxis del método:

location.reload( forceGet )

Referacia: https://baulcode.com/javascript/refrescar-pagina-usando-javascript-6-ejemplos-completos/

Asi lo hice 🙂

const reiniciarJuego = () => {
  window.location.reload();
}

Después de la función de revisarVidas es donde colocaría la función para reiniciar el juego.

Codificando la funcionalidad de reiniciar el juego

Recargar la pagina con location.reload()

Desabilitar botones con el atributo disabled

Desactivando botones desde javascript element.disabled = true

Se debería detallar en la función y llamarla en la otra función crearMensajeFinal

siguiente de la function crearMensajeFinal,
y asi determinar el resultado y tome la function de detener el marcador de vidas.

Hola, lo hice de esta forma, funciona pero no se si es lo mejor jejejeje

function reiniciarJuego(){
location.reload();
}

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 😐

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()

En este código hay un error, ya que si se clickquea en el botón seleccionar este no valida si se selecciono, o no la mascota y pasa directo a la sección de ataques, en otros videos había compartido un código para evitar eso, aquí se los dejo actualizado, se realizan 2 validaciones una para el botón seleccionar y la otra para los botones de ataque, hay una variable global que es la que permite hacer la magia dentro del código, es recomendable que cuando se recargue la pagina se lleve la variable a su valor inicial, aunque el reload recarga la pagina, uno nunca sabe…

Como consejo adicional y practica común, siempre es bueno realizar varias validaciones de un mismo elemento, por ejemplo si se hace un login, se debe validar tanto con el propio HTML, como con javaScript y si aplica, con leguaje sql, eso permite depurar los datos ya que si se saltan una validación o hay un fallo en un código, siempre queda uno de respaldo que evita que la información este incompleta o errada.

Para finalizar les comento un fallo como el que explique con INSTAGRAM, ya que en los perfiles privados, si abres el inspeccionar y cambias una variable no recuerdo exactamente cual, en el HTML, el perfil deja de ser privado y puedes verlo, esto pasa también en otras paginas webs, eso puede considerarse un fallo de seguridad que puedo o no ser grave, por eso es recomendable hacer la misma validación varias veces pero con diferente forma, pueden encontrar videos de ello en Youtube

Aplica una condicional dentro de la función combate para asegurarnos de que, aparte de que se bloqueen los botones, no se pueda seguir jugando si el usuario entra en la herramienta de Inspeccionar en su navegador y desactiva la propiedad ‘Disabled’.

function combate() {
  if (!(vidasJugador == 0 || vidasEnemigo == 0)) {
    let spanVidasJugador = document.getElementById("vidas-jugador");
    let spanVidasEnemigo = document.getElementById("vidas-enemigo");
    let resultado = "";
    if (ataqueJugador == ataqueEnemigo) {
      resultado = ". EMPATASTE 👌";
    } else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") {
      vidasEnemigo--;
      spanVidasEnemigo.innerHTML = vidasEnemigo;
      resultado = ". GANASTE 🎉";
    } else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
      vidasEnemigo--;
      spanVidasEnemigo.innerHTML = vidasEnemigo;
      resultado = ". GANASTE 🎉";
    } else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
      vidasEnemigo--;
      spanVidasEnemigo.innerHTML = vidasEnemigo;
      resultado = ". GANASTE 🎉";
    } else {
      resultado = ". PERDISTE ☹️";
      vidasJugador -= 1;
      spanVidasJugador.innerHTML = vidasJugador;
    }
    crearMensaje(resultado);
    revisarVidas();
  }
}

Ahora solo queda deshabilitar el button ‘selecionar’ (una vez selecionada la mascota) y listo!

Next episode🎶

revisar vidas y desabilitar ataques

function revisarVidas() {
    if(vidasEnemigo == 0) {
        crearMensajeFinal('FELICITACIONES! Ganaste')
        desabilitarAtaques()
    } else if(vidasJugador == 0) {
        crearMensajeFinal('Lo siento, Perdiste');
        desabilitarAtaques()
    }
}

function desabilitarAtaques() {
    let botonFuego = document.getElementById('boton-fuego')
    let botonAgua = document.getElementById('boton-agua')
    let botonTierra = document.getElementById('boton-tierra')
    botonFuego.disabled = true
    botonAgua.disabled = true
    botonTierra.disabled = true
}

A mi parecer la logica para frenar el juego y reiniciarlo deberia ser en la function revisarVidas, ya que en ese momento es donde se crea el mensaje final.

.disabled

Atributo que sirve para desactivar elementos del DOM.

Ejercicio 4.50, Yo utilicé location. reload (). Aún así, me parece que es mejor hallar una forma en la que se reinicié solamente el texto dinámico en vez de toda la pestaña ¿alguien tiene una mejor solución?

Pensé que utilizariamos WHILE para el combate.

yo creo que la funcion para reiniciar el juego debe estar debajo de todas las funciones porque seria lo ultimo en salir

Yo antes de ver que se podía utilizar la opción disabled, creé la variable global resultMessage he hice el siguiente código

function battle(){
    lives()
    
    if((enemysLives.innerHTML > 0) && (playersLives.innerHTML > 0)){
        roundWinner()
        createMessage()
    }
    
    if(resultMessage != 1){
        if(enemysLives.innerHTML <= 0){
            battleResult("Congrulations! You win. You're the champion!")
            resultMessage = 1
        }
        else if(playersLives.innerHTML <= 0){
            battleResult('You lost the battle, but not the war. Keep going')
            resultMessage = 1
        }
    }
} 

Como pueden ver, cuando se ejecuta el if-else, se le asigna el valor de 1 a resultMessage lo cual hace que no se puedan volver a ejecutar, debido al if que los engloba.

Excelente Profe

aqui les dejo mi codigo, generalmente intento resolver por mi cuenta el ejercico de cada video antes de verlo, para ver la diferencia entre mi solucion y la del profe 😁😁😁
sip, lo se lo se 😒😒 pude haber echo mucho mejor el codigo de la funcion restart pero fue la primera forma que se me ocurrio y prefiero terminar le proyecto que intentar hacerlo cada vez mejnor y al final nunca terminarlo como simepre me ha pasado antes, ya para el proximo proyecto lo hago mejor 😂😂😂

let playerAttack;
let enemyAtack;
let result;
let enemyRandomAtack;
let livePlayer = 3;
let liveEnemy = 3;
let selectCharacterRedy = false;


function startGame() {

    let buttonAttackFire = document.getElementById("atack-fire");
    let buttonAttackWater = document.getElementById("atack-water");
    let buttonAttackLand = document.getElementById("atack-land");
    let selectCharacter = document.getElementById("button-character");
    let restart = document.getElementById("restart")

    selectCharacter.addEventListener('click', selectCharacterPlayer);

    buttonAttackFire.addEventListener("click", attackFire);
    buttonAttackWater.addEventListener("click", attackWater);
    buttonAttackLand.addEventListener("click", attackLand);
    restart.addEventListener("click", restartGame);
}

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function petEnemy() {

    let spanEnemyAtack = document.getElementById("enemy-atack");

    enemyRandomAtack = random(1, 3);

    if (enemyRandomAtack == 1) {
        spanEnemyAtack.innerHTML = "Watter 💧💧💧";
        enemyAtack = "Watter 💧💧💧";
    } else if (enemyRandomAtack == 2) {
        spanEnemyAtack.innerHTML = "Land 🌱🌱🌱"
        enemyAtack = "Land 🌱🌱🌱";
    } else if (enemyRandomAtack == 3) {
        spanEnemyAtack.innerHTML = "Fire 🔥🔥🔥"
        enemyAtack = "Fire 🔥🔥🔥"
    } else if (enemyRandomAtack == 4) {
        spanEnemyAtack.innerHTML = "langostelvis 💧🔥"
        enemyAtack = "langostelvis 💧🔥"
    } else if (enemyRandomAtack == 5) {
        spanEnemyAtack.innerHTML = "tucapalma 💧🌱"
        enemyAtack = "tucapalma 💧🌱"
    } else if (enemyRandomAtack == 6) {
        spanEnemyAtack.innerHTML = "pydos 🌱🔥"
        enemyAtack = "pydos 🌱🔥"
    }

    combat();
}

function selectCharacterPlayer() {
    let Rimuru = document.getElementById("Rimuru");
    let Veldora = document.getElementById("Veldora");
    let Jinwoo = document.getElementById("Jinwoo");
    let spanPlayerCharacter = document.getElementById("player-character");

    if (Rimuru.checked) {
        spanPlayerCharacter.innerHTML = "Rimuru";
        Veldora.disabled = true;
        Jinwoo.disabled = true;
        selectCharacterRedy = true;
    } else if (Veldora.checked) {
        spanPlayerCharacter.innerHTML = "Veldora";
        Rimuru.disabled = true;
        Jinwoo.disabled = true;
        selectCharacterRedy = true;
    } else if (Jinwoo.checked) {
        spanPlayerCharacter.innerHTML = "Jinwoo";
        Rimuru.disabled = true;
        Veldora.disabled = true;
        selectCharacterRedy = true;
    } else {
        alert("choose a character ");
    }
}
function attackFire() {
    if (selectCharacterRedy == true) {
        playerAttack = "Fire 🔥🔥🔥";
    petEnemy()
    }else alert("choose a character ");
    
}
function attackWater() {
    if (selectCharacterRedy == true) {
        playerAttack = "Watter 💧💧💧";
    petEnemy()
    } else alert("choose a character ");
    
}
function attackLand() {
    if (selectCharacterRedy == true) {
        playerAttack = "Land 🌱🌱🌱";
    petEnemy()
    } else alert("choose a character ");
    
}


function combat() {
    if (playerAttack === enemyAtack) {
        result = "!Draw!";
    } else if (
        (playerAttack === "Fire 🔥🔥🔥" && enemyAtack === "Land 🌱🌱🌱") ||
        (playerAttack === "Land 🌱🌱🌱" && enemyAtack === "Watter 💧💧💧") ||
        (playerAttack === "Watter 💧💧💧" && enemyAtack === "Fire 🔥🔥🔥")
    ) {
        result = "!Yoy Win!";
        liveEnemy --;
    } else {
        result = "!You Lost!";
        livePlayer--;
    }

     createMessage()
}

function createMessage() {
    let buttonAttackFire = document.getElementById("atack-fire");
    let buttonAttackWater = document.getElementById("atack-water");
    let buttonAttackLand = document.getElementById("atack-land");

    let sectionMessages = document.getElementById("messages")
    let newMessages = document.createElement("p");

    let spanGamerLive = document.getElementById("gamer-live");
    let spanTextLivesPlayer = document.getElementById("text-lives-player");
    let spanEnemyLive = document.getElementById("enemy-live");
    let spanTextLivesEnemy = document.getElementById("text-lives-enemy");

    newMessages.innerHTML = "Player attacks with " + playerAttack + " enemy attack with " + enemyAtack + "" + result;

    sectionMessages.appendChild(newMessages)

    spanGamerLive.innerHTML = livePlayer;
    spanEnemyLive.innerHTML = liveEnemy;

    // si realizara esta operacion en la funcion combate, ahorro recursos al solo imprimir el valor de la vida unicamente cuando sucede una de las condiciones, con este metodo con cada repeticion, vuelve a imprimir los 2 valores aun si no hubo cambio alguno

    if (livePlayer >1) {
        spanTextLivesPlayer.innerHTML = "Lives"
    }else if (livePlayer <=1 && livePlayer >0) {
        spanTextLivesPlayer.innerHTML = "Live"
    } else {
        alert("PERDISTE 😢😢😢")
        buttonAttackFire.disabled = true;
        buttonAttackLand.disabled = true;
        buttonAttackWater.disabled = true;
    }

    if (liveEnemy >1) {
        spanTextLivesEnemy.innerHTML = "Lives"
    }else if (liveEnemy <=1 && liveEnemy >0) {
        spanTextLivesEnemy.innerHTML = "Live"
    } else {
        alert("GANASTE 🎉🎉🎉")
        buttonAttackFire.disabled= true;
        buttonAttackLand.disabled = true;
        buttonAttackWater.disabled = true;
    }
    

}

function restartGame() {
    let buttonAttackFire = document.getElementById("atack-fire");
    let buttonAttackWater = document.getElementById("atack-water");
    let buttonAttackLand = document.getElementById("atack-land");
    let spanGamerLive = document.getElementById("gamer-live");
    let spanTextLivesPlayer = document.getElementById("text-lives-player");
    let spanEnemyLive = document.getElementById("enemy-live");
    let spanTextLivesEnemy = document.getElementById("text-lives-enemy");
    let sectionMessages = document.getElementById("messages")
    let spanEnemyAtack = document.getElementById("enemy-atack");
    let spanPlayerCharacter = document.getElementById("player-character");    
    
    buttonAttackFire.disabled= false;
    buttonAttackLand.disabled = false;
    buttonAttackWater.disabled = false;
    selectCharacterRedy = false;
    Rimuru.disabled = false;
    Veldora.disabled = false;
    Jinwoo.disabled = false;
    Rimuru.checked = false;
    Veldora.checked = false;
    Jinwoo.checked = false;
    liveEnemy = 3;
    livePlayer = 3;

    spanTextLivesPlayer.innerHTML = "Lives";
    spanTextLivesEnemy.innerHTML = "Lives";
    spanGamerLive.innerHTML = livePlayer;
    spanEnemyLive.innerHTML = liveEnemy;
    sectionMessages.innerHTML ="";
    spanEnemyAtack.innerHTML ="";
    spanPlayerCharacter.innerHTML = "";
}

window.addEventListener("load", startGame);```

Lo que hice fue colocar el alert y así como Juan llamó a “CrearMensajeFinal” yo llamé a “alert”

function revisarVidas() {
    if(vidasEnemigo == 0) {
        alert("¡FELICITACIONES HAS GANADO!")
    } else if (vidas == 0) {
        alert("LO SIENTO, PERDISTE :C")
    }
}

function alert() {
    let botonFuego = document.getElementById("boton-fuego")
        botonFuego.disabled = true
        let botonAgua = document.getElementById("boton-agua")
        botonAgua.disabled = true
        let botonTierra = document.getElementById("boton-tierra")
        botonTierra.disabled = true
}

function revisarVidas() {
if (vidasEnemigo == 0) {
crearMensajeFinal(“Felicitaciones ganaste”);
toggleBotones(true);
} else if (vidasJugador == 0) {
crearMensajeFinal(“Lo siento, perdiste”);
toggleBotones(true);
}
}

function toggleBotones(estado) {
let botonFuego = document.getElementById(“boton-fuego”);
let botonAgua = document.getElementById(“boton-agua”);
let botonTierra = document.getElementById(“boton-tierra”);

botonFuego.disabled = estado;
botonAgua.disabled = estado;
botonTierra.disabled = estado;
}

function reiniciar() {
console.log(“reiniciando”);
vidasEnemigo = 3;
vidasJugador = 3;

let spanVidasJugador = document.getElementById(“vidas-jugador”);
let spanVidasEnemigo = document.getElementById(“vidas-enemigo”);

spanVidasEnemigo.innerHTML = vidasEnemigo;
spanVidasJugador.innerHTML = vidasJugador;

toggleBotones(false);

vaciarMensaje();
}

function vaciarMensaje() {
console.log(“eliminando msj”);
let sectionMensaje = document.getElementById(“mensajes”);
sectionMensaje.innerHTML = " ";
}

Esta fue mi forma de resolver la función de reinicio antes de que el profesor nos diera el método location.reload().

function botonReiniciar(){
    //reinicio boton de seleccionar mascota para que solo quede activado
    let selMascota = document.getElementById('boton-sel-mascota')
    selMascota.removeAttribute("disabled")
    //reinicio las vidas de los jugadores
    let spanVidaJugador = document.querySelector("#vidaJugador")
    let spanVidaEnemigo = document.querySelector("#vidaEnemigo")
    vidasJugador = 3
    vidasEnemigo = 3
    spanVidaEnemigo.innerHTML = vidasEnemigo
    spanVidaJugador.innerHTML = vidasJugador
    //reinicio las mascotas
    let spanMascotaJugador = document.getElementById('mascotaJugador')
    spanMascotaJugador.innerHTML=""
    let spanMascotaPc = document.getElementById('mascotaPc')
    spanMascotaPc.innerHTML=""
    //reinicio el apartado de los mensajes
    let secMensajes = document.getElementById('mensajes')
    secMensajes.innerHTML = ""
}

con estas lineas se pueden desactivar todos si se les añade el atributo
Name = “ataque”

let botones = document.getElementsByName('ataque')
        botones.forEach(boton=>{
            boton.disabled =true

programar es genial, bueno apenas estamos empezando, pero podemos llegar a ser grandes!

Cuando llega las vidas a cero puse un settimeout para que se reinicie automaticamente

function refresh() {
    let message
    document.getElementById("lifes-Player").innerHTML = contadorJugador
    document.getElementById("lifes-Pc").innerHTML = contadorPc
    if (contadorJugador == 0) {
        message = "Game Over You lose"
        createMessage(message)
        setTimeout(function (){ location.reload()},5000)
    } else if (contadorPc == 0) {
        message = "Game Over you Win"
        createMessage(message)
        setTimeout(function (){ location.reload()},5000)
    }
}

le pondria en combate por que me parece lo mas logico

Se reinicio automaticamente, tecnicamente no tiene nada errado pero algo no cuadra

¡Gracias por la clase!

Para desabilitar los botones cree una funcion aparte la cual llamo luego cuando aparecen los mensajes de ganaste o perdiste:

function disableElements () {
    let botonFuego = document.getElementById('boton-fuego')
    botonFuego.disabled = true
    let botonAgua = document.getElementById('boton-agua')
    botonAgua.disabled = true
    let botonTierra = document.getElementById('boton-tierra')
    botonTierra.disabled = true
    
}

Messirve

function revisarVidas(){
let rresultadoGuerra=document.getElementById(“resultadoGuerra”)
if(contadorEnemigo==0){

rresultadoGuerra.innerHTML=" ERES UN DURO GANASTE LA GUERRA"
}
else if( contadorJugador==0){

rresultadoGuerra.innerHTML=" JAJA VUELVE A INTENTARLO, PERDISTE LA GUERRA"

}
}