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

Visual Studio Code

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

Ataques aleatorios del enemigo

24/84
Recursos

Aportes 34

Preguntas 9

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

A este punto ya se va complicando un poco el tema con tanto codigo. Pero no me rendire ya quiero ver este videojuego terminado.

A mi se me ocurrió utilizar una variable global de tipo arreglo (ataquesDisponibles), en la cual almacené los ataques disponibles, para que luego, dentro de la función ataqueAleatorioEnemigo(), se le asignara a otra variable global (ataqueEnemigo) el ataque del enemigo de manera aleatoria.

let ataquesDisponibles = ["FUEGO 🔥", "AGUA 💧", "TIERRA 🌱"]
let ataqueJugador
let ataqueEnemigo


function iniciarJuego() {
    //variables
    let botonMascotaJugador = document.getElementById("boton-mascota");

    //eventos
    botonMascotaJugador.addEventListener("click", seleccMascotaJugador);

    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)

}

//FUNCIONES PARA MASCOTAS

function seleccMascotaJugador() {
    let inputHipodoge = document.getElementById("hipodoge");
    let inputCapipepo = document.getElementById("capipepo");
    let inputRatigueya = document.getElementById("ratigueya");
    let mascotaSeleccJugador = document.getElementById("mascota-jugador");
    let mascotaActualJugador = "";

    if (inputHipodoge.checked) {
        mascotaActualJugador = "Hipodoge";
        alert("Has a seleccionado a " + mascotaActualJugador);
        mascotaSeleccJugador.innerHTML = mascotaActualJugador;
    } else if (inputCapipepo.checked) {
        mascotaActualJugador = "Capipepo";
        alert("Has a seleccionado a " + mascotaActualJugador);
        mascotaSeleccJugador.innerHTML = mascotaActualJugador;
    } else if (inputRatigueya.checked) {
        mascotaActualJugador = "Ratigüeya";
        alert("Has a seleccionado a " + mascotaActualJugador);
        mascotaSeleccJugador.innerHTML = mascotaActualJugador;
    } else {
        alert("Selecciona tu mascota");
    }

    seleccMascotaenemigo()
}

function seleccMascotaenemigo() {
    let ataqueAleatorio = aleatorio(1, 3)
    let mascotaSeleccEnemigo = document.getElementById("mascota-enemigo");
    let mascotaActualEnemigo = "";

    if (ataqueAleatorio == 1) {
        //Hipodoge
        mascotaActualEnemigo = "Hipodoge"
        mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
    } else if (ataqueAleatorio == 2) {
        //Capipepo
        mascotaActualEnemigo = "Capipepo"
        mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
    } else {
        //Ratigüeya
        mascotaActualEnemigo = "Ratigüeya"
        mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
    }
}

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

//FUNCIONES PARA ATAQUES

function ataqueFuego() {
    ataqueJugador = "FUEGO 🔥"
    alert(ataqueJugador)
    let spanAtaqueJugador = document.getElementById("ataque-jugador")
    spanAtaqueJugador.innerHTML = ataqueJugador

    ataqueAleatorioEnemigo()
}

function ataqueAgua() {
    ataqueJugador = "AGUA 💧"
    alert(ataqueJugador)
    let spanAtaqueJugador = document.getElementById("ataque-jugador")
    spanAtaqueJugador.innerHTML = ataqueJugador

    ataqueAleatorioEnemigo()
}

function ataqueTierra() {
    ataqueJugador = "TIERRA 🌱"
    alert(ataqueJugador)
    let spanAtaqueJugador = document.getElementById("ataque-jugador")
    spanAtaqueJugador.innerHTML = ataqueJugador

    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
    ataqueEnemigo = ataquesDisponibles[Math.floor(Math.random() * ataquesDisponibles.length)]
    let spanAtaqueEnemigo = document.getElementById("ataque-enemigo")
    spanAtaqueEnemigo.innerHTML = ataqueEnemigo
}

window.addEventListener("load", iniciarJuego); //otra manera de llamar al script después de que se cargue todo el HTML
//la función iniciarJuego se carga cuando ya todo el contenido está cargado.

