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

Escuchando eventos con JavaScript

19/84
Recursos

Aportes 324

Preguntas 115

Ordenar por:

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

o inicia sesi贸n.

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

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

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

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>

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

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铆

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/>

Me costo bastante pero encontr茅 como meterlo todo en una funci贸n en vez de usar varios alert馃挌馃挌

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

Debo de aceptar que los 煤ltimos dos v铆deos no me hab铆an querido dar los c贸digos, y estaba frustrada, pero es bueno siempre tener la opci贸n de preguntas en el panel, porque ya hay muchas respuestas solucionadas all铆, lo cu谩l hace que uno busque y busque, y busque hasta encontrar el posible error鈥o ha sido del todo f谩cil pero debo de aceptar que la satisfacci贸n cuando van saliendo las cosas como debe ser es inigualable. As铆 que esto para expresar que me siento muy feliz de estar aprendiendo aqu铆 con todos ustedes, gracias. 馃挍

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.

me encanta programar

No tenia idea del 鈥渃hecked鈥!! Muy buena.

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.

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

Por insipraci贸n de un compa帽ero de Platzi empec茅 a tomar mis notas desde Notion. Espero ser clara y que a alguien les sirva 馃槂 apenas empec茅 en la lecci贸n anterior.

Hola buenas tardes, les quiero comentar dos errores que tuve en esta clase y que por suerte los pude resolver. Se los comento por si a alguien le llega a pasar lo mismo. Adjunto imagen.
El primero fue con el editor, en vez de poner .addEventListener, escribi .addEvenListener. Un error de tipeo(faltaba la t)que no lograba encontrar hasta que mire el codigo palabra por palabra.

Otro error que me surgio fue en la consola del navegador, el error me decia: DevTools failed to load source map: Could not load content for chrome-extension:
Y esto es porque tenia habilitadas 2 extensiones en el navegador y por esto no me salia los alertas de js.

Ser铆a s煤per agregar un

else{
}

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

la verdad no entiendo nada

Muchachos, igual lo m谩s importante aqu铆 es encomendarnos a los dioses del internet porque aj谩鈥︷煠

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! 馃挌

sorprendente lo solucione antes de ver la l贸gica algo anda bien por ac谩

ESTA FUE MI SOLUCI脫N

Toma tu True! 馃槀

Yo solo nombre a las mascotas por Numero y le agregue un While para reducir el codigo:


Imagino que se pueden cambiar min煤sculas por may煤sculas.
Si es as铆 haria una sola fn con un alert ("elegiste a " + MASCOTA)

