Ocultando elementos HTML con JS para mejorar la UX del juego

Gracias estimado profesor, en lo muy personal ya tengo mas de 30 años y siempre toda mi carrera me he orientado al soporte tecnico y con eso he sacado adelante a mi esposa y mis hijas, estoy queriendo cambiar el rumbo de mi vida profesional para ser Desarrollador Web y de aplicaciones, al momento siento que estoy en cero, pero quiero demostrarles a mis hijas que realmente lo que uno quiere puede lograrlo.

Un fuerte abrazo a todo el equipo de Platzi que hicieron posible este curso, y mas aun por poder tenerlo gratuito , no es facil ser sustento de familia y querer invertir en uno mismo, simplemente uno ve que siempre las cosas de los hijos son prioridad sobre nuestros deseos, y bueno, muy agradecido.

Muchas Bendiciones.

Felicidades jugador

Has finalizado la sección Desarrollando un juego con HTML y JavaScript, descansa aquí.

Por cierto, para deshabilitar los botones preferí crear una función para después llamarla en la función “crearMensajeFinal”, me parece más estético:

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

        let sectionReiniciar = document.getElementById("reiniciar")
        sectionReiniciar.style.display = "block"
}

Yo ya sabia un poquito de CSS asi que me diverti por adelantado jeje

Ya quiero ver lo que se viene!

Si se da click en el botón seleccionar sin escoger mascota, el juego permite continuar, lo que yo hice, es es disparar la función reiniciar para que no permita continuar si no se seleccionó la mascota del jugador

else{
alert(‘No se selecionó mascota’);
reiniciarJuego();
}

Me super encanta este nuevo curso! Voy entendiendo mejor que el primero que hicieron, se nota por mucho toda la planeación detrás. Me gusta también el cambio de profesores, aunque en una parte de mi corazón se queda cada uno de ellos. He aprendido muchísimo, y cada vez me siento más capaz de realizar nuevas cosas en mi camino ninja de ser desarrolladora web.

Pase mucho tiempo revisando el script porque la sección 1 no desaparecía, y resulto ser un simple error en el html.

PD: Si algo no les funciona, no olviden revisar también el html.

Mi código, no es mucho, pero es trabajo honesto:
El archivo HTML

El archivo JS

Para obtener este tipo de imágenes utilicé Carbon

En esta clase falto un detalle pequeño para el javascript,
y es que, cuando no seleccionamos una mascota y le damos al boton seleccionar, ok, nos sale una alerta de que tenemos que escoger una mascota, ahi todo bien, pero al darle aceptar a ese alert, nos lleva a elegir ataque, como si hubiesemos escogido mascota, y lo que sale es "Tu mascota tiene 3 vidas

La mascota Hipodoge (un ejemplo) del enemigo tiene 3 vidas
pero no se si solo me paso a mi o es en general, del resto, espectacular la manera de enseñar del profe, excelente!!

Quiero compartir mi código hasta la clase 31, me ha llevado algunas semanas pero creo que esta bien dentro de lo aprendido. Toca mejorar la visualizacion con html y css

Tambien les comparto algunas capturas del gameplay.

Muchas gracias Juan David, eres un gran profesor, la verdad estoy sorprendida de como poco a poco he estado aprendiendo, aunque me costo mucho trabajo.

Ya tengo 38 años y estoy decidida a realizar este rumbo en mi carrera para sacar adelante a mi hija y mis padres, la verdad hasta el momento Fredy y tu me han dado mucho animo para continuar.

Hace 2 años tuve una desagradable experiencia en un bootcam y deje este sueño a tras, pero con estos pequeños pasos se que lo lograre, tarde o temprano.

Si a alguien le pasa que no desaparece la sección de Seleccionar Mascota, revisen el HTML. Yo tenía el siguiente error:

 <section id="seleccionar-mascota"></section>
            <h2>Elige tu mascota</h2>
            
            <label for="hipodoge">Hipodoge</label>
            <input type="radio" name="mascota" id="hipodoge">

            <label for="capipepo">Capipepo</label>
            <input type="radio" name="mascota" id="capipepo">

            <label for="ratigueya">Ratigueya</label>
            <input type="radio" name="mascota" id="ratigueya">
                           
            
            <button id="boton-mascota">Seleccionar</button>

Y la solución está en la ubicación de la etiqueta de cierre </section>

<section id="seleccionar-mascota">
            <h2>Elige tu mascota</h2>
            
            <label for="hipodoge">Hipodoge</label>
            <input type="radio" name="mascota" id="hipodoge">

            <label for="capipepo">Capipepo</label>
            <input type="radio" name="mascota" id="capipepo">

            <label for="ratigueya">Ratigueya</label>
            <input type="radio" name="mascota" id="ratigueya">
                           
            
            <button id="boton-mascota">Seleccionar</button>
        
        </section>

Me gusto mucho esta opción de quitarle y ponerle algunas secciones del juego , lo hace mas interactivo. felicitaciones profe 💚💚.
ahora empecemos con CCS 💗 😃

Me encantó esta sección del curso y sobretodo esta ultima clase de mostrar y ocultar secciones! Gracias por todo Juan David!!

Como amante del modo oscuro en esta clase decidí buscar en google como añadirlo al juego y este fue el resultado:

Que genial forma de enseñar, felicitaciones Juan David sos un capo!

Muchas gracias profe JD es usted un duro.

En esta clase utilizaremos a JavaScript Para que algunas de las secciones no estén visibles todo el tiempo sino únicamente cuando se requiera

Ya que tenemos algunas cosas por mejorar

• Como la selección de una mascota, la cual no es necesaria para empezar a atacar
• El hecho de que el botón de reiniciar está habilitado todo el tiempo
• Aparece toda la información al cargar la página y solo necesitamos una parte

Para ello, vamos a utilizar

let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
sectionSeleccionarAtaque.style.display = "none";

Dado que todo el código de los ataques ya se encontraba incluida en una section solo debiamos llamarla y cambiarle los estilos

Sin embargo, cuando seleccionemos la mascota deberá llamarse una función donde se debe tener el código:

let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
sectionSeleccionarAtaque.style.display = "none";

Dado que necesitamos mostrar la sección de ataques para poder jugar

De esta manera podemos ir ocultando partes que no nos interesa mostrar, como por ejemplo el enunciado de seleccionar mascota

let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
sectionSeleccionarMascota.style.display = "none";

Así podemos ir jugando con el código para mostrar solo lo que realmente nos interesa

El código para mostrar un texto sería:

let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
sectionSeleccionarMascota.style.display = "block";

para los que se preguntan como evitar que se pueda avanzar jugando si aun no eliges un personaje se me ocurrio lo siguiente:

ejectuar los codigos de estilo que muestran y ocultan las secciones de la pagina otra vez, para que se quede exactamente como estaba
si no elijes un jugador.

Me encanta tu energia Juan, ojala hubiese mas maestros como tu, Gracias por la clase.

Gracias por todo profe JUAN, encantado de verdad de haberlo conocido a traves de estas clases y ansioso por verlo nuevos cursos para seguir aprendiendo!!!

Esta nueva dinamica en los cursos que dice: "pausa la clase mientras completas el ejerciio, Es un game changer en estos cursos. Ese pequeño detalle como nos guia y nos hace mejorar jaja! 👍

Que genialhaber creado un juego así en JavaScript, primera vez que hago algo como esto