Me adelanté a realizar la lógica de la función del ataque enemigo y me siento re feliz de que sí me salió parecida a la del profesor, muy muy parecida. Me siento increíble de que cada vez voy mejorando 😄

Aquí mi manera dejar saber al usuario el ataque del enemigo después de elegir su ataque.

También tenemos otra forma de escribir las funciones llamada “Función Flecha” que normalmente se utiliza con funciones cortas para que el código se vea mas compacto. Ambas formas funcionan pero ésta última tiene algunas limitaciones. mas información al respecto aquí: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions

También para aquellos que tengan un nivel de inglés intermedio es bueno para practicar que lo traduscan todo al inglés (nombres de variable, funciones, etc). de esa manera se van acostumbrando para cuando les toque leer el codigo de alguien más (lo que según me dijeron pasa seguido).
Les dejo como va mi código hasta ahora y cualquier correción y crítica constructiva sobre como mejorarlo es bienvenida.

hagan los personajes asi jajaajaja

Este es mi aporte, me funciona perfectamente 😄}

function ataqueFuego() {
    ataqueJugador = 'FUEGO'
    alert(ataqueJugador)
    ataqueEnemigo()
}
function ataqueAgua() {
    ataqueJugador = "AGUA"
    alert(ataqueJugador)
    ataqueEnemigo()
}
function ataqueTierra() {
   ataqueJugador = 'TIERRA' 
   alert(ataqueJugador)
   ataqueEnemigo()
}


function ataqueEnemigo(){
    let variableAtaqueEnemigo = aleatorio(1,3)

    if (variableAtaqueEnemigo == 1) {
        alert('El ataque de tu enemigo es de Fuego')
    }else if(variableAtaqueEnemigo == 2){
        alert('El ataque de tu enemigo es de Agua')
    }else {
        alert('El ataque de tu enemigo es de Tierra')
    }
    
}

![](

Yo lo hice de esta manera:

function ataqueEnemigo() {
    let ataqueAleatorio = aleatorio(1,3)
    let spanATAQUEENEMIGO = document.getElementById("ATAQUE-ENEMIGO")

    if (ataqueAleatorio == 1) {
        spanATAQUEENEMIGO.innerHTML = "FUEGO"
    } else if (ataqueAleatorio == 2) {
        spanATAQUEENEMIGO.innerHTML = "AGUA"
    } else if (ataqueAleatorio == 3) {
        spanATAQUEENEMIGO.innerHTML = "TIERRA"
    }
}
alguien que me de una ayuda trato de usar los botones de ataque como se hace en la clase pero la variable global se define solo por la ultima función la de tierra sin importar cual botón oprima con el click no se porque pasa ni como solucionarlo

Un detalle con los botones de ataque es que deberian habilitarse solamente cuando escojamos nuestra mascota.
Esto es muy facil, en el html cuando creamos los botones, le agregamos la propiedad disabled, así estarán deshabilitados en un inicio.

Ahora nos vamos al javascript, por el momento tenemos la logica de los botones en la función iniciar juego, estas lineas las podemos mover a una función nueva llamada habilitarBotonesAtaque(), dicha función la utilizariamos al final de la función seleccionarMascotaJugador().
En la función que creamos, vamos a ir por cada botón habilitandolo con la propiedad .disabled (la misma que colocamos en el html). Le colocamos que su valor sea false, ya que en un primer momento su valor es true. Nos quedaria de la siguiente forma:

Todo el código con el nuevo orden que le dimos quedaria así:

Por si alguien se pierde, esta clase va después de la clase llamada “Ataques en JavaScript”. Me salieron en orden invertido 😅

Estuve un rato tratando de ver como resolver el minireto hasta que recorde una frase de cursos anteriores de “No reinventar la rueda” y fui a ver el codigo que habiamos hecho con Freddy y ahi continue con esa logica que me parecia bastante acertada, por suerte, quedo funcional el codigo
Le agregue un par de cosas para que en los alert diga que pokemon ataca pj
Siendo sincero, me gusta mas como lo hizo el profe, es mas agradable a la vista, me falta calle

let ataqueJugador
let pc = 0
//
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)
}