Aqui esta el reto que dejo el profesor, espero que este bien.
![](
![](

Es increible la forma en que se escuchan los eventos en JS, es interesante. La primera vez que lo vi en mi chamba, estaba perdido. Ahora por fin me quedo claro. Espero seguir aprendiendo de este codigo.

ESTA FUE MI SOLUCION AL PROBLEMA, ESTOY ESCRIBIENDO ESTO ANTES DE VER LA SOLUCION DEL PROFE 驴, PERO CREO QUE ESTA PUEDE FUNCIONAR.

function seleccionarMascota(){
   let hipodogue = document.getElementById("hipodogue");
   let capipepo = document.getElementById("capipepo");
   let ratigueya = document.getElementById("ratigueya");

   if (hipodogue.checked == true) {
        alert("La Mascota Seleccionada Ha Sido: HIPODOGUE")
   }

   else if(capipepo.checked == true){
        alert("La Mascota Seleccionada Ha Sido: CAPIPEPO");
   }

   else if(ratigueya.checked == true){
        alert("La Mascota Seleccionada Ha Sido: RATIGUEYA");
   }
   else{
    alert("馃毄POR FAVOR SELECCIONE ALGUNA DE LAS MASCOTAS DISPONIBLES");
   }
}

Hasta ahora los conceptos m谩s interesantes que he conocido hasta ahora han sido los

addEventListener, getElementById

Y como interact煤an las funciones despu茅s de ser validadas por la funci贸n Window.addEventListener(鈥榣oad鈥)

Me ha parecido genial

Mi propuesta a esta parte del algoritmo

function iniciarJuego(){
    let botonMascota = document.getElementById('boton-mascotas');
    botonMascota.addEventListener('click', seleccionarMascota);
}

function seleccionarMascota(){
    let hipodoge     = document.getElementById('hipodoge');
    let capipepo     = document.getElementById('capipepo');
    let ratig眉eya    = document.getElementById('ratig眉eya');
    let langostelvis = document.getElementById('langostelvis');
    let tucapalma    = document.getElementById('tucapalma');
    let pydos        = document.getElementById('pydos');
    let seleccionado = '';
    if(hipodoge.checked){
        seleccionado = hipodoge.id;
    }else if(capipepo.checked){
        seleccionado = capipepo.id;
    }else if(ratig眉eya.checked){
        seleccionado = ratig眉eya.id;
    }else if(langostelvis.checked){
        seleccionado = langostelvis.id;
    }else if(tucapalma.checked){
        seleccionado = tucapalma.id;
    }else if(pydos.checked){
        seleccionado = pydos.id;
    }
    alert(`Seleccionaste a ${seleccionado}`);
}

window.addEventListener('load', iniciarJuego);

Yo intente de esta manera. No me funciono jaja pero en mi cabeza hacia sentido. Ya estoy continuando la clase para ver cual fue mi posible error. Algo me dice que no se pueden poner condicionales If dentro de una funci贸n jaja
function seleccionarMascotaJugador(hipodoge, capipepo, ratigueya) {
if (seleccionarMascotaJugador == hipodoge) {
alert(鈥淪eleccionaste a Hipodoge鈥);
} else if (seleccionarMascotaJugador == capipepo) {
alert(鈥淪eleccionaste a Capipepo鈥);
} else if (seleccionarMascotaJugador == ratigueya) {
alert(鈥淪elccionaste a Ratigueya鈥);
} else {
alert(鈥淓lige una opcion鈥);
}
}

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 soluci贸n

Antes de ver la soluci贸n del profe les comparto la m铆a 馃槃, cualquier aporte es bienvenido.

function seleccionarMascotaJugador(){

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

if(hipodoge.checked){
    alert('Seleccionaste a Hipodoge');
}else if(capipepo.checked){
    alert('Seleccionaste a Capipepo');
}else if(ratigueya.checked){
    alert('Seleccionaste a Ratigueya');
}

}

馃惌 隆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 馃挌:


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

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

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

7:33 #TomaTutru

Me adelant茅 un poco y aplicando las clases pasadas agregu茅 la selecci贸n del enemigo

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

function seleccionarMascotaJugador(){
    if ((document.getElementById("hipofusen").checked == true)){
        alert('Seleccionaste a Hipofusen 馃悺馃寠' )
    } else if ((document.getElementById("terrarata").checked == true)){
        alert('Seleccionaste a Terrarata 馃悁馃彅锔' )
    }else if ((document.getElementById("tigerfire").checked == true)) {
       alert('Seleccionaste a Tigerfire 馃悈馃敟' )
    }else {
        alert('No has seleccionado')
    }

    let pc = 0
    pc = Math.floor(Math.random()*(3-1+1)+1)
    if (pc == 1){
        alert('El enemigo seleccion贸 a Hipofusen 馃悺馃寠' )
    } else if (pc == 2){
        alert('El enemigo seleccion贸 a Terrarata 馃悁馃彅锔' )
    }else if (pc == 3) {
    alert('El enemigo seleccion贸 a Tigerfire 馃悈馃敟' )
    }
}


window.addEventListener('load', play)

)

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

function seleccionarMascotaJugador() {

    if (document.getElementById('Hipodego').checked == true){
        alert('Seleccionaste Tu Mascota  Hipodego')
    }
    if (document.getElementById('Capipego').checked == true){
    
        alert('Seleccionaste Tu Mascota  Capipego ')
    }
    if (document.getElementById('Ratigueya').checked == true){
    
        alert('Seleccionaste Tu Mascota  Ratiguey')
    }
    if (document.getElementById('Thor').checked == true){

Aqu铆 mi aporte. Cree variables para no repetir tantas veces el addEventListener. Y use querySelector que es otra forma de llamar clases, id, etc desde el documento html al del javascript.

const hipodoge = document.querySelector('#hipodoge');
const capipepo = document.querySelector('#capipepo');
const ratigueya = document.querySelector('#ratigueya');

function iniciarJuego(){
    let botonMascotaJugador = document.querySelector('#boton-mascota');
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){
    if(hipodoge.checked == true){
        alert('Usted ha seleccionado a Hipodoge')
    }
    else if(capipepo.checked == true){
        alert('Usted ha seleccionado a Capipepo')
    }
    else if(ratigueya.checked == true){
        alert('Usted ha seleccionado a Ratigueya')
    }
    else{alert('Por favor selecciona una mascota')}
}

window.addEventListener('load', iniciarJuego)
<code> 

馃搶 Escuchar las propiedades de las etiquetas HTML son 煤tiles para JS

function seleccionarMascotaJugador() {
    if (document.getElementById('hipodogue').checked == true) {
        alert("Seccionaste a HipoDoge")
    }else if (document.getElementById('capipepo').checked == true) {
        alert("Seccionaste a CapiPepo")
    }else if (document.getElementById('ratigueya').checked == true) {
        alert("Seccionaste a RatiGueya")
    }
}

Que gratificane haberlo logrado!!!
Aqui mi humilde codigo colegas

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!')
    } else if(document.getElementById('langoselvis').checked){
        alert('SELECCIONASTE A LANGOSELVIS!')
    } else if(document.getElementById('tucapalma').checked){
        alert('SELECCIONASTE A TUCAPALMA!')
    } else if(document.getElementById('pydos').checked){
        alert('SELECCIONASTE A PYDOS')
    } else {
        alert('ELIJE TU MASCOTA')
    }
}

Yo lo hice de 茅sta manera, usando lo mas b谩sico If Else

驴Qu茅 diferencia async y defer en JavaScript?

Los elementos <script> son unos de los recursos m谩s comunes que bloquean el an谩lisis y renderizado de un documento HTML. Cuando el navegador se encuentra con este tipo de recursos, detiene el an谩lisis del documento, descarga el recurso, lo ejecuta y luego continua con el an谩lisis del documento.
.
Una de las primeras recomendaciones para evitar este bloqueo era colocar los elementos <script> al final del HTML, por ejemplo antes del </body> o de </html>. De esta forma, cuando el analizador se encontraba con los scripts, casi todo el documento ya se hab铆a analizado y renderizado. Pero era una soluci贸n lejos de ser ideal.
.
Los atributos async y defer, introducidos en HTML5, ofrecen la flexibilidad necesaria para solucionar este problema sin forzarnos a colocar los scripts en un sitio concreto del documento, con ligeras pero importantes diferencias:
.

  1. <script> (normal): el an谩lisis HTML se detiene, se descarga el archivo (si es un script externo), se ejecuta el script y despu茅s se reanuda el an谩lisis HTML.
    .
  2. <script async>: el script se descarga de forma as铆ncrona, es decir, sin detener el an谩lisis HTML, pero una vez descargado, si se detiene para ejecutar el script. Tras la ejecuci贸n se reanuda el an谩lisis HTML. Sigue existiendo un bloqueo en el renderizado pero menor que con el comportamiento normal. No se garantiza la ejecuci贸n de los scripts as铆ncronos en el mismo orden en el aparecen en el documento.
    .
  3. <script defer>: el script se descarga de forma as铆ncrona, en paralelo con el an谩lisis HTML, y adem谩s su ejecuci贸n es diferida hasta que termine el an谩lisis HTML. No hay bloqueo en el renderizado HTML. La ejecuci贸n de todos los scripts diferidos se realiza en el mismo orden en el que aparecen en el documento.
    .

    .
    Nota: async y defer son atributos v谩lidos solo para elementos <script> con un src establecido, es decir, para scripts externos o con data URIs. En el caso de scripts inline (es decir, c贸digo JavaScript escrito dentro del mismo documento HTML) no tienen efecto y son analizados y ejecutados al llegar a ellos.
    .

驴Cu谩ndo utilizar cada uno? (En esta 煤ltima parte pues est谩 bueno saberlo, pero para el nivel actual me parece letra china馃樀)
.
defer parece la mejor opci贸n de forma general. Salvo que el script manipule o interaccione con el DOM antes de DOMContentLoaded ($( document ).ready en jQuery). Tambi茅n ser铆a la mejor opci贸n si el script tiene dependencias con otros scripts y es importante el orden en el que se ejecuta cada uno.
.
async ser铆a ideal para scripts que manipulan o interaccionan con el DOM antes de DOMContentLoaded y/o que no tienen dependencias con otros scripts.
.
Seguir utilizando JS en su forma predeterminada ser铆a la 煤ltima opci贸n. Si el script es peque帽o, preferible inline, ya que el an谩lisis HTML se detendr铆a pero ser铆a una interferencia muy peque帽a en comparaci贸n con la solicitud y descarga del archivo.
.
SIGAMOS APRENDIENDO JUNTOS馃挌

el codigo que yo utilice para saber que personaje escogia el usuario es :

function seleccionarPersonajeJugador(eleccionPersonaje){
        let personaje = ""
        if(document.getElementById("input1").checked){
                personaje = "input 1"
        }
        else if(document.getElementById("input 2").checked){
                personaje = "input 2"
        }
        else if(document.getElementById("input 3").checked){
                personaje = "input 3"
        }
        else {
                personaje = "escoge un personaje"
        }
        alert("seleccionaste a " + personaje)
}

windows.addeventlistener(鈥榣oad鈥, nombrefuncion) --> permite ejecutar luego de que termine de cargar la web

Esta fue mi soluci贸n para saber que mascota habia seleccionado el usuario.

function eventos_elementos()
{
    var boton_mascota = document.getElementById('seleccionar')
    boton_mascota.addEventListener('click', seleccionarMascota)
    var Hipodoge = document.getElementById('Hipodoge').checked
    var Capipepo = document.getElementById('Capipepo').checked
    var Ratigueya = document.getElementById('Ratigueya').checked
    var Langostelvis = document.getElementById('Langostelvis').checked
    var Tucapalma = document.getElementById('Tucapalma').checked
    var Pydos = document.getElementById('Pydos').checked
    let radios = [Hipodoge,Capipepo,Ratigueya,Langostelvis,Tucapalma,Pydos]
    return radios
}

function seleccionarMascota()
{
    var llamar = eventos_elementos();
    console.log(llamar)
    switch(llamar !== true)
    {
        case llamar[0]:
        alert("haz seleccionado a hipodoge")
        break;
        case llamar[1]:
        alert("haz seleccionado a Capipepo")
        break;
        case llamar[2]:
        alert("haz seleccionado a Ratigueya")
        break;
        case llamar[3]:
        alert("haz seleccionado a Langostelvis")
        break;
        case llamar[4]:
        alert("haz seleccionado a Tucapalma")
        break;
        case llamar[5]:
        alert("haz seleccionado a Pydos")
        break;
        default:
        alert("no haz seleccionado nada mamahuevo")
        break;   
    }
}

window.addEventListener('load', eventos_elementos)

Hola a todos!!
creo que no fue la mejor manera de solucionarlo, pero esto fue lo que programe.

Pens茅 en la misma soluci贸n del profesor, pero creo que me estoy arrepintiendo de que mi juego tenga 10 opciones para elegir :鈥)

