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

Escuchando eventos con JavaScript

19/84
Recursos

Aportes 61

Preguntas 19

Ordenar por:

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

les recomiendo los Cursos de React.js: Manejo Profesional del Estado y el Curso de Frameworks y Librerías de JavaScript los imparte el prode Juan 💚

Como dato, al hacer addEventListener no es necesario definir la función por separado. Podemos hacer esto:

document.addEventListener('click', () => {
	alert("SELECCIONASTE TU MASCOTA")
}) 

A veces será más cómodo de una forma, otras veces será más claro de la otra. Úsenlo con sabiduría

Así hice la función

function seleccionarMascotaJugador(){
    if (document.getElementById("hipodoge").checked == true){
        alert("Usted ha seleccionado hipodoge")
    }
    else if (document.getElementById("capipepo").checked == true){
        alert("Usted ha seleccionado capipepo")
    }
    else if (document.getElementById("ratigueya").checked == true){
        alert("Usted ha seleccionado ratigueya")
    }
}

Comparto mi avance:

function confirmarSeleccionJugador1() {
    if(document.getElementById('ajolote').checked) {
        alert('Has seleccionado al ajolote')
    } else if(document.getElementById('topo').checked) {
        alert('Has seleccionado al topo')
    } else if(document.getElementById('hormigadefuego').checked) {
        alert('Has seleccionado a la Hormiga de fuego')
    } else if(document.getElementById('komodo').checked) {
        alert('Has seleccionado al Dragón de Komodo')
    } else if(document.getElementById('tortuga').checked) {
        alert('Has seleccionado a la tortuga')
    } else if(document.getElementById('caballodemar').checked) {
        alert('Has seleccionado al Caballo de mar')
    } 
}

Al inicio del html podemos utilizar defer, esto realiza que despues de cargado se ejecute el JS:
<script src="./js/main.js" defer></script>

Quiero comentar algo que Juan David no mencionó.
Para solucionar el problema de que el script cargue antes del documento, lo que yo hice fue solamente agregar a la etiqueta <script> el atributo defer, me gustaría saber si alguien la conoce y si es correcto utilizarla en éste caso

<head>
    <script defer src="./js/mokepon.js"></script>
</head>

decidí guardar las macotas en un array para acceder a ellos con un for, trate de optimizar el codigo para que no sea repetitivo

// alert("hello world");

// Pets
mascotas=[
"hipodoge","capipepo","ratigueya","langostelvis","tucapalma","pydos"
];

// Game
function iniciarJuego(){
    let seleccionarMascota = document.getElementById('seleccionarMascota');

    seleccionarMascota.addEventListener('click', seleccionarMascotaJugador);

    function seleccionarMascotaJugador(){
        for(let mascota of mascotas ){
            let elementMascota = document.getElementById(mascota);

            if(elementMascota.checked){
              var  mascotaSeleccionada = mascota;
            }
        }
        if(mascotaSeleccionada == null || mascotaSeleccionada == undefined){
            alert('Por favor selecciona una mascota.');
        }else{
            alert('seleccionaste tu mascota : ' + mascotaSeleccionada);
        }

    }
}
window.addEventListener('load', iniciarJuego);

Lo realize usando la logica que nos dejo Freddy.

if (document.getElementById("hipodoge").checked) {
    alert("Haz seleccionado a Hipodoge 🦭");
  } else if (document.getElementById("capipepo").checked) {
    alert("Haz seleccionado a Capipepo 🦫");
  } else if (document.getElementById("ratigueya").checked) {
    alert("Haz seleccionado a Ratigueya 🐀");
  }else {alert("Ninguna mascota seleccionada")}

investigando encontre otra forma de evaluar el grupo de botonos, pero no supe si es posible realizarlo desde este ambito, dejo el codigo encontrado.

if (document.querySelector('input[name="mascota"]:checked') = hipodoge) 

Yo lo hice así

Yo le agregué un condicional mas para cuando no selecciona ningún input.