function seleccionarMascotaJugador () {
    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("No has elegido todavia...")
    }
    
    seleccionarMascotaEnemigo()

}

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

    if(mascotaAleatorio == 1) {
        spanMascotaEnemigo.innerHTML = "Hipodoge"
    } else if(mascotaAleatorio == 2) {
        spanMascotaEnemigo.innerHTML = "Capipepo"
    } else {
        spanMascotaEnemigo.innerHTML = "Ratigueya"
    }

}

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

function ataqueAleatorioEnemigo(enemigo) {
    resultado = ""
  
    if(enemigo == 1) {
        resultado = "Fuego"
    } else if(enemigo == 2) {
        resultado = "Agua"
    } else {
        resultado = "Tierra"
    }
    return resultado

}

function ataqueFuego() {
    ataqueJugador = "Fuego"
    let pc = aleatorio(1, 3)
    alert(ataqueJugador)
    alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc)) 

}

function ataqueAgua() {
    ataqueJugador = "Agua"
    let pc = aleatorio(1, 3)
    alert(ataqueJugador)
    alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc)) 

}

function ataqueTierra() {
    ataqueJugador = "Tierra"
    let pc = aleatorio(1, 3)
    alert(ataqueJugador)
    alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc)) 
}

window.addEventListener("load", iniciarJuego)

En el minuto 3:25 cuando estén cambiando el nombre a una función o variable que invocaste varias veces no es necesario cambiar el nombre una por una, solo presiona F2 y te desplegará un cuadro de texto para que se cambie el nombre a todas

:D justo mi solución fue igual a la tuya y la función con el mismo nombre jaja

En mi caso lo que hice fue que la función retornara el valor, así me queda más claro en el lugar que la utilizo que es lo que hace y como usar la variable. (Separar responsabilidades)
Bienvenidos comentarios:

let ataqueEnemigo;

function ataqueFuego() {
  ataqueJugador = "FUEGO";
  alert("Ataque jugador " + ataqueJugador);
  ataqueEnemigo = ataqueAleatorioEnemigo();
  alert("Ataque enemigo " + ataqueEnemigo);
}
function ataqueAgua() {
  ataqueJugador = "AGUA";
  alert("Ataque jugador " + ataqueJugador);
  ataqueEnemigo = ataqueAleatorioEnemigo();
  alert("Ataque enemigo " + ataqueEnemigo);
}
function ataqueTierra() {
  ataqueJugador = "TIERRA";
  alert("Ataque jugador " + ataqueJugador);
  ataqueEnemigo = ataqueAleatorioEnemigo();
  alert("Ataque enemigo " + ataqueEnemigo);
}