Este es mi aporte para no recorrer cada input traje los elementos en un nodelist con el nombre .

function seleccionarMascotaJugador() {
    let pet = document.getElementsByName("pet")
    for (let index = 0; index < pet.length; index++) {
        if (pet[index].checked) {
            return alert(` seleccionaste ${pet[index].id}`)
        }
    }
}

Al final sali贸 esto, ten铆a la idea de hacerlo un if, pero como el vincular que para hacer la comprobaci贸n. Batalle mucho porque al colocar 茅l . despu茅s del nombre de ID de los input, no me daba la opci贸n de checked. Me suger铆a un checkVisibility lo que termin贸 con causarme muchos problemas. 驴Saben por qu茅 no sal铆a checked como una de las posibles opciones en VSC?

function seleccionBichimonPlayer(){
    //Manda un mensaje sobre que se elijio un Bichimon
    if(document.getElementById("paltano").checked){//Comprueba si la opci贸n est谩 selecionada
        alert("Has elegido a: Paltano 隆Hora de explorar!")
    }
    else if(document.getElementById("shelas").checked){//Comprueba si la opci贸n est谩 selecionada
        alert("Has elegido a: Shelas 隆Hora de explorar!")
    }
    else if(document.getElementById("flammello").checked){//Comprueba si la opci贸n est谩 selecionada
        alert("Has elegido a: Flammello 隆Hora de explorar!")   
    }
    else{
        alert("No has elegido a ning煤n Bichimon")
    }
}