Aquí les va mi aporte completo, espero les sirva y sea lo suficientemente descriptivo:

Gracias a prendi mucho con este maestro y pensar que iva a estrañar a Freddy cuando se fue pero eso nos hace aprender a conocer mas maestro y podemos aprender de mas personas , hice muchos metodos por mi mismo y aprendi a desarrollar mas mi logica por que pude hacer el progmama por mi propia forma son con lo que del decia trata de pensar decomo resolver hay duraba horas estudiando como hacer lo ante que lo hice mejore mucho mi logica gracias a que el nos pide que intentaramos hacer lo primero y no darnos el ejercicio echo.

Gracias profe por explicar todo esto de una manera tan pedagógica y didáctica. Me quede con la duda de sí se puede asignar los ataques a una mascota en especifico que uno elija (ejemplo ratigueya solo fuego y tierra), pero eso tratare de descubrirlo yo mismo 😄

wey! me parece que dejamos un bug, y es que aquí si le doy seleccionar sin marcar ninguno, me salta la alerta debo seleccionar mascota, pero igual pasa a combate sin mascota

<- Den like acá los que hicieron el código con los 6 Mokepones 😂😂
PD: Se olvidaron de Langostelvis, Tucapalma y Pydos

Comparto por si a alguien le sirve las dos funciones (con modificaciones) más grandes hasta el momento, iniciarJuego() y combate().

Les comparto mi avance https://madexgamer.mx/pruebas-rapidas/mokepon/
No es muy bonito, pero trate de hacerlo más interactivo, solo deshabilite los botones, según la línea del tiempo, y le añadí música, aunque en mi computadora la música si funciona bien, en mi servidor web hace cosas raras

🤯💥 ¡Esto de ocultar elementos me ha volado la cabeza!

Se me ocurren mil formas de explotar esto ahora que estoy estudiando UX.

¡Gracias!

Estoy contento tenia un problema, y era que cuando no seleccionaba la mascota pero apretaba el boton Seleccionar me aparecia el combate, pero no tenia mokepon, asi que lo solucione de la siguiente manera (esto esta escrito al final en la function Seleccionar mascota jugador)

 else {
        alert("NO SELECCIONASTE TU MOKEPON!!")
        let sectionSeleccionarMascota = document.getElementById("elija-pet")
        sectionSeleccionarMascota.style.display = "block"
    
        let sectionSeleccionarAtaque = document.getElementById("elija-skill")
        sectionSeleccionarAtaque.style.display = "none"
    }

Ha sido muy agradable el curso con las enseñanzas del profe Juan David Castro!!! Explica muy bien y motiva

• HTML File
  
  

• JavaScript File
  
  
  
  
  
  
  
  

Quede impresionado con el metodo de ocultar y mostrar los elementos del JS a nuestro HTML. Jamas imagine que esto puede ser divertido y dinamico. Fue poco tiempo que este profesor enseño HTML pero me gusto demasiado su forma de motivar en este tema y me gustaria profundizarlo un poco mas por mi cuenta. Gracias y espero verlo en algun otro curso de programacion.

¡IMPORTANTE¡ Les dejo un tutorial que funciona para poder COMAPAR archivos en VisualStudioCode. Así encontraran errores mas rápidamente.

El vídeo es corto, pero es muy, muy, muy útil, espero les pueda ayudar.

https://www.youtube.com/watch?v=CbgO6C_NuZg

Se me presentó el problema que cuando doy seleccionar mascota sin haber elegido mascota se activa el display none de la seccion de elegir mascota, es decir la oculta y ya no me deja elegir mascota y si me muestra la sección de ataques en nuestro html.

Solución propuesta:
Poner la lógica de mostrar la sección de seleccionar ataque y ocultar la sección de seleccionar mascota al final de la función selecciónMascotaEnemigo y no al inicio de la función seleccionarMascotaJugador.

function seleccionMascotaEnemigo() {
    let mascotaEnemigoAleatorio = aleatorio(1,6)
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')

    if (mascotaEnemigoAleatorio == 1) {
        spanMascotaEnemigo.innerHTML = 'Hipodoge'
    } else if (mascotaEnemigoAleatorio == 2) {
        spanMascotaEnemigo.innerHTML = 'Capipepo'
    } else if (mascotaEnemigoAleatorio == 3) {
        spanMascotaEnemigo.innerHTML = 'Ratigueya'
    }else if (mascotaEnemigoAleatorio == 4) {
        spanMascotaEnemigo.innerHTML = 'Langostelvis'
    }else if (mascotaEnemigoAleatorio == 5) {
        spanMascotaEnemigo.innerHTML = 'Tucapalma'
    } else {
        spanMascotaEnemigo.innerHTML = 'Pydos'
    }
    combateListo = 'ok'

    let sectionSeleccionarAtaque = document.getElementById('Seleccionar-ataque')
    sectionSeleccionarAtaque.style.display = 'block'

    let sectionSeleccionarMascota = document.getElementById('Seleccionar-mascota')
    sectionSeleccionarMascota.style.display = 'none'
}

Intente ocultar y mostrar las secciones y el botón de reiniciar a mi modo (antes de ver el video o las partes donde el profe dice como hacerlo) y la forma que se me ocurrió fue creando funciones y también obtuve el mismo resultado, por ejemplo:

para mostrar el botón reiniciar

function mostrarBotonReiniciar(){
let seccionBotonReiniciar=document.getElementById(‘reiniciar’);
seccionBotonReiniciar.style.display=‘block’;
}

y mande a llamar en la misma posicion donde el profe escribio el codigo. Y FUNCIONO!!! 😃

Gracias Juan David! excelente profe!

Muchas gracias al Profe Juan David, muy didáctica su forma de enseñar 👌

Hola mi proyecto es un poco distinto, en vez de mascotas preferí usar “caballero”, “arquero” y “mago” y que el oponente sea “ciclope”, “orco” y “rey esqueleto”.