function ataqueAleatorioEnemigo() {
  const ataqueAleatorio = aleatorio(1, 3);
  if (ataqueAleatorio == 1) {
    return "FUEGO";
  } else if (ataqueAleatorio == 2) {
    return "AGUA";
  } else {
    return "TIERRA";
  }
}
<code> 
function ataqueFuego(){
    ataqueJugador= 'FUEGO'
    alert(ataqueJugador)
    ataqueEnemigo() 
}
function ataqueAgua(){
    ataqueJugador= 'AGUA'
    alert(ataqueJugador)
    ataqueEnemigo()
}
function ataqueTierra(){
    ataqueJugador= 'TIERRA'
    alert(ataqueJugador)
    ataqueEnemigo()
}
function ataqueEnemigo(){
    let aAleatorio= ataqueAleatorio(1,3)
   
    if ( aAleatorio == 1 ){
       alert('ENEMIGO ATACO CON FUEGO')
    } else if ( aAleatorio == 2 ){
        alert('ENEMIGO ATACO CON AGUA')
    } else {
        alert('ENEMIGO ATACO CON TIERRA')
    }

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

Les comento que para evitar escribir las condiciones y los valores máximo y mínimo, hice un diccionario, y los números de la función aleatoria van a variar según la carga de los datos.

function seleccionarMascotaEnemigo() {
    let data = base[0]
    let mascotaAleatorio = aleatorio(data)
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
    spanMascotaEnemigo.innerHTML= data[mascotaAleatorio]
}

function ataqueFuego() {
    ataqueJugador = 'FUEGO'
    ataqueAleatorioEnemigo()
}

function ataqueAgua() {
    ataqueJugador = 'AGUA'
    ataqueAleatorioEnemigo()
}

function ataqueTierra() {
    ataqueJugador = 'TIERRA'
    ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
    let data = base[1]
    let ataqueAleatorio = aleatorio(data)
    ataqueEnemigo = data[ataqueAleatorio].toUpperCase()
}

function aleatorio(data) {
    max= Object.keys(data).length
    min=1
    return Math.floor(Math.random()*(max-min+1)+min)
}

base = [
        {
            1:'Hipodoge',
            2:'Capipepo',
            3:'Ratigueya',
            4:'Langostelvis',
            5:'Tucapalma',
            6:'Pydos'
        },
        {
            1:'Fuego',
            2:'Agua',
            3:'Tierra'
        }
    ]

Esta es mi version simplificando los alerts y la seleccion de ataques:

let ataquejugador1
let ataquejugador2

// Función para activar los botones del DOM
window.addEventListener('load', function iniciarJuego() {
    //Activar boton de seleccion
    let botonSeleccionJugador1 = document.getElementById('boton-seleccion-jugador1')
    botonSeleccionJugador1.addEventListener('click', confirmarSeleccionJugadores)
    botonSeleccionJugador1.addEventListener('click', seleccionAtaqueJugador1)
})

// Función para generar numeros aleatorios entre un rango asignado
function generarEnterosAleatorios(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Función para interpretar seleccion del primer jugador
function seleccionJugador1() {
    let seleccionAjolote = document.getElementById('ajolote')
    let seleccionTopo = document.getElementById('topo')
    let seleccionHormigaDeFuego = document.getElementById('hormigadefuego')
    let seleccionKomodo = document.getElementById('komodo')
    let seleccionTortuga = document.getElementById('tortuga')
    let seleccionCaballoDeMar = document.getElementById('caballodemar')

    if(seleccionAjolote.checked) {
        return eleccion = 'al AJOLOTE' 
    } else if(seleccionTopo.checked) {
        return eleccion = 'al TOPO'
    } else if(seleccionHormigaDeFuego.checked) {
        return eleccion = 'a la HORMIGA DE FUEGO'
    } else if(seleccionKomodo.checked) {
        return eleccion = 'al DRAGON DE KOMODO'
    } else if(seleccionTortuga.checked) {
        return eleccion = 'a la TORTUGA'
    } else if(seleccionCaballoDeMar.checked) {
        return eleccion = 'al CABALLO DE MAR'
    } 
}

// Función para interpretar seleccion del segundo jugador
function seleccionJugador2(mokeponElegido) {
    if(mokeponElegido == 1) {  
        return eleccion = "al AJOLOTE"
    } else if(mokeponElegido == 2) {  
        return eleccion = "al TOPO"
    } else if(mokeponElegido == 3) {  
        return eleccion = "a la HORMIGA DE FUEGO"
    } else if(mokeponElegido == 4) {  
        return eleccion = "al DRAGON DE KOMODO"
    } else if(mokeponElegido == 5) {  
        return eleccion = "a la TORTUGA"
    } else if(mokeponElegido == 6) {  
        return eleccion = "al CABALLO DE MAR"
    }
}

// Función para confirmar la seleccion de ambos jugadores
function confirmarSeleccionJugadores() {

    // Imprimir seleccion del primer jugador
    let spanMokeponJugador1 = document.getElementById('mokepon-jugador1')
    alert('Has seleccionado ' +  seleccionJugador1())
    spanMokeponJugador1.innerHTML = seleccionJugador1()

    // La computadora elige un mokepon aleatoriamente (numeros entre 1 y 6)
    let eleccionJugador2 = generarEnterosAleatorios(1,6)
    
    // Imprimir seleccion del segundo jugador
    let spanMokeponJugador2 = document.getElementById('mokepon-jugador2')
    alert('La computadora ha seleccionado ' +  seleccionJugador2(eleccionJugador2))
    spanMokeponJugador2.innerHTML = seleccionJugador2(eleccionJugador2) 
}

// Función para elegir el ataque del primer jugador
function seleccionAtaqueJugador1() {
    let botonTierra = document.getElementById('boton-tierra')
    let botonFuego = document.getElementById('boton-fuego')
    let botonAgua = document.getElementById('boton-agua')
    let botonTierraFuego = document.getElementById('boton-tierraFuego')
    let botonTierraAgua = document.getElementById('boton-tierraAgua')
    let botonAguaFuego = document.getElementById('boton-aguaFuego')

    botonTierra.onclick = function ataqueTierra() {
        ataquejugador1 = 'TIERRA'
        confirmarAtaqueJugadores()
    }

    botonFuego.onclick = function ataquFuego() {
        ataquejugador1 = 'FUEGO'
        confirmarAtaqueJugadores()
    }
    
    botonAgua.onclick = function ataqueAgua() {
        ataquejugador1 = 'AGUA'
        confirmarAtaqueJugadores()
    }

    botonTierraFuego.onclick = function ataqueTierraFuego() {
        ataquejugador1 = 'TIERRA-FUEGO'
        confirmarAtaqueJugadores()
    }

    botonTierraAgua.onclick = function ataqueTierraAgua() {
        ataquejugador1 = 'TIERRA-AGUA'
        confirmarAtaqueJugadores()
    }

    botonAguaFuego.onclick = function ataqueAguaFuego() {
        ataquejugador1 = 'AGUA-FUEGO'
        confirmarAtaqueJugadores()
    }

}  

// Función para elegir el ataque del segundo jugador
function seleccionAtaqueJugador2(ataque) {
    if(ataque == 1) {  
        return eleccionAtaque = "TIERRA"
    } else if(ataque == 2) {  
        return eleccionAtaque = "FUEGO"
    } else if(ataque == 3) {  
        return eleccionAtaque = "AGUA"
    } else if(ataque == 4) {  
        return eleccionAtaque = "TIERRA-FUEGO"
    } else if(ataque == 5) {  
        return eleccionAtaque = "TIERRA-AGUA"
    } else if(ataque == 6) {  
        return eleccionAtaque = "AGUA-FUEGO"
    }
}

// Función para confirmar el ataque de ambos jugadores
function confirmarAtaqueJugadores() {

    // La computadora elige un ataque aleatoriamente (numeros entre 1 y 6)
    let eleccionAtaqueJugador2 = generarEnterosAleatorios(1,6)
    ataquejugador2 = seleccionAtaqueJugador2(eleccionAtaqueJugador2)

    alert("Tu mokepon ha hecho un ataque tipo " +  ataquejugador1
    +"\nEl enemigo ha hecho un ataque tipo " +  ataquejugador2)
}
function ataqueFuego() {
    ataqueJugador = 'FUEGO'
    alert(ataqueJugador)
    ataquePc()
}
function ataqueAgua() {
    ataqueJugador = 'AGUA'
    alert(ataqueJugador)
    ataquePc()
}
function ataqueTierra() {
    ataqueJugador = 'TIERRA'
    alert(ataqueJugador)
    ataquePc()
}
function ataquePc(){ 
    ataqueEnemigo = aleatorio(1,3)
    if (ataqueEnemigo== 1) {
        alert('Enemigo ataca con FUEGO')
    } else if (ataqueEnemigo == 2) {
        alert('Enemigo ataca con AGUA')
    } else if (ataqueEnemigo == 3){
        alert('Enemigo ataca con TIERRA')
    }
}

Parece que ya todos lo han notado pero esta clase se adelantó a la siguiente, deben ver primero la 24 y luego devolverse a esta, para seguir en el mismo orden en que se va programando el código.

Hola! A mi se me ocurrio utilizar una sola funcion para los ataques del jugador en vez de 3 (una por tipo de ataque).

//VARIABLES GLOBALES
let ataqueJugador
let ataqueEnemigo

//FUNCIONES

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

    let botonFuego = document.getElementById("boton-fuego");
    botonFuego.addEventListener("click", function(){seleccionarAtaque("FUEGO")});
    let botonAgua = document.getElementById("boton-agua");
    botonAgua.addEventListener("click",  function(){seleccionarAtaque("AGUA")});
    let botonTierra = document.getElementById("boton-tierra");
    botonTierra.addEventListener("click",  function(){seleccionarAtaque("TIERRA")});
}

function aleatorio(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
}
//SELECCION DE MASCOTAS
function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById("hipodoge");
    let inputCapipepo = document.getElementById("capipepo");
    let inputRatigueya = document.getElementById("ratigueya")
    let inputLangostelvis = document.getElementById("langostelvis");
    let inputTucapalma = document.getElementById("tucapalma");
    let inputPydos = document.getElementById("pydos");
    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 if(inputLangostelvis.checked){
        spanMascotaJugador.innerHTML="Langostelvis";
    }else if(inputTucapalma.checked){
        spanMascotaJugador.innerHTML="Tucapalma";
    }else if(inputPydos.checked){
        spanMascotaJugador.innerHTML="Pydos";
    } else{
        alert("Debes seleccionar un MOKEPON!");
    }
    if(spanMascotaJugador.innerHTML!=""){
        seleccionarMascotaEnemigo();
    }
    
}