Lo resolv铆 as铆:

function iniciarJuego(){
let botonMascotaJugador = document.getElementById(鈥榖oton-mascota鈥)
botonMascotaJugador.addEventListener(鈥榗lick鈥, seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){

if(document.getElementById('hipodoge').checked== true){
    alert("Seleccionaste a Hipodoge");
}
else if(document.getElementById('capipepo').checked== true){
    alert("Seleccionaste a Capipepo");  
    }
else if(document.getElementById('ratigueya').checked== true){
    alert("Seleccionaste a Ratigueya");  
}
else{
    false; 
}

}

tengan mucho cuidado con las mayusculas, sin querer puse la palabra window en mayuscula y dure media hora buscando el error jajaja

Casi que NO, se me habia ido una letra S en boton-mascota y no me aparecia el pop-up #ojodeAguila

MINUTO 4:59. 鈥渆stas funciones no las estamos llamando en ningun momento. Unicamente las estamos llamando cuando el navegador nos da el evento de que se cargo todo el html鈥,
excelente explicacion

Asi realice el ejercicio de crear la funci贸n seleccion de mascota con lo que aprend铆 del profe freddy( aun no veo como lo hizo el profe Juan)

La forma para no tener muchas validaciones puede ser esta

const buttonPet = document.getElementById('buttonPet');
if (buttonPet) {
    const selectPetPlayer = () => {
        const buttonSelected = document.querySelector(
            '[name="mokepon"]:checked'
        );
        console.log(buttonSelected);
    };
    buttonPet.addEventListener('click', selectPetPlayer);
}

Solo traemos el mokepon seleccionado y nos ahorrariamos las validaciones

As铆 es como lo hice yo :鈥))