Quiero compartir mi código que tiene algunas variaciones al que mostró Juan David y me gustaría que me dijeran qué les parece y qué se puede mejorar.
Muchas gracias.
![](

<!DOCTYPE html>
<html lang="es">

<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>Guerreros</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/code.js"></script>
</head>

<body>
    <h1>¡Guerreros! 🗡️ 🏹 🪄</h1>

    <section id="sec-warrior">
        <h2>Elige a tu guerrero:</h2>
        <p>
            <input type="radio" name="warrior" id="rd-knight">
            <label for="rd-knight">Caballero 🗡️</label>
            <input type="radio" name="warrior" id="rd-archer">
            <label for="rd-archer">Arquero 🏹</label>
            <input type="radio" name="warrior" id="rd-mage">
            <label for="rd-mage">Mago 🪄</label>
        </p>
        <p>
            <button id="btn-select">Seleccionar</button>
        </p>
    </section>

    <section id="sec-attack" hidden="true">
        <h2>Elige tu ataque:</h2>
        <p>Tu <span id="spn-player">guerrero</span> tiene <span id="spn-player_health">3</span> puntos de vida ❤️.</p>
        <p>El <span id="spn-enemy">enemigo</span> tiene <span id="spn-enemy_health">3</span> puntos de vida 💚.</p>
        <p>
            <button id="btn-mele">Cuerpo a cuerpo 💪</button>
            <button id="btn-range">Rango 💨</button>
            <button id="btn-magic">Magia 🔥</button>
        </p>
    </section>

    <section id="sec-messages" hidden="true">
        <p></p>
    </section>

    <section id="sec-reset" hidden="true">
        <p>
            <button id="btn-reset">Reiniciar</button>
        </p>
    </section>
</body>

</html>

function aleatorio(min, max) {
    /* 
        DESCRIPTION: Genera un número aleatorio entre el min y el max.
        PARAMETERS:
                    min = valor mínimo
                    max = valor máximo
    */
    return Math.floor(Math.random() * (max - min + 1) + min)
}


function select_enemy() {
    /* 
        DESCRIPTION: Selecciona un enemigo de forma aleatoria.
    */

    // Generar un número entre 1 y 3 que representará a un enemigo a elegir:
    // 1 = ciclop, 2 = orc y 3 = skeleton
    let enemy_number = aleatorio(1, 3)
    let enemy_name = ""
    let spn_enemy = document.getElementById("spn-enemy")

    if (enemy_number == 1) {
        enemy_name = "Cíclope"
    } else if (enemy_number == 2) {
        enemy_name = "Orco"
    } else {
        enemy_name = "Rey Esqueleto"
    }

    spn_enemy.innerHTML = enemy_name
}


function select_warrior() {
    /* 
        DESCRIPTION: Selecciona el personaje del jugador.
    */

    let sec_warrior = document.getElementById("sec-warrior")
    let sec_attack = document.getElementById("sec-attack")
    let sec_messages = document.getElementById("sec-messages")
    let rd_knight = document.getElementById("rd-knight")
    let rd_archer = document.getElementById("rd-archer")
    let rd_mage = document.getElementById("rd-mage")
    let spn_player = document.getElementById("spn-player")
    let warrior_selected = ""

    if (rd_knight.checked) {
        warrior_selected = "Caballero"
    } else if (rd_archer.checked) {
        warrior_selected = "Arquero"
    } else if (rd_mage.checked) {
        warrior_selected = "Mago"
    } else {
        alert("Debes seleccionar un guerrero para luchar")
        return // Salir de la función.
    }
    // Mostrar el jugador elegido.
    spn_player.innerHTML = warrior_selected
    alert("Has seleccionado al " + warrior_selected)
    // Ocultar la sección de selección de jugador
    sec_warrior.hidden = true
    // Mostrar las secciones de ataque y mensajes.
    sec_attack.hidden = false
    sec_messages.hidden = false

    select_enemy()
}


function lets_combat(player, enemy) {
    /* 
        DESCRIPTION: Devuelve un entero con el resultado del juego.
                     Si es 0 es empate, si es 1 gana player y si
                     es 2 gana enemy.
        PARAMETERS:
                    player = identifica el ataque del jugador.
                    enemy = identifica el ataque del enemigo.
                    1 = cuerpo a cuerpo, 2 = rango y 3 = magia
    */
    let result = 0

    if (player == enemy) {
        result = 0
    } else if (player == 1 && enemy == 2) {
        result = 1
        enemy_health -= 1 // Resto un punto de vida al enemigo.
    } else if (player == 2 && enemy == 3) {
        result = 1
        enemy_health -= 1 // Resto un punto de vida al enemigo.
    } else if (player == 3 && enemy == 1) {
        result = 1
        enemy_health -= 1 // Resto un punto de vida al enemigo.
    } else {
        result = 2
        player_health -= 1 // Resto un punto de vida al jugador.
    }

    return result
}

function translate_result(match_result) {
    /* 
        DESCRIPTION: Devuelve un texto con el resultado del combate.
        PARAMETERS:  match_result = número que indica el resultado.
                     0 = empate, 1 = victoria, 2 = derrota
    */
    
    if (match_result == 1) {
        return "¡Ganaste! 😎"
    } else if (match_result == 2) {
        return "¡Perdiste! 😢"
    } else {
        return "¡Empate! 😐"
    }

}


function translate_attack(attack_number) {
    /* 
        DESCRIPTION: Devuelve el nombre del ataque según se su número.
    */

    let selected_attack = ""

    if (attack_number == 1) {
        selected_attack = "cuerpo a cuerpo"
    } else if (attack_number == 2) {
        selected_attack = "rango"
    } else {
        selected_attack = "magia"
    }
    return selected_attack
}


function check_health() {
    /* 
        DESCRIPTION: Revisa si la vida de alguno de los contrincantes está
        en 0 lo que determinará quién ganó el juego.
    */
        
    let sec_messages = document.getElementById("sec-messages")
    let sec_reset = document.getElementById("sec-reset")
    let message = document.createElement("h2")
    let btn_magic = document.getElementById("btn-magic")
    let btn_range = document.getElementById("btn-range")
    let btn_mele = document.getElementById("btn-mele")

    if (enemy_health == 0) {
        message.innerHTML = "¡Ganaste! 🥳🏆"
    } else if (player_health == 0) {
       message.innerHTML = "¡Perdiste! 😭🥀"
    } else {
        return
    }
    
    sec_messages.appendChild(message)

    // Deshabilitar botones de ataque.
    btn_magic.disabled = true
    btn_range.disabled = true
    btn_mele.disabled = true
    // Mostrar el botón reiniciar.
    sec_reset.hidden = false
}


function show_status(match_result) {
    /* 
        DESCRIPTION: Muestra mensajes de estado del juego.
    */
    
    let sec_messages = document.getElementById("sec-messages")
    let player = document.getElementById("spn-player").innerHTML
    let enemy = document.getElementById("spn-enemy").innerHTML
    let spn_player_health = document.getElementById("spn-player_health")
    let spn_enemy_health = document.getElementById("spn-enemy_health")
    let message = document.createElement("p")
    let text_player_attack = translate_attack(player_attack)
    let text_enemy_attack = translate_attack(enemy_attack)
    let text_match_result = translate_result(match_result)

    // Actualizar puntos de vida.
    spn_player_health.innerHTML = player_health
    spn_enemy_health.innerHTML = enemy_health
    // Actualizar mensaje de estado.
    message.innerHTML = "Tu " + player + " lanza un ataque de " +
                        text_player_attack + ".<br>El " + enemy +
                        " lanza un ataque de " + text_enemy_attack + "." + 
                        "<br>" + text_match_result

    sec_messages.appendChild(message)

    check_health()
}


function attack(event) {
    /* 
        DESCRIPTION: Selecciona el ataque del jugador según el botón 
                     presionado indicado por el parámetro 
                     "event.target.id".
                     Genera un ataque aleatorio del enemigo y muestra el
                     resultado.
    */

    let match_result = 0
    let spn_player = document.getElementById("spn-player")

    // Verificar que antes de un ataque se haya seleccionado un guerrero.
    if (spn_player.innerHTML == "guerrero") {
        alert("Debes seleccionar un guerrero para poder realizar un ataque.")
        return
    }
    
    if (event.target.id == "btn-mele") {
        player_attack = 1 // Cuerpo a cuarpo
    } else if (event.target.id == "btn-range") {
        player_attack = 2 // Rango
    } else {
        player_attack = 3 // Magia
    }

    // Generar un número entre 1 y 3 que representará el ataque enemigo:
    enemy_attack = aleatorio(1, 3)

    match_result = lets_combat(player_attack, enemy_attack)

    // Mostrar mensajes de estado.
    show_status(match_result)
}


function reset_game() {
    /* 
        DESCRIPTION: Reinicia todas las opciones para jugar otra vez.
    */

    // window.location.reload() recarga la página devolviendo el html 
    // original.
    location.reload()
}


function init() {
    /* 
        DESCRIPTION: Inicializa los elementos del html.
    */
    let btn_select = document.getElementById("btn-select")
    btn_select.addEventListener("click", select_warrior)
    let btn_magic = document.getElementById("btn-magic")
    btn_magic.addEventListener("click", attack)
    let btn_range = document.getElementById("btn-range")
    btn_range.addEventListener("click", attack)
    let btn_mele = document.getElementById("btn-mele")
    btn_mele.addEventListener("click", attack)
    let btn_reset = document.getElementById("btn-reset")
    btn_reset.addEventListener("click", reset_game)
}


let player_attack = 0
let enemy_attack = 0
let player_health = 3
let enemy_health = 3

// Agregar el EventListener "load" de window para hacer uso del js.
window.addEventListener("load", init)

Pude hacerlo antes que el Profe 😀🙋

lo logre completar antes que el profe y me salió igual estoy muy feliz

POR FIN T.T, por fin hice algo yo solo y funciona: fue solo lo último adivne donde tenía que ir, gloría a Dios.
Ojalá vea este mensaje cuando sea rico 😂-
Dios te bendiga Rafa

De verdad que poco a poco uno ve que sí avanza, muchas gracias al equipo y a los profesores.

Me gustaría añadirle un poco más de complejidad a mi juego ¿alguien sabe como podría añadir puntos de defensa?

Gracias profesor por las clases me encanto todo, y pude resolver el ultimo problema, Sino seleccionaba ningun personaje para jugar, el juego seguia normal, y no salia los nombres que tenia de jugador, ni el nombre del enemigo. Mi solucion fue la siguiente:
estoy perfeccionando cada vez más , gracias por las clases ❤

estoy super orgullosa por que pude resolver el desaparecer y aparecer el boton reiniciar!!! :’)