function seleccionarMascotaEnemigo(){
    let mascotaAleatoria = aleatorio (1,6);
    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";
    } else if (mascotaAleatoria==4){
        spanMascotaEnemigo.innerHTML="Langostelvis";
    } else if (mascotaAleatoria==5){
        spanMascotaEnemigo.innerHTML="Tucapalma";
    } else {
        spanMascotaEnemigo.innerHTML="Pydos";
    }
}

//SELECCION DE ATAQUES

function seleccionarAtaqueEnemigo(){
    let ataqueAleatorio= aleatorio(1,3);
    if (ataqueAleatorio==1){
        ataqueEnemigo = "FUEGO";
    } else if (ataqueAleatorio==2){
        ataqueEnemigo = "AGUA";
    } else{
        ataqueEnemigo = "TIERRA";
    }   
}

function seleccionarAtaque(tipo){
    ataqueJugador = tipo;
    seleccionarAtaqueEnemigo();
}

window.addEventListener("load", iniciarJuego)

Lo logre!!

<let ataqueJugador 
let ataqueEnemigo


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


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

    if (inputHipodoge){
        //alert("seleccionaste a Hipodoge")
        spanMascotaJugador.innerHTML = "Hipodoge"
    }else if (inputCapipepo){
        //alert("seleccionaste a Capipepo")
        spanMascotaJugador.innerHTML = "Capipepo"
    }else if (inputRatigueya){
        //alert("seleccionaste a Ratigueya")
        spanMascotaJugador.innerHTML = "Ratigueya"
    }else{
        alert("Debes seleccionar una mascota")
        spanMascotaJugador.innerHTML = ""
    }

    seleccionarMascotaEnemigo()
    seleccionarAtaqueEnemigo()
}


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 seleccionarAtaqueEnemigo(){
    //let spanAtaqueEnemigo = document.getElementById('ataqueEnemigo')
    let ataqueEnemigo = aleatotio(1, 3)
    if(ataqueEnemigo == 1){
        ataqueEnemigo = 'FUEGO 🔥'
        alert("Enemigo eligió: " + ataqueEnemigo)
    }else if(ataqueEnemigo == 2){
        ataqueEnemigo = 'AGUA 💧'
        alert("Enemigo eligió: " + ataqueEnemigo)
    }else if(ataqueEnemigo == 3){
        ataqueEnemigo = 'TIERRA 🌱'
        alert("Enemigo eligió: " + ataqueEnemigo)
    }
}