function seleccionarMascotaJugador() {
    //alert('SELECCIONASTE TU MASCOTA')
    hipodogue = document.getElementById('hipodoge').checked
    capipepo = document.getElementById('capipepo').checked
    ratigueya = document.getElementById('ratigueya').checked

    if (hipodogue == true) {
        alert('seleccionaste a hipodogue')
    } else if (capipepo == true) {
        alert('seleccionaste a capipepo')
    } else if (ratigueya == true) {
        alert('seleccionaste a ratigueya')
    } else {
        alert('No has seleccionado nada')
    }

Resolv铆 el problema de selecci贸n del mokepon de esta manera.
usando una estructura condicional:

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")
    } else if (document.getElementById("langostelvis").checked) {
        alert("Seleccionaste a langostelvis")
    } else if (document.getElementById("tucapalma").checked) {
        alert("Seleccionaste a tucapalma")
    } else if (document.getElementById("pydos").checked) {
        alert("Seleccionaste a pydos")
    }
}

Asi es como lo pude hacer:

Primero: lo que hice fue crear una variable para cada uno de los Monstruos en JS con document.getElementById.
Segundo: dentro de la funcion SeleccionMonstruo cree las condicionales, si el Monstruo de fuego era seleccionado (鈥榗hecked鈥), saldria una alerta de que lo seleccione, sino saldrian los demas.
Tercero: sino se selecciono ninguno de los Mosntruos y le dimos directamente a Seleccionar, nos saldra que 鈥淣o Seleccionaste a Nadie鈥.