Despues de 31 clases despues vine a entender y cogerle el tiro a todo jajaja :p

un detalle que se le fue al profe es que cuando iniciamos el juego y no elegimos la mascota, lo que debe pasar es que el juego se reinicie y no continue satandose esa parte, es seguro que mas uno lo ha visto en sus juegos, esto se soluciona colocando
location.reload() en la parte donde creas el mensaje de debe seleccionar mascota, as{i el juego vuelve al principio y no continua mostrando las siguientes secciones del juego.

if(inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = 'Hipodoge'
    } else if(inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = 'Capipepo'
        
    } else if(inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = 'Ratigueya'
        
    } else {
        alert('Debe seleccionar una mascota')
        location.reload()
    }

gracias profe juan me encanta tu actitud , ojala existieran mas profesores como usted ,nunca crei poder hacer lo que estoy haciendo pero bueno voy empezando apenas ♥️

el código actual permite realizar ataques sin seleccionar mascota, yo lo solucioné con con condicional validando que al menos un elemento de tipo radio este seleccionado, tambien puse el codigo ocultar la sección de ataque en ese condicional, así me aseguro que no se muestre sin haber seleccionado una mascota

function verificarMascota() {
    if((inputHipodoge.checked)||(inputCapipepo.checked)||(inputLangostelvis.checked)||(inputPydos.checked)||(inputRatigueya.checked)||(inputTucapalma.checked)){
        return true
    }else {
        return false
    }
}

function selecionarMascotaJugador(){
    
    let mascotaJugador = document.getElementById('mascota-jugador')

    if(inputHipodoge.checked){
        mascotaJugador.innerHTML = ' Hipodoge'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else if(inputCapipepo.checked){
        mascotaJugador.innerHTML = ' Capipepo'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else if(inputRatigueya.checked){
        mascotaJugador.innerHTML = ' Ratigueya'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else if(inputLangostelvis.checked){
        mascotaJugador.innerHTML = ' Langostelvis'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else if(inputTucapalma.checked){
        mascotaJugador.innerHTML = ' Tucapalma'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else if(inputPydos.checked){
        mascotaJugador.innerHTML = ' Pydos'
        seccionSeleccionarAtaque.style.display = 'block'
        seccionSeleccionarMascota = document.getElementById('seleccionar-mascota')
        seccionSeleccionarMascota.style.display = 'none'
    } else {
        alert("Debe seleccionar una masota ")
    }
    selecionarMascotaEnemigo()
}

Mi solución para la el minuto 11:00

	// Iniciar Juego
    let sectionBotonReiniciar = document.getElementById("boton-reiniciar")
    sectionBotonReiniciar.style.display = "none"
	
	//Crear Mensaje Final
    let sectionBotonReiniciar = document.getElementById("boton-reiniciar")
    sectionBotonReiniciar.style.display = "block"

Creo q lo extrañare Profe jajaaj

Gracias profe, nunca creí que podia lograr algo así, aunque me explicaran.🙂

Gracias por estos conceptos, ya es solo de ponerlo en práctica.

Gracias 🙂

Para ocultar periodicamente alguna sección de HTML usamos el método: style.display = “none”

Para hacerla aparecer a pantalla usamos el metodo:
style.display = “block”

Muchas Gracias profesor… es usted el mejor

Yo colocarìa el còdigo en la función donde se comienza el principio del juego

gg ez Computadora

los puse, teniendo el video pausado en el minuto 11:04’… en la function iniciarJuego oculte la sectionReiniciar y luego, en la function crearMensajeFinal al final del codigo para que se visualice el boton

Primero que nada agradecer por la clase es uno de los mejores profes que tiene Platzi.

Y otra para aportar una solución en el dado caso donde no seleccionemos ninguna mascota, solo sale una alerta pero nos permitía seguir jugando sin mascota.

La solución que yo encontré fue en la función seleccionarMascotaJugador lo siguiente:

function seleccionarMascotaJugador(){
    let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
    sectionSeleccionarAtaque.style.display = "block"
    let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
    sectionSeleccionarMascota.style.display = "none"


    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")
        let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
        sectionSeleccionarAtaque.style.display = "none"
        let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
        sectionSeleccionarMascota.style.display = "block"
        let sectionSeleccionarReiniciar = document.getElementById("reiniciar")
    sectionSeleccionarReiniciar.style.display = "block"
    }
    seleccionarMascotaEnemigo()
}

Excelente curso logre hacer una gran base de datos con las funciones explicadas.

Pronto podremos hacer proyectos mas complicados al nunca parar de aprender

¡Muchas gracias profe Juan! usted sí que sabe orientarnos de una manera didáctica lo cual torna la clase más amena .

<p>profesor, le agradezco que compartiera su conocimiento, lo comprendi muy bien.</p>

Asi quedo mi codigo al final:

<let ataqueJugador 
let ataqueEnemigo
let resultado
let vidasEnemigo = 3
let vidasJugador = 3 


function iniciarJuego(){
    let sectionSeleccionarAtaque = document.getElementById('seleccionarAtaque')
    sectionSeleccionarAtaque.style.display = 'none'

    let sectionReiniciar = document.getElementById('reiniciar')
    sectionReiniciar.style.display = 'none'

    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 botonReiniciar = document.getElementById('boton_reiniciar')
    botonReiniciar.addEventListener('click', reiniciarJuego)
}


function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById('hipodoge').checked
    let inputCapipepo = document.getElementById('capipepo').checked
    let inputRatigueya = document.getElementById('ratigueya').checked
    let spanMascotaJugador = document.getElementById('mascotaJugador')
    let sectionSeleccionarAtaque = document.getElementById('seleccionarAtaque')
    let sectionSeleccionarMascota = document.getElementById('seleccionarMascota')

    if (inputHipodoge){
        //alert("seleccionaste a Hipodoge")
        spanMascotaJugador.innerHTML = "Hipodoge"
        sectionSeleccionarAtaque.style.display = 'block'
        sectionSeleccionarMascota.style.display = 'none'
    }else if (inputCapipepo){
        //alert("seleccionaste a Capipepo")
        spanMascotaJugador.innerHTML = "Capipepo"
        sectionSeleccionarAtaque.style.display = 'block'
        sectionSeleccionarMascota.style.display = 'none'
    }else if (inputRatigueya){
        //alert("seleccionaste a Ratigueya")
        spanMascotaJugador.innerHTML = "Ratigueya"
        sectionSeleccionarAtaque.style.display = 'block'
        sectionSeleccionarMascota.style.display = 'none'
    }else{
        alert("Debes seleccionar una mascota")
        spanMascotaJugador.innerHTML = ""
    }

    seleccionarMascotaEnemigo()
}


function seleccionarMascotaEnemigo(){
    let spanMascotaEnemigo = document.getElementById('mascotaEnemigo')
    let mascotaEnemigo = aleatotio(1, 3)
    if(mascotaEnemigo == 1){
        spanMascotaEnemigo.innerHTML = "Hipodoge"
    }else if(mascotaEnemigo == 2){
        spanMascotaEnemigo.innerHTML = "Capipepo"
    }else if(mascotaEnemigo == 3){
        spanMascotaEnemigo.innerHTML = "Ratigueya"
    }
}


function ataqueFuego(){
    ataqueJugador = 'FUEGO 🔥'
    seleccionarAtaqueEnemigo()
}

function ataqueAgua(){
    ataqueJugador = 'AGUA 💧'
    seleccionarAtaqueEnemigo()
}

function ataqueTierra(){
    ataqueJugador = 'TIERRA 🌱'
    seleccionarAtaqueEnemigo()
}

function seleccionarAtaqueEnemigo(){
    let ataqueEnemigo = aleatotio(1, 3)
    if(ataqueEnemigo == 1){
        ataqueEnemigo = 'FUEGO 🔥'
    }else if(ataqueEnemigo == 2){
        ataqueEnemigo = 'AGUA 💧'
    }else if(ataqueEnemigo == 3){
        ataqueEnemigo = 'TIERRA 🌱'
    }

    combate(ataqueEnemigo)
}

function combate(ataqueEnemigo){
    let spanVidasJugador = document.getElementById('vidas_jugador')
    let spanVidasEnemigo = document.getElementById('vidas_enemigo')
    if(ataqueEnemigo == ataqueJugador){
        //alert("Empate")
        resultado = 'Empataste 😬'
    }else if(ataqueJugador == 'FUEGO 🔥' && ataqueEnemigo == 'TIERRA 🌱'){
        //alert("Ganaste!!")
        resultado = 'Ganaste 🎉'
        vidasEnemigo -= 1
        spanVidasEnemigo.innerHTML = vidasEnemigo
    }else if(ataqueJugador == 'AGUA 💧' && ataqueEnemigo == 'FUEGO 🔥'){
        //alert("Ganaste!!")
        resultado = 'Ganaste 🎉'
        vidasEnemigo -= 1
        spanVidasEnemigo.innerHTML = vidasEnemigo
    }else if(ataqueJugador == 'TIERRA 🌱' && ataqueEnemigo == 'AGUA 💧'){
        //alert("Ganaste!!")
        resultado = 'Ganaste 🎉'
        vidasEnemigo -= 1
        spanVidasEnemigo.innerHTML = vidasEnemigo
    }else{
        //alert("PERDISTE")
        resultado = 'Perdiste 😔'
        vidasJugador -= 1
        spanVidasJugador.innerHTML = vidasJugador
    }
    
    revisarVidas()
    crearMensaje(ataqueEnemigo)
}


function revisarVidas(){
    if(vidasJugador == 0){
        alert("Que pena perdiste 😔")
        crearMensajeFinal("Que pena perdiste 😔")
    }else if(vidasEnemigo == 0){
        alert("Felicidades Ganaste!! 🎉")
        crearMensajeFinal("Felicidades Ganaste!! 🎉")
    }
}

function crearMensaje(ataqueEnemigo){
    let sectionMensaje = document.getElementById('mensajes')
    let parrafo = document.createElement('p')
    parrafo.innerHTML = "Tu mascota ataco con " + ataqueJugador + ", la mascota de tu enemigo ataco con " + ataqueEnemigo + " - " + resultado
    sectionMensaje.appendChild(parrafo) 
}

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

    let sectionReiniciar = document.getElementById('reiniciar')
    sectionReiniciar.style.display = 'block'
}

function reiniciarJuego(){
    location.reload()
}

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


window.addEventListener('load', iniciarJuego)

> 

alucinante todo perfecto soy un genio de la programacion lets go !!!

gracias Profe 😃

Gracias Profesor Juan David me gusto un monton las clases aprendi Mucho !!!

Tuve un problema al querer ocultar la sección de “seleccionar-mascota”, copie y pague la función, la volvía a escribir letra por letra, la cambiaba de orden y parecía que nada funcionaba. Luego recibe mi html y me di cuenta que la etiqueta </section> estaba mal cerrada. Se soluciono y mi presión arterial regreso a la normalidad.

Cuando se da click en Seleccionar sin elegir una mascota, el codigo sigue su ejecucion, pera ello, en lugar de usar ela función reinicarJuego(), usé esto. Ya que evita ese “salto de pantalla” cuando se recarga la pagina, haciendo que visualmente se vea un poco mejor

} else {
        alert("Selecciona una mascota")
        sectionSeleccionarMascota.style.display = "block";
        sectionSeleccionarAtaque.style.display = "none";
    }

Hice que apareciera con elemet.style.display = “contents” para mayor info de display visita https://developer.mozilla.org/es/docs/Web/CSS/display

/ * Valores <display-box> * /
display: none; // desaparece
display: contents; // aparece

Muchas gracias al profe Juan David, tienes el espíritu de la enseñanza en tu interior, lo cual hace que los estudiantes aprendan muy fácilmente. Espero que el resto de profes lo hagan igual de bien, lo cual no pongo en duda porque Platzi es lo mejor.

Una locura lo que he aprendido eneste curso, muy superior al primer la verdad. me estube quebrando la cabeza en los ultimos 2 video por un error que me daba, pero lo logre solucionar. tengo que agradecer al profe y decirle que espero verlo en algun otro curso, un saludo crack!

Muchas gracias JuanDC, primer curso que veo contigo, excelente pedagogía y dinámica para enseñar. Nos vemos pronto 💪💪💪

Muchas gracias por tus aulas Juan, me divertí mucho desarrolando mi proyecto

Ante todo, un cordial saludo profe Juan y un abrazo. le agradezco por ser una persona sumamente positiva y atenta en dar la mejor clase, logre comprender algo que realmente no tenía ni la más mínima idea de que hacer. es mi primera vez estudiando algo desde cero, tengo 23 años migrante en chile y sé que soy una joven promesa, apenas pueda lograre dar mi aporte a esta hermosa comunidad. gracias platzy

Gracias profe David, su energía de enseñanza es motivadora.

Ocultando elementos HTML con JS para mejorar la UX del juego

Es importante recordar que en una página web no tenemos una sola cosa, tenemos HTML+CSS+JAVASCRIPT

Un genio Juan, gracias por las clases.

esta parte del curso es genial, la actitud de profe es muy pagajosa, asi si dan ganas de seguir estudiando. aun que aun me causa conflicto a la hora de llamar funciones de un lado a otro, pero tendre paciencia y volvere a ver unas clases

También funciona si se añade el método style.display = ‘none’ para esconder Elige tu mascota, en la función ataqueAleatoriEnemigo()

Mi HTML hasta ahora:

Mi JS hasta ahora:

Excelente profesor Juan David, desborda mucha energía , se nota que le gusta lo que hace 😄

que buen curso!!

Les comparto mi solución final en JS

let ataqueJugador
let ataqueEnemigo
let vidasJugador = 3
let vidasEnemigo = 3

function iniciarJuego() {
    let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
    sectionSeleccionarAtaque.style.display = "none"

    let sectionReiniciar = document.getElementById("reiniciar")
    sectionReiniciar.style.display = "none"

    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 botonReiniciar = document.getElementById("boton-reiniciar")
    botonReiniciar.addEventListener("click", reiniciarJuego)

}

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("Por favor seleccione una mascota")
        sectionSeleccionarMascota.style.display = "block"
        sectionSeleccionarAtaque.style.display = "none"
    }
     
     seleccionarMascotaEnemigo()
}

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 if (mascotaAleatoria == 3) {
        spanMascotaEnemigo.innerHTML = "Ratigueya"
    }
}