function ataqueFuego(){
    ataqueJugador = 'FUEGO'
    alert(ataqueJugador)
}

function ataqueAgua(){
    ataqueJugador = 'AGUA'
    alert(ataqueJugador)
}

function ataqueTierra(){
    ataqueJugador = 'TIERRA'
    alert(ataqueJugador)
}

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


window.addEventListener('load', iniciarJuego)> 

Es muy interesante adentrarse en este mundo 😁

My code (^///^)

let ataqueJugador
let ataqueEnemigo

function iniciarJuego(){
    let botonElegir = document.getElementById('boton-elegir')
    let botonFuego = document.getElementById('boton-fuego')
    let botonAgua = document.getElementById('boton-agua')
    let botonTierra = document.getElementById('boton-tierra')

    botonElegir.addEventListener('click', seleccionarMascotaJugador)
    botonFuego.addEventListener('click', ataqueFuego)
    botonAgua.addEventListener('click', ataqueAgua)
    botonTierra.addEventListener('click', ataqueTierra)
}

function seleccionarMascotaJugador() { 
    let inputHipodoge = document.getElementById('hipodoge')
    let inputCapipepo = document.getElementById('capipepo')
    let inputRatigueya = document.getElementById('ratigueya')
    let spanMascotaJugador = document.getElementById('mascota-jugador')
    
        
    if (inputHipodoge.checked) {
        // alert('Elegiste a Hipodoge! 💦')
        spanMascotaJugador.innerHTML = 'Hipodoge'
    } else if (inputCapipepo.checked) {
        // alert('Elegiste a Capipepo 🌱')
        spanMascotaJugador.innerHTML = 'Capipepo'
    } else if (inputRatigueya.checked) {
        // alert('elegiste a Ratigueya 🔥 ')
        spanMascotaJugador.innerHTML = 'Ratigueya'
    } else {
        alert('Por favor elige una mascota! 🤔')
    }

    seleccionarMascotaEnemigo()
}

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

    if (mascotaAleatoriaEnemigo == 1){
        spanMascotaEnemigo.innerHTML ='Hipodoge'
    } else if (mascotaAleatoriaEnemigo == 2){
        spanMascotaEnemigo.innerHTML ='Capipepo'
    } else {
        spanMascotaEnemigo.innerHTML = 'Ratigueya'
    }
}

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