function seleccionarMascotaJugador() {
    if (Ipodoge.checked)
        alert("SELECCIONASTE A IPODOGE")
    else if (Capipego.checked)
        alert("SELECCIONASTE A CAPIPEGO")
    else if (Ratigueya.checked)
        alert("SELECCIONASTE A RATIGUEYA")
    else 
    alert("NO SELECCIONASTE MASCOTA")
}

Quizás está de mas pero por las dudas lo puse. No se que opinan.

Con el atributo checked pueden seleccionar un personaje por defecto al iniciar la carga de la página, así:

      <input type="radio" name="mascota" id="hipodoge" checked/>

Así resolví el código. Hasta ahora desconozco si es válido declarar una variable con un valor de cero, como lo hice en el código, para luego ser sustituido por la selección de la mascota.

Logre hacerlo con la misma función de Juan, solo que mi función tiene de mas que si no selecciona una mascota le avisa

Sería súper agregar un

else{
}

Al final por si el usuario no selecciona ninguna de las opciones

🐭 ¡Logré hacer que el botón de seleccionar mascota reconociera el animal!

Es simple, creamos condicionales que nos lleven a lanzar el alert de ‘¡Elegiste (mascota)’. Lo más importante es que las condiciones comparen la propiedad de checked: Si esto es true, lanza esta alerta.

Anyway, aquí les dejo el código y el resultado 💚:


No se si estará bien, pero yo lo hice de esta forma.!

al principio no me funciono por que puse .ariachecked en lugar de checked normal

function eleccion(){
let guerreros
if(document.getElementById(“ESPADACHIN-DE-FUEGO”).checked==true) {guerreros=“ESPADACHIN DE FUEGO”
}
else if(document.getElementById(“ARQUERO-DE-AGUA”.checked)true){guerreros=alert(“ARQUERO DE AGUA”)
}
else if(document.getElementById(“LANCERO-DE-TIERRA”).checked
true){guerreros=alert(“LANCERO-DE-TIERRA”)}

alert("HAZ SELECCIONADO "+ guerreros)

}

<function seleccionarMascotaJugador(){ 
    if (document.getElementById("Hipodoge").checked){
        alert("Seleccionaste a Hipodoge ")
    } else if (document.getElementById("Capipepo").checked){
        alert("Seleccionaste a Capipepo ")
    } 
    // En este ultimo else lo == a true porque el evento .checked
    // lo que hace es que si el evento click se dispara me dice true
    // de lo contrario sigue en false (boleanos) pero, si se dispara 
    // el evento en teoria es true por eso no es necesario ponerlo.
    else if ((document.getElementById("Ratigueya").checked) == true){
        alert("Seleccionaste a Ratigueya ")
    }
}> 

My code (/ω\)

