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

Reiniciando el juego

30/84
Recursos

Aportes 181

Preguntas 59

Ordenar por:

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

o inicia sesi贸n.

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

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

Al final preceden de window

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

DOM & BOM Revisited

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

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

Cre茅 una nueva funci贸n para que aparezca el bot贸n de reiniciar con el mensaje final (as铆 no tenerlo desde un principio).

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

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

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

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

El profe Juan me recuerda a

A si va quedando

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

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



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

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

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

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

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

Ahora vamos a desabilitar los botones

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

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

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

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

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

    sectionMensaje.appendChild(parrafo);

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

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

Hola!

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

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

location.reload()馃攧

Creo que ya esta todo y asi me quedo:

Una ayuda es que si sus disabled no funcionan, revisen si estan bien escritos, yo tenia dias con ese error hasta que me di cuenta que no era disable, si no disabled, con 鈥渄鈥 al final 馃槀

para los HTML lovers, as铆 lo modifican directamente desde el DOM y se ahorran 3 lineas de c贸digo 馃槈

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

Asi va quedando:

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

ahh bueno con disabled queda mejor que mi soluci贸n del retrun jajajajajajjajajaa 馃お

馃挌As铆 lo hice馃挌:


  1. Primero genero una funci贸n que me permita deshabilitar lo botones de ataque una vez que hayamos perdido o ganado.
function deshabilitarBotones(){
    let botonFuego = document.getElementById("boton-fuego")
    botonFuego.disabled = true

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

    let botonTierra = document.getElementById("boton-tierra")
    botonTierra.disabled = true
}
  1. Usamos el atributo .disabled = true para hacer que estos pierdan su uso al llamarla en la funci贸n 鈥渞evisarVidas()鈥:
function revisarVidas(){

    if(vidasEnemigo == 0){
        crearMensajeFinal("GANASTE LA BATALLA鉁")
        deshabilitarBotones()
    }else if(vidasJugador == 0){
        crearMensajeFinal("PERDISTE LA BATALLA馃槥")
        deshabilitarBotones()
    }

}
  1. Al final creamos las siguientes variables en la funci贸n 鈥渋niciarJuego()鈥:
let botonReciniciar = document.getElementById("boton-reiniciar")
botonReciniciar.addEventListener("click", reiciciarjuego)
  1. Para despu茅s usar 鈥渓ocation.reload()鈥 al hacer clic en el bot贸n 鈥渞einiciar鈥:
function reiciciarjuego(){
    location.reload()
}

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

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

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

  if (vidasEnemigo > 0 && vidasJugador > 0) {
    
    if (ataqueEnemigo == ataqueJugador) {
      crearMensaje("馃EMPATE馃");
      ;
    } else if (
      (ataqueJugador == "FUEGO馃敟" && ataqueEnemigo == "PLANTA馃崈") ||
      (ataqueJugador == "AGUA馃挦" && ataqueEnemigo == "FUEGO馃敟") ||
      (ataqueJugador == "PLANTA馃崈" && ataqueEnemigo == "AGUA馃挦")
    ) {
      crearMensaje("馃弳GANASTE!!馃弳");
      vidasEnemigo--
      spanVidasEnemigo.innerHTML = vidasEnemigo
      ;
    } else {
      crearMensaje("馃槩 PERDISTE No te Desanimes 馃槩")
      vidasJugador--
      spanVidasJugador.innerHTML = vidasJugador;
      ;
    }
    revisarVidas()
  }

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

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

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

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

Soy nuevo en Programaci贸n. Este es mi primer curso. Como no tenia el conocimiento, busque en mi navegador, 鈥溌緾贸mo recargar la p谩gina con c贸digo JS?鈥 y me sali贸 el c贸digo: window.location.reload() y Listo!!

隆Nunca paren de aprender! Animo!!

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

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

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

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

}

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

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

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

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

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

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


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

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

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

disable --> atributo que desabilita elemento

Tambi茅n de la importancia de conocer bien la herramienta, me estaba imaginando una l贸gica m谩s complicada para que no se continuara restando las cifras. como con un while y colocando un mensaje reinicia el juego algo as铆 馃檰鈥嶁檪锔

Le agrege adem谩s del boton de reiniciar uno de terminar y as铆 qued贸 el c贸digo

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

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

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

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

}


<code>


function reiniciarJuego(){
    location.reload()
}