function ataqueFuego(){
    ataqueJugador = 'Fuego 🔥'
    alert('Atacas con ' + ataqueJugador)
    alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}

function ataqueAgua(){
    ataqueJugador = 'Agua 💦'
    alert('Atacas con ' + ataqueJugador)
    alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}

function ataqueTierra(){
    ataqueJugador = 'Tierra 🌱'
    alert('Atacas con ' + ataqueJugador)
    alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}

function seleccionarAtaqueEnemigo(){
    ataqueEnemigo = numeroRandom(1,3)
    if (ataqueEnemigo == 1) {
        return 'Fuego 🔥'
    } else if (ataqueEnemigo == 2){
        return 'Agua 💦'
    } else {
        return 'Tierra 🌱'
    }
}

window.addEventListener('load', iniciarJuego)

Una forma de cambiar el nombre a una variable o función es que selecciones el nombre y con Ctrl + D se sombrearán el nombre repetidos en el código y puedes escribir y se verá el cambio a todos esos nombres. esto sirve para que no cambies el nombre de la variable o función individualmente y te ahorras algo de tiempo.

Muy buena tu dinámica de enseñanza, es muy practica a la hora de transmitir los conocimientos… Muy buenas las clases.👍

Asi quedo mi Codigo, Un poquito diferente al del profe con el (Switch)

var ataqueJugador
var ataqueEnemigo

function iniciarJuego() {
    let botonMascotaJugador = document.getElementById('boton-mokepon')
    botonMascotaJugador.addEventListener('click', seleccionarMokeponJugador)

    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)
}
    //Logica de seleccion de los mokepones del jugador
function seleccionarMokeponJugador() {
    let mokeponhipodoge = document.getElementById('Hipodoge')
    let mokeponcapipepo = document.getElementById('Capipepo')
    let mokeponratigueya = document.getElementById('Ratigueya')
    let spanMokeponJugador = document.getElementById('mokepon-jugador')
    
    if(mokeponhipodoge.checked == true)
    {
        spanMokeponJugador.innerHTML = 'Hipodoge'

    } else if(mokeponcapipepo.checked == true)
    {
        spanMokeponJugador.innerHTML = 'Capipepo'

    } else if(mokeponratigueya.checked == true)
    {
        spanMokeponJugador.innerHTML = 'Ratigueya'
    } else {
        alert('Por favor selecciona un mokepon')
    }

    seleccionarMokeponEnemigo()
}
    //logica de seleccion de los mokepones del enemigo
function seleccionarMokeponEnemigo() {
    let seleccionAleatorio = Randomnumbers(1,3)
    let spanMokeponEnemigo = document.getElementById('mokepon-enemigo')

    if  (seleccionAleatorio == 1) {
        spanMokeponEnemigo.innerHTML = 'Hipodoge'
    } else if (seleccionAleatorio == 2) {
        spanMokeponEnemigo.innerHTML = 'Capipepo'
    } else {
        spanMokeponEnemigo.innerHTML = 'Ratigueya'
    }
        
}  