function ataqueFuego() {
    ataqueJugador = "Fuego"
    ataqueAleatorioEnemigo()
}

function ataqueAgua() {
    ataqueJugador = "Agua"
    ataqueAleatorioEnemigo()
}

function ataqueTierra() {
    ataqueJugador = "Tierra"
    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(1,3)

    if (ataqueAleatorio == 1) {
        ataqueEnemigo = "Fuego"
    } else if (ataqueAleatorio == 2) {
        ataqueEnemigo = "Agua"
    } else if (ataqueAleatorio == 3) {
        ataqueEnemigo = "Tierra"
    }

    combate()
}

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

    if(ataqueEnemigo == ataqueJugador) {
        crearMensaje("EMPATE 👍")
    
    } else if(ataqueJugador == "Fuego" && ataqueEnemigo == "Tierra") {
        crearMensaje("GANASTE 🥳")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo

    } else if(ataqueJugador == "Agua" && ataqueEnemigo == "Fuego") {
        crearMensaje("GANASTE 🥳")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo

    } else if(ataqueJugador == "Tierra" && ataqueEnemigo == "Agua") {
        crearMensaje("GANASTE 🥳")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo

    } else {
        crearMensaje("PERDISTE 😥")
        vidasJugador--
        spanVidasJugador.innerHTML = vidasJugador
    }

    revisarVidas()
}