Este fue el intento de soluci贸n a la clase.

function seleccionarMascotaJugador(){
    let mascota1 = document.getElementById('Hipologe').checked
    let mascota2 = document.getElementById('Capipepo').checked
    let mascota3 = document.getElementById('Ratigueya').checked

    if (document.getElementById('Hipologe').checked == true){
        alert("Has seleccionado Hipologe ")
    } else if (document.getElementById('Capipepo').checked == true){
        alert("Has seleccionado Capipepo  ")
    } else if (document.getElementById('Ratigueya').checked == true){
        alert("Has seleccionado Ratigueya ")
    } 

}

Tuve que regresar a revisar la intrucci贸n if y me dio una idea.

Mi solucion fue esta, y ademas le agregue una cuarta opcion que es cuando el usuario no selecciona ningun mokepon, me llevo como 15 minutos pensarlo jajaja que novato soy <(T_T)>

<code> 
function seleccionarMascotaJugador() {
 if(document.getElementById("hipodoge").checked == true)
 alert("SELECCIONASTE A HIPODOGE!")
 else if(document.getElementById("capipepo").checked == true)
 alert("SELECIONASTE A CAPIPEPO!")
 else if(document.getElementById("ratigueya").checked == true)
 alert("SELECIONASTE A RATIGUEYA!")
 else {
    alert("SELECIONA TU MOKEPON!")

excelente clase!!!

(路_路)

Mi aporte a como puede ser solucionado

function checkElement(id) {
    return document.getElementById(id).checked;
}

function selectPlayerPet() {
    let pet = '';

    checkElement('hipodoge') ? pet = "Hipodoge" :
    checkElement('capipepo') ? pet = "Capipepo" :
    pet = "Ratigueya";

    alert("Elegiste a: " + pet)
}


creo que esta forma es simple pero 煤til siendo la m谩s b谩sica para partir

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 馃悁馃敟")
    } else {
        alert("No seleccionaste a ninguna mascota 鈽狅笍")
    }
}

Yo lo elabor茅 de esta manera, donde creo que tambi茅n es una buena alternativa, las funciones las aprend铆 en el anterior curso de programaci贸n b谩sica

// Inicio dek juego
addEventListener("load",inicioJuego)
// arreglo donde guardaremos los mokepones, y la variable para
// manipular el nombre
let inputmokepon = [];
let nameMokepon

function inicioJuego()
{
    // obtenemos el boton desde el archivo html
    let botonMokepon = document.getElementById("mokepon");
    botonMokepon.addEventListener("click",seleccionMokepon);

    // los a帽adimos al final del arreglo con la funcion push
    inputmokepon.push(document.getElementById("hipodoge"))
    inputmokepon.push(document.getElementById("capipepo"))
    inputmokepon.push(document.getElementById("ratigueya"))
    inputmokepon.push(document.getElementById("langostelvis"))
    inputmokepon.push(document.getElementById("tucapalma"))
    inputmokepon.push(document.getElementById("pydos"))

    
}