function Randomnumbers(min, max) {
           return Math.floor( Math.random()* (max - min + 1) + min)
}
    //fuciones para los ataques de los mokepones
function ataqueFuego() {
    ataqueJugador = 'Fuego'
    ataqueEnemigoAleatorio()
}

function ataqueAgua() {
    ataqueJugador = 'Agua'
    ataqueEnemigoAleatorio()
}

function ataqueTierra() {
    ataqueJugador = 'Tierra'
    ataqueEnemigoAleatorio()
}

function ataqueEnemigoAleatorio() {
    let ataqueAleatorio = Randomnumbers(1,3)
    switch(ataqueAleatorio) {
        case 1:
            ataqueEnemigo = 'FUEGO'
            break;
        case 2:
            ataqueEnemigo = 'AGUA'
            break;
        case 3:
            ataqueEnemigo = 'TIERRA'
            break;
    }
}
 
window.addEventListener('load', iniciarJuego)

Guau… super dinámicas y productivas las clases… Tratando de seguir el ritmo a todos los conceptos y nombres y funciones, etc nuevos… y como dijo Freddy en unos videos anteriores, volver a ver las clases la cantidad de veces que sea necesario! Gracias por tanto aporte y enseñar con tanto entusiasmo!

Otra opción para ver si el código esta funcionando correctamente es usar console.log()

function ataqueEnemigop(){
let ataqueAleatorio = aleatorio (1, 3)
if(ataqueAleatorio == 1){
ataqueEnemigo = “Fuego 🔥”
}else if(ataqueAleatorio == 2){
ataqueEnemigo = “Agua 💧”
}else if(ataqueAleatorio == 3){
ataqueEnemigo = “Tierra 🌱”
}
console.log(ataqueEnemigo)

function ataqueFuego(){
    ataqueJugador = 'Fuego'
    alert(ataqueJugador)
    seleccionAtaqueEnemigo()
}

function ataqueAgua(){
    ataqueJugador = 'Agua'
    alert(ataqueJugador)
    seleccionAtaqueEnemigo()
}

function ataqueTierra(){
    ataqueJugador = 'Tierra'
    alert(ataqueJugador)
    seleccionAtaqueEnemigo()
}

function seleccionAtaqueEnemigo(){
    let ataqueEnemigo = aleatorio(1,3)
    let spanAtaqueEnemigo= document.getElementById('ataqueEnemigo')
    if (ataqueEnemigo == 1){
        spanAtaqueEnemigo.innerHTML = 'Fuego'
    }
    else if(ataqueEnemigo == 2){
        spanAtaqueEnemigo.innerHTML = 'Agua'
    }
    else{
        spanAtaqueEnemigo.innerHTML = 'Tierra'
    }

El mío pasa por todos los ataques, sin tirar error en navegador, ya lo puse de cabeza y no encuentro el problema

Mi solucion quedo asi, ojala sea valida

function ataqueFire() {
  let spanAtaquePlayer = document.getElementById("ataque-player")
  spanAtaquePlayer.innerHTML = "Fuego"
  ataqueIA()
}

function ataqueWater() {
  let spanAtaquePlayer = document.getElementById("ataque-player")
  spanAtaquePlayer.innerHTML = "Agua"
  ataqueIA()
}

function ataqueEarth() {
  let spanAtaquePlayer = document.getElementById("ataque-player")
  spanAtaquePlayer.innerHTML = "Tierra"
  ataqueIA()
}

function ataqueIA() {
  let ataqueIA = aleatorio(1,3)
  let spanAtaqueIA = document.getElementById("ataque-ia")
  if (ataqueIA == 1) {
    spanAtaqueIA.innerHTML = "Fuego"
  } else if (ataqueIA == 2) {
    spanAtaqueIA.innerHTML = "Agua"
  } else if (ataqueIA == 3) {
    spanAtaqueIA.innerHTML = "Tierra"
  }
}

Creo que estan volteados los nombres de las clases jajaja (esta y la anterior)