function revisarVidas() {
    if (vidasEnemigo == 0) {
        crearMensajeFinal("FELICIDADES, GANASTE")
    } else if (vidasJugador == 0) {
        crearMensajeFinal("LO SENTIMOS, PERDISTE")
    } 
} 

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

    sectionMensajes.appendChild(parrafo)
}

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

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

    let sectionReiniciar = document.getElementById("reiniciar")
    sectionReiniciar.style.display = "block"
}

function reiniciarJuego() {
    location.reload()
}



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


window.addEventListener("load", iniciarJuego)

Y pooom, terminamos con esta parte.

Este es mi aporte final no es alfo diferente pero funcionaaaa

let ataqueJugador 
let ataqueEnemigo
let NombreMascotaRival
let NombreMascotaPersonal
let VidasRival =3
let VidasPropia=3



function iniciarJuego(){
    let sectionSeleccionarAtaque = document.getElementById("Seleccionar-ataque")
    sectionSeleccionarAtaque.style.display ="none"
    
    let sectionReiniciar= document.getElementById("Reiniciar")
    sectionReiniciar.style.display = "none"

    let botonMascotaJugador = document.getElementById("boton-mascota")
    botonMascotaJugador.addEventListener("click", SelectionccionarMascotaJugador)

    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 botonReiniciar = document.getElementById("boton-reiniciar")
    botonReiniciar.addEventListener("click", reiniciarJuego)
}

function SelectionccionarMascotaJugador(){
    let sectionSeleccionarAtaque = document.getElementById("Seleccionar-ataque")
    sectionSeleccionarAtaque.style.display ="block"

    let sectionSeleccionarMascota = document.getElementById("Seleccionar-mascota")
    sectionSeleccionarMascota.style.display ="none"

    let inputHipodoge = document.getElementById(" Hipodoge")
    let inputCapipepo = document.getElementById(" Capipepo")
    let inputRatiguella = document.getElementById(" Ratiguella")
    let inputPreyas = document.getElementById(" Preyas")
    let spanMascotaJugador = document.getElementById("mascota-jugador")

    if(inputHipodoge.checked){
        spanMascotaJugador.innerHTML = "Hipodoge"
        NombreMascotaPersonal = "Hipodoge"
    } else if(inputCapipepo.checked){
        spanMascotaJugador.innerHTML = "Capipepo"
        NombreMascotaPersonal = "Capipepo"
    }else if(inputRatiguella.checked){
        spanMascotaJugador.innerHTML = "Ratiguella"
        NombreMascotaPersonal = "Ratiguella"
    }else if(inputPreyas.checked){
        spanMascotaJugador.innerHTML = "Preyas"
        NombreMascotaPersonal = "Preyas"
    }else{
         alert("Por favor ¡¡Selecciona una mascota!!")

         reiniciarJuego()
    } 
    SeleccionarMascotaRival()
}
function SeleccionarMascotaRival(){
    let mascotaAleatorio = aleatorio(1,4)
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
    
    if (mascotaAleatorio == 1){
        spanMascotaEnemigo.innerHTML = "Hipodoge"
        NombreMascotaRival= ("Hipodoge")
    } 
    else if(mascotaAleatorio == 2){
         spanMascotaEnemigo.innerHTML = "Capipepo"
         NombreMascotaRival=("Capipepo")
    } 
    else if(mascotaAleatorio == 3){
        spanMascotaEnemigo.innerHTML = "Ratiguella"
        NombreMascotaRival=("Ratiguella")
    } 
    else if(mascotaAleatorio == 4){
        spanMascotaEnemigo.innerHTML = "Preyas"
        NombreMascotaRival=("Preyas")
    }
}
function ataqueFuego(){
    ataqueJugador = "Fuego"
    ataqueAleatorioEnemigo()
}
function ataqueAgua(){
    ataqueJugador = "Agua"
    ataqueAleatorioEnemigo()
}
function ataqueTierra(){
    ataqueJugador = "Tierra"
    ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(1,3)
    
    if (ataqueAleatorio == 1){
        ataqueEnemigo = "Fuego"
    } 
    else if(ataqueAleatorio == 2){
        ataqueEnemigo = "Agua"
    } 
    else if(ataqueAleatorio == 3){
        ataqueEnemigo = "Tierra"
    } 
   combate()
}
function combate(){
    let spanVidasJugador = document.getElementById("vidas-jugador")
    let spanVidasEnemigo = document.getElementById("vidas-enemigo")

    if(ataqueEnemigo == ataqueJugador){
        crearMensaje(" Empate")
    } else if(ataqueJugador == "Fuego" && ataqueEnemigo == "Tierra" || ataqueJugador == "Agua" && ataqueEnemigo == "Fuego" || ataqueJugador == "Tierra"  && ataqueEnemigo == "Agua" ){
        crearMensaje(" GANASTE!!")
        VidasRival--
        spanVidasEnemigo.innerHTML = VidasRival
        
    } else {
        crearMensaje(" Perdiste!!")
        VidasPropia--
        spanVidasJugador.innerHTML = VidasPropia
       
    }
    revisarvidas()
}
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()

    }
}