function seleccionMokepon()
{
    /* Este tipo de for recorre todo un arreglo y el 
    indice lo guardamos en la variable i */
    for(var i in inputmokepon)
    {
        if(inputmokepon[i].checked == true)
        {
            // guardamos el id como un string que contiene el nombre en la variable
            nameMokepon = inputmokepon[i].id
            nameMokepon = nameMokepon.charAt(0).toUpperCase()+nameMokepon.slice(1)
            /* El metodo charAt obtiene la priemra letra del string
            y el metodo toUpperCase la convierte a mayuscula, ademas el
            metodo slice corta el sobrante a partir de la posicion*/
            alert("Seleccionaste a "+nameMokepon)
        }
        else
        {
            // si el usuario no ha seleccionado nada, con el break
            // finalizamos el ciclo for
            alert("No seleccionaste nada")
            break 
        }
    }
}

El profe Juan es el mejor

deje de estudiar en el colegio para estudiar con los mejores profes 馃槂

Hola:

Aqu铆 comparto mi soluci贸n para seleccionar a nuestra mascota:

function seleccionaMascotaJugador(nombreMascota){
  let selHipodoge=document.getElementById("hipodoge");
  let selCapipepo=document.getElementById("capipepo");
  let selRatigueya=document.getElementById("ratigueya");

  if (selHipodoge.checked){
    nombreMascota="Hipodoge"
  }
  else if (selCapipepo.checked){
    nombreMascota="Capipepo"
  }
  else if (selRatigueya.checked){
    nombreMascota="Ratigueya"
  }
  alert("Seleccionaste a " + nombreMascota);
}

function iniciarJuego(){
  let botonMascotaJugador=document.getElementById("boton_mascota");
  botonMascotaJugador.addEventListener("click", seleccionaMascotaJugador);
}

window.addEventListener("load", iniciarJuego);

Me gustar铆a mucho conocer sus opiniones 馃槃.

Asi lo hice!!

function iniciarJuego() {
  alert("Carga la pagina");
  let botonMascotaJugador = document.getElementById('boton-mascota');
  botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
}

function seleccionarMascotaJugador() {
    //Accedo a las opciones
  let hipodoge = document.getElementById('hipodoge')
  let capipepo = document.getElementById('capipepo')
  let ratigueya = document.getElementById('ratigueya')

  if(hipodoge.checked){
    alert('Seleccionaste el hipodoge')
  }
  if(capipepo.checked){
    alert('Seleccionaste el capipepo')
  }
  if(ratigueya.checked){
    alert('Selecccionaste el ratigueya')
  }


}

window.addEventListener('load', iniciarJuego);

As铆 lograr铆a ser el codigo para hipodoge

 if ((document.getElementById('hipodoge').checked)==true){
      seleccionarMascotaJugador = "Hipodoge"
    }

Hola a todos, yo lo solucione solo escribiendo el nombre de la mascota. checked en la funcion de seleecionarMascotaJugador, segun como lo escribi en el atributo id del input y me funciono, PD. los nombres de las mascotas son diferentes pero la logica es segun lo que vamos aprendiendo, exitos a todos 馃挭馃徎

Juan David, gracias me encanta tu estilo

Este es mi Intento 鈥 馃挧馃敟馃尡

Algo que no me quedo claro es que hariamos si el jugador no seleccciona ninguna opcion y preciona el boton defrente .

variable.addEventListener(鈥渃lick鈥, funcionA) = Entendi que esto sirve para escuchar el evento y asignar que tipo de evento sera escuchado, en este caso 鈥渃lick鈥 y con respecto al click cuando presione el jugador se le asignara una funci贸n como respuesta como podria ser un alert(鈥渞espuesta texto鈥).

document.getElementById(鈥渁ca-serespecifico鈥) = entend铆 que es para encontrar un elemento Id de html para ser tra铆do a JavaScript, en el video se invoco a un button, con id=(鈥渂oton-mascota鈥)

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

4:22 se le salieron los demonios con el boom

As铆 es mi soluci贸n