function terminarJuego(){
    let terminarJuego = document.getElementById("mensaje final")
    
    let parrafo = document.createElement("p")
    parrafo.innerHTML = "隆Hasta la pr贸xima!馃槉"
    terminarJuego.appendChild(parrrafo)


<code> el HTML

 

```   <section id ="Reiniciar">
                <h2><p style="color:#f0b850";>驴Quieres jugar otra vez?馃帀</p></h2>
                 <button id= "boton-reiniciar">隆Empezar!</button>
                 <button id= "boton-terminar"> Quiz谩s Mas tarde 馃</button>
            </section> 
            <section id="mensaje final">
            </section> 

``

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

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

En la funci贸n revisar vidas podr铆a quedar el c贸digo para reiniciar el juego

Yo creer铆a que se puede realizar el ejercicio despu茅s de la funci贸n revisarVidas, porque determina el final de los ataques

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

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

Y yo que en las primeras clases donde empezamos a escribir el HTML, le puse una etiqueta 鈥渁鈥, con el atributo 鈥渉ref鈥, con el par谩metro del index.html dentro del bot贸n de reinicio. jajaja Era lo 煤nico que sab铆a en 茅se momento, no me maten jaja

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

Ah铆 va quedando 馃槈

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

agregu茅 el bot贸n reiniciar:

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

cre茅 la funci贸n reiniciar:

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

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

y la inici茅 en la funci贸n revisar vidas:

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

Seguimos con la vida al m谩ximo

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

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

Deben quitar el id del button reiniciar - Espero haber ayudado

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

As铆 lo hice yo, me toc贸 buscar la documentaci贸n del location.reload() pero鈥 隆Funciona! 馃槃

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

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

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

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

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

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

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

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

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

function ataqueAleatorio() {
    let ataqueRandom = random(1,3)
    if (ataqueRandom == 1) {
        ataqueRival = "馃敟"
    } else if (ataqueRandom == 2) {
        ataqueRival = "馃挧"
    } else {
        ataqueRival = "馃尡"
    } crearMensaje()

}

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

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

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

function reiniciarJuego() {
    location.reload()
}

function decidirGanador() {
    let resultado = ""
    let spanVidaJugador = document.getElementById("vida-mascota-jugador")
    let spanVidaRival = document.getElementById("vida-mascota-rival")
    if (ataqueJugador == ataqueRival) {
        resultado = "隆EMPATE! 馃槓"
    } else if ((ataqueJugador == "馃敟" && ataqueRival == "馃尡") || (ataqueJugador == "馃挧" && ataqueRival == "馃敟") || (ataqueJugador == "馃尡" && ataqueRival == "馃挧")) {
        resultado = "隆GANASTE! 馃コ"
        vidasRival--
        spanVidaRival.innerHTML = vidasRival
    } else {
        resultado = "隆PERDISTE! 馃槶"
        vidasJugador--
        spanVidaJugador.innerHTML = vidasJugador
    } return resultado
}

function checkVidas() {
    if (vidasJugador == 0) {
        crearMensajeFinal("隆Suerte para la pr贸xima! Has perdido... 馃槩")
    } else if (vidasRival == 0) {
        crearMensajeFinal("隆Felicidades! 隆Has ganadooo! 馃槏")
    }
}

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

window.addEventListener("load", iniciarJuego)

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

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

Yo escribir铆a el c贸digo para reiniciar el juego en la funci贸n combate.

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

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

let inputHipodoge = document.getElementById ("hipodoge")

let inputCapipepo = document.getElementById ("capipepo")

let inputRatigueya = document.getElementById ("ratigueya")

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

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

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

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

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

}

seleccionarMascotaEnemigo()

}

aclaro: nose de programaci贸n a煤n pero se me ocurri贸, prob茅 y paso jajajja

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

Sintaxis del m茅todo:

location.reload( forceGet )

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

Asi lo hice 馃檪

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

Despu茅s de la funci贸n de revisarVidas es donde colocar铆a la funci贸n para reiniciar el juego.

Codificando la funcionalidad de reiniciar el juego

Recargar la pagina con location.reload()

Desabilitar botones con el atributo disabled

Desactivando botones desde javascript element.disabled = true

Se deber铆a detallar en la funci贸n y llamarla en la otra funci贸n crearMensajeFinal

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

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

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

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

para mi en la function revisar vidas

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

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

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

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

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

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

function reiniciarJuego (){
let spanVidasJugador = document.getElementById(鈥榲idas-jugador鈥)
let spanVidasEnemigo = document.getElementById(鈥榲idas-enemigo鈥)
vidasJugador = 3
vidasEnemigo = 3
spanVidasEnemigo.innerHTML = vidasEnemigo
spanVidasJugador.innerHTML = vidasJugador
}

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

function revisarvidas(){
    if  (VidasRival == 0){
        alert("FELICIDADES HAS GANADO!! 馃巼鉁煄夝煄婐煄")
        crearMensajefinal("FELICIDADES HAS GANADO!! 馃巼鉁煄夝煄婐煄")
        location.reload()
    } else if(VidasPropia == 0){
        alert("HAS PERDIDO 馃槬馃槬")
        crearMensajefinal("HAS PERDIDO 馃槬馃槬")
        location.reload()

    }
}

lo hice solo un poco diferente

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

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

    sectionMensajes.appendChild(parrafo)

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

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

lo agregu茅 en la funci贸n de seleccion de la mascota del enemigo

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

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

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

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

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

![](https://static.platzi.com/media/user_upload/image-91500b7d-68c5-4347-9e02-9ab8fb93e331.jpg) Lo que hice para evitar que el Jugador continu茅 manteniendo activos los ataques fue deshabilitar todos los botones de ataque de esta manera solamente mantiene el resultado final y su 煤nica opci贸n sea reiniciar el juego.
Hola mi nombre es Alejandro tengo un inconveniente reviso mi c贸digo y no encuentro el error, soy nuevo primera vez estudiando progr ![](https://static.platzi.com/media/user_upload/image-3f0a287b-50c0-4022-8651-4020f38058d1.jpg)

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

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

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

Yo solucione el problema un poquito mas facil al momento de deshabilitar![](<C:\Users\danyg\OneDrive\Fotos\Capturas de pantalla>) los botones solo utilizo la funci贸n![](<C:\Users\danyg\OneDrive\Fotos\Capturas de pantalla>) document.getElementById ('Bnt-Fuego').disabled = true y pues me sale el mismo resultado sin la necesidad de estar llamando de nuevo al boton con let

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

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

Ahora solo queda deshabilitar el button 鈥榮elecionar鈥 (una vez selecionada la mascota) y listo!

Next episode馃幎

revisar vidas y desabilitar ataques

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

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

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

.disabled

Atributo que sirve para desactivar elementos del DOM.

Ejercicio 4.50, Yo utilic茅 location. reload (). A煤n as铆, me parece que es mejor hallar una forma en la que se reinici茅 solamente el texto din谩mico en vez de toda la pesta帽a 驴alguien tiene una mejor soluci贸n?

Pens茅 que utilizariamos WHILE para el combate.

tambi茅n se puede usar en la funci贸n seleccionarMascotaJugar: let botonCapipepo = documento.getElementById ("capipepo") botonCapipepo.disabled = true (con cada una) para que no puedan cambiar al haber seleccionado una mascota o hay una forma m谩s corta?

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

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

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

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

Excelente Profe

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

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


function startGame() {

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

    selectCharacter.addEventListener('click', selectCharacterPlayer);

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

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

function petEnemy() {

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

    enemyRandomAtack = random(1, 3);

    if (enemyRandomAtack == 1) {
        spanEnemyAtack.innerHTML = "Watter 馃挧馃挧馃挧";
        enemyAtack = "Watter 馃挧馃挧馃挧";
    } else if (enemyRandomAtack == 2) {
        spanEnemyAtack.innerHTML = "Land 馃尡馃尡馃尡"
        enemyAtack = "Land 馃尡馃尡馃尡";
    } else if (enemyRandomAtack == 3) {
        spanEnemyAtack.innerHTML = "Fire 馃敟馃敟馃敟"
        enemyAtack = "Fire 馃敟馃敟馃敟"
    } else if (enemyRandomAtack == 4) {
        spanEnemyAtack.innerHTML = "langostelvis 馃挧馃敟"
        enemyAtack = "langostelvis 馃挧馃敟"
    } else if (enemyRandomAtack == 5) {
        spanEnemyAtack.innerHTML = "tucapalma 馃挧馃尡"
        enemyAtack = "tucapalma 馃挧馃尡"
    } else if (enemyRandomAtack == 6) {
        spanEnemyAtack.innerHTML = "pydos 馃尡馃敟"
        enemyAtack = "pydos 馃尡馃敟"
    }

    combat();
}

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

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


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

     createMessage()
}

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

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

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

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

    sectionMessages.appendChild(newMessages)

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

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

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

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

}

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

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

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

Lo que hice fue colocar el alert y as铆 como Juan llam贸 a 鈥淐rearMensajeFinal鈥 yo llam茅 a 鈥渁lert鈥

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

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

function revisarVidas() {
if (vidasEnemigo == 0) {
crearMensajeFinal(鈥淔elicitaciones ganaste鈥);
toggleBotones(true);
} else if (vidasJugador == 0) {
crearMensajeFinal(鈥淟o siento, perdiste鈥);
toggleBotones(true);
}
}

function toggleBotones(estado) {
let botonFuego = document.getElementById(鈥渂oton-fuego鈥);
let botonAgua = document.getElementById(鈥渂oton-agua鈥);
let botonTierra = document.getElementById(鈥渂oton-tierra鈥);

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

function reiniciar() {
console.log(鈥渞einiciando鈥);
vidasEnemigo = 3;
vidasJugador = 3;

let spanVidasJugador = document.getElementById(鈥渧idas-jugador鈥);
let spanVidasEnemigo = document.getElementById(鈥渧idas-enemigo鈥);

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

toggleBotones(false);

vaciarMensaje();
}

function vaciarMensaje() {
console.log(鈥渆liminando msj鈥);
let sectionMensaje = document.getElementById(鈥渕ensajes鈥);
sectionMensaje.innerHTML = " ";
}

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

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

con estas lineas se pueden desactivar todos si se les a帽ade el atributo
Name = 鈥渁taque鈥

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

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

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

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

le pondria en combate por que me parece lo mas logico

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

隆Gracias por la clase!

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

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

Messirve

function revisarVidas(){
let rresultadoGuerra=document.getElementById(鈥渞esultadoGuerra鈥)
if(contadorEnemigo==0){

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

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

}
}