function iniciarJuego(){
    let botonElegir = document.getElementById('boton-elegir')
    botonElegir.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador() {
    
    let hipodoge = document.getElementById('hipodoge')
    let capipepo = document.getElementById('capipepo')
    let ratagueya = document.getElementById('ratagueya')
    
    if (hipodoge.checked) {
        alert('Elegiste a Hipodoge! 💦')
    } else if (capipepo.checked) {
        alert('Elegiste a Capipepo 🌱')
    } else if (ratagueya.checked) {
        alert('elegiste a Ratugueya 🔥 ')
    } else {
        alert('Por favor elige una mascota! 🤔')
    }

}

window.addEventListener('load', iniciarJuego)

No pude completar el desafio 😔

<function seleccionarMascotaJugador(){
    let mascota = ""
    alert("SELECCIONASTE LA MASCOTA " + mascota)

    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('hipodoge').checked
    let ratigueya = document.getElementById('hipodoge').checked

    if (hipodoge == true){
        mascota = "HIPODOGE"
    }else if (capipepo == true){
        mascota = "CAPIPEPO"
    }else if (ratigueya == true){
        mascota = "RATIGUEYA"
    }
}




function iniciarJuego(){
    let botonMascotaJugador = document.getElementById('boton_mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}



window.addEventListener('load', iniciarJuego)> 

Lo logre!! 😁😁

<function seleccionarMascotaJugador(){
    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('capipepo').checked
    let ratigueya = document.getElementById('ratigueya').checked

    if (hipodoge == true){
        alert("SELECCIONASTE A HIPODOGE")
    }else if (capipepo == true){
        alert("SELECCIONASTE A CAPIPEPO")
    }else if (ratigueya == true){
        alert("SELECCIONASTE A RAYIGUEYA")
    }
}




function iniciarJuego(){
    let botonMascotaJugador = document.getElementById('boton_mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}



window.addEventListener('load', iniciarJuego)> 

Se ve más bonito el console en Brave 😄

Esta fue mi función:

function seleccionarMascotaJugador () {
    if (document.getElementById("hipodoge").checked) {
        alert("Seleccionaste a hipodoge")
    } else if (document.getElementById("capipepo").checked) {
        alert("Seleccionaste a capipepo")
    } else if (document.getElementById("ratigueya").checked) {
        alert("Seleccionaste a ratigueya")
    }
}

Este es mi fi function para seleccionar la mascota.

¿Funciona? Si 😁
¿Es la manera correcta de hacerlo? Probablemente no 😂

function seleccionarMascotaJugador() {
       if (document.getElementById("Hidrocap").checked)
        alert("Has seleccionado a HIDROCAP")
       else if (document.getElementById("Geoter").checked)
        alert("Has seleccionado a GEOTER")
       else if (document.getElementById("Draganis").checked)
        alert("Has seleccionado a DRAGANIS")
       else if (document.getElementById("Marleon").checked)
        alert("Has seleccionado a MARLEÓN")
       else if (document.getElementById("Barreon").checked)
        alert("Has seleccionado a BARREÓN")
       else if (document.getElementById("Vulcano").checked)
        alert("Has seleccionado a VULCANO")
}

let seleccion=document.getElementById(“hipodoge”).checked

if (seleccion==true) {
    alert ("Elegiste a " + "Hipodoge") 
}
else if (seleccion==false) {
    let seleccion=document.getElementById("capipepo").checked
    if (seleccion==true){
        alert ("Elegiste a " + "capipepo")
    }
    else if (seleccion==false) {
        let seleccion=document.getElementById("ratigueya").checked
        if (seleccion==true){
            alert ("Elegiste a " + "ratigueya")
        }
        else if (seleccion==false) {
            let seleccion=document.getElementById("langostelvis").checked
            if (seleccion==true){
                alert ("Elegiste a " + "langostelvis")
            }
            else if (seleccion==false) {
                let seleccion=document.getElementById("tucapalma").checked
                if (seleccion==true){
                    alert ("Elegiste a " + "Tucapalma")
                }
                else if (seleccion==false) {
                    let seleccion=document.getElementById("pydos").checked
                    if (seleccion==true){
                        alert ("Elegiste a " + "Pydos")
                    }
                }
            }
            
        }
    }
}

yo lo hice de esta forma y me funciono… se que debe haber una forma mas simple y con menos codigo… pero bueno…

function seleccionarMascotaJugador(){
    let eleccion = ""
    if(document.getElementById("hipodoge").checked){
        eleccion = "Hipodoge"
    } else if(document.getElementById("capipego").checked){
        eleccion = "Capipego"
    } else if(document.getElementById("ratigueya").checked){
        eleccion = "Ratigueya"
    } else {
        eleccion= "ninguna mascota"
    }
        
    alert('Has seleccionado a ' + eleccion)
}

Asi hice yo la función.💚

 function MascotaSeleccionada(){
//Colocar los radios en variables y luego comprobar si están check con un operador logico de comparación.
        let hipodoge = document.getElementById("hipodoge"); 
        let capipepo = document.getElementById("capipepo");
        let ratigueya = document.getElementById("ratigueya");

        if (hipodoge.checked == true) {
            alert("seleccionaste al hipodoge");
        }
        else if (capipepo.checked == true) {
            alert("Seleccionaste capipepo");
        }
        else if (ratigueya.checked == true) {
            alert("Seleccionaste a la ratigueya")
        }
        else {
            alert("Selecciona uno de los tres puchamones");
        }

    }

Recuerdo que cuando aprendí el manejo de eventos en Java y JavaScript me sentí más poderoso que nunca y presumía lo bueno que era y lo enseñaba con emoción, que tiempos aquellos xD

if(document.getElementById("hipodoge").checked){
         alert("seleccionaste a Hipodoge")
     }else if (document.getElementById("capipego").checked){
         alert("seleccionaste a capipego")
     }else if (document.getElementById("ratigueya").checked){
         alert("seleccionaste a ratigueya")
     }else

De alguna manera me sirvio xd aun no se como, aqui dejo el codigo!

function iniciarGame() {
  let btnPetPlayer = document.getElementById("btn-pet")
  btnPetPlayer.addEventListener("click", seleccionarPetPlayer)
}

function eleccionPet(eleccion) {
  let resultado = ""
  if (eleccion == document.getElementById("hipodoge").checked == false) {
    resultado = "Hipodoge"
  } else if (eleccion == document.getElementById("capipepo").checked == false) {
    resultado = "Capipepo"
  } else if (eleccion == document.getElementById("ratigueya").checked == false) {
    resultado = "Ratigueya"
  } else {
    resultado = "nada"
  }
  return resultado
}
let player = ""
function seleccionarPetPlayer() {
  alert("Has seleccionado a " + eleccionPet(player))
}

window.addEventListener("load", iniciarGame)

No les pasa que: Toma tu true jejejejeej muy excelente manera de enseñar además de muy dinamica

A mi me funcionó así

if (document.getElementById('M1').checked) {
        alert("Elegiste Agua")
    } else if (document.getElementById('M2').checked) {
        alert("Elegiste Tierra")
    } else if (document.getElementById('M3').checked) {
        alert("Elegiste Fuego")
    }

Yo lo hice asi 😄

function seleccionarMascotaJugador(){

   if (document.getElementById("Piplup").checked){
        alert("Piplup yo te elijo !! ")
   } else if  (document.getElementById("Sandile").checked) {
        alert("Sandile yo te elijo !!")
   } else if (document.getElementById("Litten").checked){
        alert("Litten yo te elijo")
   } else if (document.getElementById("Volcanion").checked) {
        alert("Volcanion yo te elijo !!")

   }else if (document.getElementById("Swampter").checked) {
        alert("Swampter yo te elijo")
   } else if (document.getElementById("Heatmor").checked) {
        alert("Heatmor yo te elijo")
   } else {
    alert ("NO ELEGISTE A TU MOKEPON")
   }
   }

Desarrolle el codigo de la funcion seleccionarMascotaJugador() utilizando el operador ternario

function seleccionarMascotaJugador(){
    (document.querySelector("#hipodoge").checked === true)
    ?alert("Seleccionaste a Hipodoge")
    :(document.querySelector("#capipepo").checked === true)
    ?alert("Seleccionaste a Capipepo")
    :(document.querySelector("#ratigueya").checked === true)
    ?alert("Seleccionaste a Ratigueya")
    :(document.querySelector("#langostelvis").checked === true)
    ?alert("Seleccionaste a Langostelvis")
    :(document.querySelector("#tucapalma").checked === true)
    ?alert("Seleccionaste a Tucapalma")
    :(document.querySelector("#pydos").checked === true)
    ?alert("Seleccionaste a Pydos")
    :alert("No seleccionaste ninguna mascota, \n\n!SELECCIÓNALA AHORA!");
}

No tenia idea del “checked”!! Muy buena.

Así hice mi solución, Básicamente utilizo una función que recibe como parámetro una mascota, válida si esta está seleccionada, y luego devuelve el resultado de esa validación (true or false).
Luego en el condicional, llamo esta función enviando como argumento cada una de las mascotas, si alguna resulta seleccionada, la función devolverá TRUE, por lo que se ejecutará alert("SELECCIONASTE TU MASCOTA: ...mascota..."). También puse la excepción donde el usuario aún no ha hecho ninguna selección.
.

PD: La extensión de VSCode para tomar la foto se llama codesnap, una vez instalada, puedes acceder a ella a través del comando ctrl + p luego el signo de mayor que (>) y escribes codesnap. Por último seleccionas el código y ya puedes tomar la foto, solo queda guardarla y listo! 💚

Se me ocurrió esta solución antes de continuar con la explicación de Juan (aún no quito la pausa xD):

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

    //eventos
    botonMascotaJugador.addEventListener('click', seleccMascotaJugador)
}

function seleccMascotaJugador() {
    let inputHipodoge = document.getElementById('hipodoge')
    let inputCapipepo = document.getElementById('capipepo')
    let inputRatigueya = document.getElementById('ratigueya')
    let mascotaActual = ""

    if (inputHipodoge.checked) {
        mascotaActual = "Hipodoge"
        alert("Has a selccionado a " + mascotaActual)
    } else if (inputCapipepo.checked) {
        mascotaActual = "Capipepo"
        alert("Has a selccionado a " + mascotaActual)
    } else if (inputRatigueya.checked) {
        mascotaActual = "Ratigüeya"
        alert("Has a selccionado a " + mascotaActual)
    } else {
        alert("Selecciona tu mascota")
    }
}

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.

Mi aporte 😄


function seleccionarMascotaJugador(){
    if(document.getElementById("hipodoge").checked == true){
        alert("ha elegido Hipodoge")
    }else if(document.getElementById("capipepo").checked == true){
        alert("Ha elegido a Capipepo")
    }else if(document.getElementById("ratigueya").checked == true){
        alert("Ha elegido a Ratigueya")
    }else{
        alert("Aun no elige a una mascota, elija una")
    }
}

Mi solución.

function startGame() {
	let buttonPetPlayer = document.getElementById('button-pet');
	buttonPetPlayer.addEventListener('click', choosePetPlayer);
}

function choosePetPlayer() {
	if (document.getElementById('hipodoge').checked === true) {
		console.log('Hipodoge has been chose')
	}

	else if (document.getElementById('capipepo').checked === true) {
		console.log('Capipepo has been chose')
	}

	else if (document.getElementById('ratigueya').checked === true) {
		console.log('Ratigueya has been chose')
	}

	else if (document.getElementById('langostelvis').checked === true) {
		console.log('Langostelvis has been chose')
	}

	else if (document.getElementById('tucapalma').checked === true) {
		console.log('Tucapalma has been chose')
	}

	else if (document.getElementById('pydos').checked === true) {
		console.log('Pydos has been chose')
	}

	else {
		console.log('Please choose a pet')
	}
}

window.addEventListener('load', startGame)

No sé ustedes, pero estuvo muy épico cuando le dijo a la consola: “Toma tu true” 😂

Logré hacerlo con un recorrido:

function seleccionarMascotaJugador() {
    for (i=0; i<listaMascotas.length; i++){
        console.log(listaMascotas[i]);
        if (document.getElementById(listaMascotas[i]).checked){
            mascotaJugador=listaMascotas[i];
            break;
        }
    }
    
    alert("seleccionaste a " + mascotaJugador);
}

let listaMascotas=["hipodoge", "capipepo", "ratigueya", "langostelvis", "tucapalma", "pydos"]

Les voy a compartir mi avance por si se atascan durante la realización del ejercicio:

function iniciarJuego(){
  let botonMascotaJugador = document.getElementById('boton_mascota')
  botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){
  if (document.getElementById("squirtle").checked == true){
     alert('Has seleccionado a Squirtle')
  }else if(document.getElementById('bulbasur').checked == true){
     alert("Has seleccionado a Bulbasur")
  }else if(document.getElementById('charmander').checked == true){
    alert("Has seleccionado a Charmander")
  }else if(document.getElementById('totodile').checked == true){
    alert("Has seleccionado a Totodile")
  }else if(document.getElementById('chikorita').checked == true){
    alert("Has seleccionado a Chikorita")
  }else if(document.getElementById('cindaquil').checked == true){
    alert("Has seleccionado a Cindaquil")
  }
}




window.addEventListener('load', iniciarJuego)

Yo lo resolví de la siguiente manera:

let mascota = document.getElementsByName("mascota");
    mascota.forEach((pet)=>{
        if(pet.checked == true){
            alert(pet.id)
        }
    })

“si no se cumple, vamos al segundo condicional” ¿por qué siento que esto se aplica a mi vida?🤣🤣🤣

Así hice yo el código

function iniciarJuego(){
    let botonMascotaJugador= document.getElementById('boton-seleccionar');
    botonMascotaJugador.addEventListener('click', selecionarMascotaJugador)
}

function selecionarMascotaJugador(){
    let hipodoge = document.getElementById('hipodoge')

    let capipepo = document.getElementById('capipepo')

    let ratigueya = document.getElementById('ratigueya')

    if(hipodoge.checked){
        alert('SELECCIONASTE AL HIPODOGE')
    }
    else if(capipepo.checked){
        alert('SELECCIONASTE AL CAPIPEPO')
    }
    else if(ratigueya.checked){
        alert('SELECCIONASTE A LA RATIGUEYA')
    }
    
}

window.addEventListener('load', iniciarJuego )

Este fue el código que me funcionó ¿Es válido?

<function seleccionarMascotaJugador() {
  let hipodogue = document.getElementById("hipodoge").checked;
  let capipepo = document.getElementById("capipepo").checked;
  let ratigueya = document.getElementById("ratigueya").checked;
  if (hipodogue == true) {
    alert("Seleccionaste Hipodogue");
  }
  else if (capipepo = true){
    alert("Seleccionaste Capipepo")
  }
  else if (ratigueya = true){
    alert("Selecionaste Rti")
  }
}> 

Mi solución, aunque me adelanté un poco en algún concepto

function seleccionarMascotaJugador() {
    let mascotas = document.getElementsByName("mascotas");
    for (let n=0; n < mascotas.length; n++) {
        if (mascotas[n].checked) {
            alert("Has seleccionado " + mascotas[n].id);
        }
    }
}

Pregunta , segui tal cual las instrucciones, pero al chekear en la consola del sitio web la funcion document.getElementById(‘Hipodoge’) , en vez de aparecerme True , me sale Undefined… por que sera?

que genial apenas tenia idea de como usar JS!!

Ya sé cual fue mi error (uno de mis errores 🤦‍♀️). Estaba haciendo todo para los inputs directamente, sin considerar el boton que ya te lleva a js, para ahi hacer las condicionales utilizando checked.

Con este codigo me sale un alert para cada mokepon pero cuando se selecciona el input, pero no cuando se da click al boton de seleccionar. (Minuto 8:25)

Esta es mi solucion.

let clickeado = false
function iniciarJuego (){
    let botonMascotaJugador = document.getElementById('boton-mascota')
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
    
    let botonBaloo = document.getElementById("Baloo")
    let botonMimba = document.getElementById("Mimba")
    let botonTrapito = document.getElementById("Trapito")
    botonBaloo.addEventListener("click", mascotaElegida)
    botonMimba.addEventListener("click", mascotaElegida)
    botonTrapito.addEventListener("click", mascotaElegida)
}
function mascotaElegida (){
    clickeado = true
}

function seleccionarMascotaJugador() {
    if(clickeado == true){
        alert("SELECCIONASTE TU MASCOTA")

    } else{
        alert("NO ELEGISTE TU MASCOTA")
    }

}
window.addEventListener("load", iniciarJuego) 

Creo que algo me salio mal

El profesor da demasiadas vueltas en una sola idea. Es muy cansado aprender así.

Hola, yo resolví el problema de esta manera. No sé si es la mejor forma pero esa se me ocurrió.
Me gustaría saber su opinión. 😄

function seleccionarMascotaJugador() {

  var hipodoge = document.getElementById('hipodoge').checked;
  var capipepo = document.getElementById('capipepo').checked;
  var ratigueya = document.getElementById('ratigueya').checked;

  if (hipodoge == true) {
    alert('Seleccionaste a: Hipodoge');
  } else if (capipepo == true) {
    alert('Seleccionaste a: Capipepo');
  } else if (ratigueya == true) {
    alert('Seleccionaste a: Ratigueya');
  } else {
    alert('Selecciona una mascota');
  }
}
function selectPlayersMascot(e) {
  /** @type {HTMLInputElement} mascot */
  let mascot = document.querySelector("input[name=mascota]:checked");
  if (mascot === null) {
    alert("No a seleccionado ningua mascota");
    return;
  }
  /** @type {HTMLLabelElement} nameMascot */
  let nameMascot = document.querySelector(`[for=${mascot.id}]`);
  alert("Has seleccionado a " + nameMascot.textContent);
}
function startGame() {
  /** @type {HTMLButtonElement} buttonMascotPlayer */
  let buttonMascotPlayer = document.querySelector("#button-mascot");

  buttonMascotPlayer.addEventListener("click", selectPlayersMascot);
}

window.addEventListener("load", startGame);

A mi me funcionó esto 😁, aunque estube intentandolo varios dias y me equivocaba al escribir hipodoge

function iniciarJuego (){
    let botonMascotaJugador = document.getElementById('boton-mascotas')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador (){
    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('capipepo').checked
    let ratigueya = document.getElementById('ratigueya').checked
    
    if (hipodoge == true){
        alert("Elegiste a Hipodoge")
    } else if (capipepo == true){
        alert("Elegiste a Capipepo")
    } else if (ratigueya == true){
        alert("Elegiste a Ratigueya")
    }
    
}

window.addEventListener('load',iniciarJuego)

😑

Esta fue la solucion que plantee

<code> 
function iniciarJuego(){
    let botonMascotaJugador = document.getElementById("boton-mascota")
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)  
}
function seleccionarMascotaJugador(){
    let botonHipodoge = document.getElementById("Hipodoge").checked
    let botonCapipepo = document.getElementById("Capipepo").checked
    let botonRatigueya = document.getElementById("Ratigueya").checked
    let botonLangostelvis = document.getElementById("Langostelvis").checked
    let botonTucapalma = document.getElementById("Tucapalma").checked
    let botonPydos = document.getElementById("Pydos").checked
    if (botonHipodoge == true){
        alert("seleccionaste hipodoge")
    } else if (botonCapipepo == true){
        alert("seleccionaste Capipepo")
    } else if (botonRatigueya == true){
        alert("seleccionaste Ratigueya")
    } else if (botonLangostelvis == true){
        alert("seleccionaste Langostelvis")
    } else if (botonTucapalma == true){
        alert("seleccionaste Tucapalma")
    } else if (botonPydos == true){
        alert("seleccionaste Pydos")
    } else {
        alert("Selecciona una opción")
    }
}

window.addEventListener("load", iniciarJuego)

El audio de la clase está muy bajo de origen.

No tienen que ajustar sus bocinas/audifonos.

copie la variable resultado de piedra papel o tijera :v

function seleccionarMascotaJugador() {
    let resultado = "";
    if (document.getElementById("hipodoge").checked) {
        resultado = "Hipodoge";
      } else if (document.getElementById("capipepo").checked) {
        resultado = "Capipepo";
      } else if (document.getElementById("ratigueya").checked) {
        resultado = "Ratigueya";
      }else {alert("No has seleccionado mascota");
      }
      alert("Has seleccionado a" +" "+ resultado)
}