function seleccionarMascotaJugador() {
  let hipodoge = document.getElementById("hipodoge").checked;
  let capipepo = document.getElementById("capipepo").checked;
  let ratigueya = document.getElementById("ratigueya").checked;

  if (hipodoge === true) {
    alert("Seleccion贸 hipodoge ");
  } else if (capipepo === true) {
    alert("Seleccion贸 capipepo ");
  } else {
    alert("Seleccion贸 ratigueya");
  }
}

siempre se tiene el miedo cuando el profesor es cambiado por otra persona, ya que en la gran mayor铆a de veces pensamos que su pedagog铆a sera diferente y eso podr铆a complicar un poco las cosas, pero en este caso fue lo contrario 馃槉 me gusta mucho la manera en que explica las clases y como nos genera distintas soluciones para el mismo problema. muchas gracias por tanta dedicaci贸n.

Esta es mi propuesta

function iniciarJuego() {
    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 hipodoge")
        } else if (capipepo == true) {
            alert("Elegiste capipepo")
        } else if (ratigueya == true) {
            alert("Elegiste ratigueya")
        } else{
            alert("No elegiste nada")
        }
    }

    let btnMascota = document.getElementById("seleccionar")

    btnMascota.addEventListener("click", seleccionarMascotaJugador)
}

window.addEventListener("load", iniciarJuego)

Esta fue mi soluci贸n en c贸digo

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

Esto me gusta demasiadoooooo, Juan DC GRACIAS por explicar todo de manera sencilla y agradable

Excelentes las explicaciones.
Muchas gracias鈥

Esta l贸gica us茅!

function selectPetPlayer() {
    if (document.getElementById('burnling').checked) {
        alert('Burnling yo te elijo!')
        
    } else if (document.getElementById('armasaur').checked) {
        alert('Armasaur yo te elijo!')

    } else if (document.getElementById('rocky').checked) {
        alert('Rocky yo te elijo!')
        
    } else {alert('Selecciona a tu mascota!')}
}

Esta es mi propuesta del ejercicio, no se si existan otras formas m谩s avanzadas.
.

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

La forma en como hice que funcionara

function seleccionarMascotaJugador() {
    if(document.getElementById("hipodoge").checked == true){
        alert("Escogiste a Hipodoge")
    }else if(document.getElementById("capipepo").checked == true){
        alert("Escogiste a Capipepdo")
    }else{
        alert("Escogiste a Ratigueya")
    }
}

es poco pero iniciando voy bien espero, ahora integrar los gif y/o ipg de las mascotas
function iniciarJuego(){
let botonMascotaJugador = document.getElementById(鈥榖oton-mascota鈥)
botonMascotaJugador.addEventListener(鈥榗lick鈥, selecionarMascotaJugador)
}

function selecionarMascotaJugador(){

    if(document.getElementById('cangrejo').checked) {
        alert('Has seleccionado el cangrejo')
    } 
    else if(document.getElementById('serpiente').checked) {
        alert('Has seleccionado a la serpiente')
    } 
    else if(document.getElementById('dragon').checked) {
        alert('Has seleccionado  el dragon')
    } 
    else if(document.getElementById('aguila').checked) {
        alert('Has seleccionado el agula')
    } 
    else if(document.getElementById('tortuga').checked) {
        alert('Has seleccionado a la tortuga')
    } 
    else if(document.getElementById('sapo').checked) {
        alert('Has seleccionado al sapo')
    } 
    else if(document.getElementById('escorpion').checked) {
        alert('Has seleccionado el escorpion')
    } 
    else if(document.getElementById('alcon').checked) {
        alert('Has seleccionado el alcon')
    } 
    else if(document.getElementById('rata').checked) {
        alert('Has seleccionado a la rata')
    } 
}

Mi logica馃


function seleccionarMascotaJugador() {
    if(document.getElementById('hipodoge').checked) {
        alert('SELECCIONASTE HIPODOGE');
    } else if(document.getElementById('capipepo').checked) {
        alert('SELECCIONASTE CAPIPEPO');
    } else if(document.getElementById('ratigueya').checked) {
        alert('SELECCIONASTE RATIGUEYA');
    }
}