function crearMensaje(resultadoBatalla){
    let sectionMensajes = document.getElementById("Mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerText= "Tu mascota " + NombreMascotaPersonal  +" atacó con "+ ataqueJugador + " la mascota del enemigo " + NombreMascotaRival +" atacó con " + ataqueEnemigo + " " + resultadoBatalla

    sectionMensajes.appendChild(parrafo)
}
function crearMensajefinal(resultadoFinal){
    let sectionMensajes = document.getElementById("Mensajes")
    let parrafo = document.createElement("p")
    parrafo.innerText= resultadoFinal

    sectionMensajes.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
    
    let sectionReiniciar= document.getElementById("Reiniciar")
    sectionReiniciar.style.display = "block"
    

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

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

window.addEventListener("load", iniciarJuego)```

este es mi codigo, saben por que cuando llega a 0 vidas el enemigo no sale gane, solo sale perdiste cuando pierdo, ayuda!!

let ataquejugador
let ataqueEnemigo
let vidaEnemigo = 3
let VidaJugador = 3
function iniciarjuego(){
let seccionAtaqueOculta = document.getElementById(“seleccionar-ataque”)
seccionAtaqueOculta.style.display = "none"
let seccionReiniciar = document.getElementById(“reiniciar”)
seccionReiniciar.style.display = “none”

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 botonReiniciar = document.getElementById("boton-reiniciar")
botonReiniciar.addEventListener("click", reiniciarJuego)

}

function seleccionarMascotaJugador(){
let seccionMascotaOculta= document.getElementById(“seleccionar-mascota”)
seccionMascotaOculta.style.display = “none”

let seccionAtaqueOculta = document.getElementById("seleccionar-ataque")
seccionAtaqueOculta.style.display = "block"


let input1 = document.getElementById("hipoge")
let input2 =  document.getElementById("capipepo")
let input3 = document.getElementById("ratigueya")
let input4 = document.getElementById("langostelvis")
let input5 = document.getElementById("tucapalma")
let input6 = document.getElementById("pydos")
let spanmascotajugador = document.getElementById("mascota-jugador")

if (input1.checked) {
   spanmascotajugador.innerHTML = "hipoge"
}
else if (input2.checked) {
    spanmascotajugador.innerHTML = "capipepo"
}
else if (input3.checked) {
    spanmascotajugador.innerHTML = "ratigueya"
}
else if (input4.checked) {
    spanmascotajugador.innerHTML = "langostelvis"
}
else if (input5.checked) {
    spanmascotajugador.innerHTML = "tucapalma"
}
else if (input6.checked) {
    spanmascotajugador.innerHTML = "pydos"
}
else{
    alert("selecciona un jugador")
}

seleccionarMascotaEnemigo()

}

function seleccionarMascotaEnemigo(){
let mascotaEnemigo = aleatorio(1,6)
let spanmascotaenemigo = document.getElementById(“mascota-enemigo”)

if(mascotaEnemigo == 1){
    spanmascotaenemigo.innerHTML = "hipoge"
}
else if(mascotaEnemigo == 2){
    spanmascotaenemigo.innerHTML = "capipepo"
}
else if(mascotaEnemigo == 3){
    spanmascotaenemigo.innerHTML = "ratigueya"
}
else if(mascotaEnemigo == 4){
    spanmascotaenemigo.innerHTML = "langostelvis"
}
else if(mascotaEnemigo == 5){
    spanmascotaenemigo.innerHTML = "tucapalma"
}
else if(mascotaEnemigo == 6){
    spanmascotaenemigo.innerHTML = "pydos"
}

}

function ataqueFuego(){
ataquejugador = "FUEGO"
ataqueAleatorioEnemigo()

}
function ataqueAgua() {
ataquejugador = "AGUA"
ataqueAleatorioEnemigo()

}
function ataqueTierra(){
ataquejugador = "TIERRA"
ataqueAleatorioEnemigo()

}

function ataqueAleatorioEnemigo(){
let ataquealeatorio = aleatorio(1,3)

if(ataquealeatorio == 1){
    
    ataqueEnemigo = "FUEGO"
}
else if (ataquealeatorio == 2){
    ataqueEnemigo = "AGUA"
}
else if (ataquealeatorio == 3){
    ataqueEnemigo= "TIERRA"
    
}

combate()

}

function combate(){
let spanVidaJugador = document.getElementById(“vida-jugador”)
let spanVidaEnemigo = document.getElementById(“vida-enemigo”)

     if(ataqueEnemigo==ataquejugador){
        crearMensaje("EMPATE")
    } else if (ataquejugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
        crearMensaje("GANASTE")
        vidaEnemigo --
        spanVidaEnemigo.innerHTML = vidaEnemigo
       
    } else if (ataquejugador == "AGUA" && ataqueEnemigo == "FUEGO" ){
        crearMensaje("GANASTE")
        vidaEnemigo --
        spanVidaEnemigo.innerHTML = vidaEnemigo
        
    } else if (ataquejugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        crearMensaje("GANASTE")
        vidaEnemigo --
        spanVidaEnemigo.innerHTML = vidaEnemigo
        
    } else {
        crearMensaje("PERDISTE")
        VidaJugador = VidaJugador - 1
        spanVidaJugador.innerHTML = VidaJugador
       
        
        revisarVidas()
        
    }


}

function revisarVidas(){
   
    if(vidaEnemigo == 0) {
        crearMensajeFinal("FELICIDADES GANASTE 🎉🎉⚔")
    } else if (VidaJugador == 0) {
        crearMensajeFinal("PERDISTE, LO SIENTO 😢")
    } 
   
}

function crearMensaje(resultado){
let seccionMensaje = document.getElementById(“mensajes”)
let parrafo = document.createElement(“p”)
parrafo.innerHTML = “tu mascota ataco con " + ataquejugador + " " + “, la macota del enemigo con " + ataqueEnemigo +”-” + resultado
seccionMensaje.appendChild(parrafo)
}
function crearMensajeFinal(resultadoFinal){
let seccionMensaje = document.getElementById(“mensajes”)
let parrafoFinal = document.createElement(“p”)
parrafoFinal.innerHTML = resultadoFinal
seccionMensaje.appendChild(parrafoFinal)

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

let seccionReiniciar = document.getElementById("reiniciar")
seccionReiniciar.style.display = "block"

}

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

window.addEventListener(“load”, iniciarjuego)

Este es mi aporte, no es mucha la diferencia, por si a alguien le ayude o le sirva.

El HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    </meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </meta>
    <script src="./js/app.js"></script>
    <title>Mokepon! 🔥</title>
</head>
<body>
    <h1>Mokepon! 🔥💧🌱</h1>
    <section id="seleccionar-mascotas">
        <h2>Elije tu mascota: </h2>
        <label for="hipodoge">Hipodoge</label>
        <input type="radio" name="mascota" id="hipodoge">
        <label for="capipepo">Capipepo</label>
        <input type="radio" name="mascota" id="capipepo">
        <label for="ratigueya">Ratigueya</label>
        <input type="radio" name="mascota" id="ratigueya">
        <button id="boton-mascota">Seleccionar</button>
    </section>

    <section id="seleccionar-ataque">
        <h2>Elije tu ataque: </h2>
        <p>
            <button id="boton-fuego">Fuego 🔥</button>
            <button id="boton-agua">Agua 💧</button>
            <button id="boton-tierra">Tierra 🌱</button>
        </p>
        <p>Tu mascota <span id="mascota-jugador"></span> tiene <span id="vida-jugador">5</span> vidas</p>
        <p>La mascota <span id="mascota-enemigo"></span> del enemigo tiene <span id="vida-enemigo">5</span> vidas</p>
    </section>

    <section id="mensajes">

    </section>

    <section id="reiniciar">
        <button id="boton-reiniciar">Reiniciar</button>
    </section>
</body>
</html>

El JavaScript

let ataqueJugador;
let ataqueEnemigo;
let vidasJugador = 5;
let vidasEnemigo = 5;

function iniciarJuego() {
  let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque");
  sectionSeleccionarAtaque.style.display = "none";
  let sectionSeleccionarReinicio = document.getElementById("reiniciar");
  sectionSeleccionarReinicio.style.display = "none";
  let botonMascotaJugador = document.getElementById("boton-mascota");
  botonMascotaJugador.addEventListener("click", selecionarMascotaJugador);
  let botonReiniciar = document.getElementById("boton-reiniciar");
  botonReiniciar.addEventListener("click", reiniciarJuego);
  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 selecionarMascotaJugador() {
  let inputHipodoge = document.getElementById("hipodoge");
  let inputcapipepo = document.getElementById("capipepo");
  let inputRatigueya = document.getElementById("ratigueya");
  let spanMascotasJugador = document.getElementById("mascota-jugador");

  if (inputHipodoge.checked) {
    spanMascotasJugador.innerHTML = "Hipodoge";
    seleccionarMascotaEnemigo();
  } else if (inputcapipepo.checked) {
    spanMascotasJugador.innerHTML = "Capipepo";
    seleccionarMascotaEnemigo();
  } else if (inputRatigueya.checked) {
    spanMascotasJugador.innerHTML = "Ratigueya";
    seleccionarMascotaEnemigo();
  } else {
    alert("Debes seleccionar un Mokepon");
  }
}

function seleccionarMascotaEnemigo() {
  let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque");
  sectionSeleccionarAtaque.style.display = "block";

  let mascotaEnemigo = aleatorio(1, 3);
  spanMascotasEnemigo = document.getElementById("mascota-enemigo");
  if (mascotaEnemigo == 1) {
    spanMascotasEnemigo.innerHTML = "Hipodoge";
  } else if (mascotaEnemigo == 2) {
    spanMascotasEnemigo.innerHTML = "Capipepo";
  } else if (mascotaEnemigo == 3) {
    spanMascotasEnemigo.innerHTML = "Ratigueya";
  }

  let botonFuego = document.getElementById("boton-fuego");
  botonFuego.disabled = false;
  botonFuego.addEventListener("click", ataqueFuego);
  let botonAgua = document.getElementById("boton-agua");
  botonAgua.disabled = false;
  botonAgua.addEventListener("click", ataqueAgua);
  let botonTierra = document.getElementById("boton-tierra");
  botonTierra.disabled = false;
  botonTierra.addEventListener("click", ataqueTierra);
  let botonMascotaJugador = document.getElementById("boton-mascota");
  botonMascotaJugador.disabled = true;
}

function ataqueFuego() {
  ataqueJugador = "Fuego 🔥";
  ataqueAleatorioEnemigo();
}

function ataqueAgua() {
  ataqueJugador = "Agua 💧";
  ataqueAleatorioEnemigo();
}

function ataqueTierra() {
  ataqueJugador = "Tierra 🌱";
  ataqueAleatorioEnemigo();
}

function ataqueAleatorioEnemigo() {
  let ataqueAleatorio = aleatorio(1, 3);
  if (ataqueAleatorio == 1) {
    ataqueEnemigo = "Fuego 🔥";
  } else if (ataqueAleatorio == 2) {
    ataqueEnemigo = "Agua 💧";
  } else if (ataqueAleatorio == 3) {
    ataqueEnemigo = "Tierra 🌱";
  }
  combate();
}

function combate() {
  let spanVidasJugador = document.getElementById("vida-jugador");
  let spanVidasEnemigo = document.getElementById("vida-enemigo");
  if (ataqueJugador == ataqueEnemigo) {
    crearMensaje("Empatados 😐");
  } else if (ataqueJugador == "Fuego 🔥" && ataqueEnemigo == "Tierra 🌱") {
    crearMensaje("Ganaste! 🎉");
    vidasEnemigo--;
    spanVidasEnemigo.innerHTML = `${vidasEnemigo}`;
  } else if (ataqueJugador == "Agua 💧" && ataqueEnemigo == "Fuego 🔥") {
    crearMensaje("Ganaste! 🎉");
    vidasEnemigo--;
    spanVidasEnemigo.innerHTML = `${vidasEnemigo}`;
  } else if (ataqueJugador == "Tierra 🌱" && ataqueEnemigo == "Agua 💧") {
    crearMensaje("Ganaste! 🎉");
    vidasEnemigo--;
    spanVidasEnemigo.innerHTML = `${vidasEnemigo}`;
  } else {
    crearMensaje("Perdiste 😢");
    vidasJugador--;
    spanVidasJugador.innerHTML = `${vidasJugador}`;
  }
  revisarVidas();
}

function revisarVidas() {
  if (vidasEnemigo == 0) {
    let sectionSeleccionarReinicio = document.getElementById("reiniciar");
    sectionSeleccionarReinicio.style.display = "none";
    crearMensajeFinal("Felicitaciones Ganaste 🎉");
    deshabilitarBotones();
  } else if (vidasJugador == 0) {
    let sectionSeleccionarReinicio = document.getElementById("reiniciar");
    sectionSeleccionarReinicio.style.display = "block";
    crearMensajeFinal("Eres una decepcion Perdiste 😢");
    deshabilitarBotones();
  }
}

function crearMensaje(resultado) {
  let sectionMensajes = document.getElementById("mensajes");
  let parrafo = document.createElement("p");
  parrafo.innerHTML = `Tu mascota ataco con ${ataqueJugador}, la mascota del enemigo ataco con ${ataqueEnemigo} - ${resultado}`;
  sectionMensajes.appendChild(parrafo);
}

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

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

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

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

window.addEventListener("load", iniciarJuego);

Lo que hice fue colar para que no se vea el boton reiniciar en la funcion iniciar juego y para que se vuelva a ver lo coloque en la funcion crear mensaje final. Entonces asi una vez ganes o pierdas sale el boton para reiniciar todo de nuevo.

let botonReiniciarOcultar = document.getElementById('boton-reiniciar')
    botonReiniciarOcultar.style.display = "none"

let botonReiniciarOcultar = document.getElementById('boton-reiniciar')
    botonReiniciarOcultar.style.display = "block"