Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ocultando elementos HTML con JS para mejorar la UX del juego

31/84
Recursos

Aportes 307

Preguntas 103

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃rearMensajeFinal鈥, 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(鈥楴o 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(鈥榬einiciar鈥);
seccionBotonReiniciar.style.display=鈥榖lock鈥;
}

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 鈥渃aballero鈥, 鈥渁rquero鈥 y 鈥渕ago鈥 y que el oponente sea 鈥渃iclope鈥, 鈥渙rco鈥 y 鈥渞ey 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 馃榾馃檵

por aqui les dejo lo que he logrado con los cursos de platzi y el chat GPT <https://lugarcreativo.netlify.app/>

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 = 鈥渘one鈥

Para hacerla aparecer a pantalla usamos el metodo:
style.display = 鈥渂lock鈥

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 鈥渟eleccionar-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 鈥渟alto 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 = 鈥渃ontents鈥 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 = 鈥榥one鈥 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(鈥渟eleccionar-ataque鈥)
seccionAtaqueOculta.style.display = "none"
let seccionReiniciar = document.getElementById(鈥渞einiciar鈥)
seccionReiniciar.style.display = 鈥渘one鈥

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(鈥渟eleccionar-mascota鈥)
seccionMascotaOculta.style.display = 鈥渘one鈥

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(鈥渕ascota-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(鈥渧ida-jugador鈥)
let spanVidaEnemigo = document.getElementById(鈥渧ida-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(鈥渕ensajes鈥)
let parrafo = document.createElement(鈥減鈥)
parrafo.innerHTML = 鈥渢u mascota ataco con " + ataquejugador + " " + 鈥, la macota del enemigo con " + ataqueEnemigo +鈥-鈥 + resultado
seccionMensaje.appendChild(parrafo)
}
function crearMensajeFinal(resultadoFinal){
let seccionMensaje = document.getElementById(鈥渕ensajes鈥)
let parrafoFinal = document.createElement(鈥減鈥)
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(鈥渓oad鈥, 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"
me siento orgullosa de lo que he logrado hasta aqui, yo no se muy bien esto de la programacion pero quiero salir adelante y aprender mucho. Gracias profesor por ayudarnos.
As铆 lo dise帽aron, as铆 funciona, pero... 驴Por qu茅 'block' habilita el bot贸n en el function crearMensajeFinal? Si, como su nombre lo dice, es bloqueo, incluso hace exactamente eso en los botones de las habilidades... `let sectionReiniciar = document.getElementById('reiniciar')聽 聽 sectionReiniciar.style.display = 'block'` Gracias, espero alguien pueda orientarme o brindarme alg煤n recurso explic谩ndolo.
y funciono tambien
yo acomode mi boton reiniciar para que se muestre cuando esta revisando las vidas