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

addEventListener

20/84
Recursos

Aportes 57

Preguntas 25

Ordenar por:

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

la actitud del profe Juan siempre es muy contagiosa 馃槃

Esta fue la forma en que lo hice ya que, else es como 鈥渟i no es ninguna de las anteriores鈥 y arrojo una alerta que diga que debe seleccionar una mascota.

La energ铆a del profesor es muy contagiosa! As铆 uno se entusiasma mucho m谩s a la hora de aprender. 馃榾馃捇

Mi soluci贸n, intente hacerla un poco m谩s organizada:

Conforme avanzo en el curso me voy percatando de la importancia de contar con un pensamiento estructurado y l贸gico antes de poder avanzar con todo el proceso de desarrollo y escritura de c贸digo. Es un campo totalmente nuevo para mi y me est谩 suponiendo un reto complejo, pero a la vez lo disfruto. Muchas gracias por las aportaciones querida comunidad.

Este es mi c贸digo JS

Y por supuesto, Deber铆a explicar algunas cosas!!

Yo llamo a las mascotas mokepones de una vez.

Esto que ves es un ARRAY

let mokepones = ['hipodoge', 'capipepo', 'ratigueya', 'langostelvis', 'tucapalma'] 

Es un elemento que guarda un conjunto de elementos. Puedes guardar entre estos corchetes [ ] tantos elementos como quieras, separados por comas y darles un nombre de variable. Pueden ser n煤meros, strings, objetos, funciones u otras variables.
Esto se va a mencionar seguramente mientras avance el curso, as铆 que esto es un spoiler.

Anteriormente, ya vimos el ciclo while, y funciona as铆:
MIENTRAS(la condici贸n se verdad){
Realiza una y otra vez este c贸digo
}

Yo uso el ciclo for que funciona asi:

La variable i es un valor que debe iniciar en 0. el ciclo se repetir谩 hasta que i valga 10, y en cada repetici贸n a i se le sumara 1. Asi que lo que al inicio era 0 terminara siendo 10 en la d茅cima repetici贸n y terminara el ciclo.

Los array pueden usar muchos m茅todos para ser manipulados o le铆dos. El m茅todo length sirve para saber cuantos elementos tiene un array. Asi que al decir i = mokepones.lenth, como mokepones tiene 5 elementos, el _for _se repetir谩 5 veces.

Luego est谩 el operador ternario, una belleza de JavaScript. Funciona como el **if **, el if else y el else. Ser铆a algo as铆:

talcosa es verdad ? haz esto : o esto es verdad ? haz esto otro : sino haz esto

Los dos puntos funcionan como un if else o como un _else _si al final no hay m谩s condiciones.

charAt() devuelve el primer caracter de un string y toUpperCase() convierte todo un string en may煤sculas.

al usar slice(1) estamos haciendo que al string se le reste el primer caracter.

Una forma de reducir el codigo funcional con metodos mas avanzados.

iniciarJuego = () => {
let buttonMascotas = document.getElementById('button-mascotas');
    buttonMascotas.addEventListener('click',seleccionMascotas)
}

seleccionMascotas = () => {
// querySelectorAll genera un arreglo con todos los elementos similares 
let inputMascotas = document.querySelectorAll('#seleccionar-mascotas input')

let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"]

//forEach es el metodo de recorrer un arreglo.
inputMascotas.forEach(function(valor, indice){
 if(valor.checked == true){
  alert(`Usted ha seleccionado ${nombresMascotas[indice]}`)
            }
        })
}

window.addEventListener('load', iniciarJuego)

鈥淐apipeo鈥 jajajaja q gran clase

OjO = El audio de la clase est谩 muy bajo. No tienen que ajustar sus bocinas/audifonos.

Juan:
鈥淪elecciona una mascota鈥
.
Freddy:
SELECCIONASTE PERDER

De esta forma lo hice yo.

window.addEventListener("load", () =>{
    const btnSeleccionar = document.getElementById("btn-mascota");
    btnSeleccionar.addEventListener("click", ()=>{
        const radioHipoDoge = document.getElementById("hipodoge");
        const radioCapipepo = document.getElementById("capipepo");
        const radioRatigueya = document.getElementById("ratigueya");

        if(radioHipoDoge.checked){
            alert("seleccionaste a Hipodoge");
        }else if(radioCapipepo.checked){
            alert("seleccionaste a Capipepo");
        }else if(radioRatigueya.checked){
            alert("seleccionaste a Ratigueya" );
        }else{
            alert("selecciona un MOKEPON!");
        };
    });
})

Yo agregue el else pero no lo deje en corchetes sino en par茅ntesis normal y me funcion贸

if (inputHipodoge.checked)
        alert("Seleccionaste a Hipodoge")
    else if (inputCapipepo.checked)
        alert("Seleccionaste a Capipepo")
    else if (inputRatigueya.checked)
        alert("Seleccionaste a Ratigueya")
    else if (inputLangostelvis.checked)
        alert("Seleccionaste a Langostelvis")
    else if (inputTucapalma.checked)
        alert("Seleccionaste a Tucapalma")
    else if (inputPydos.checked)
        alert("Seleccionaste a Pydos")
    else (
        alert("No has seleccionado mascota"))

El alerta para asegurar se seleccione una mascota lo agregue al final, despu茅s de ejecutar los else if y ninguno aplica entonces agregue un else para que se dispare el alerta

Tambien puedes usar el signo de dolar para evitar todo eso del document.getElementById

El profesor es muy talentoso. Comenz贸 muy joven. Es brillante. Pienso que tiene un gran futuro

he visto que por ejemplo palabras muy largas las guardan en constantes (const), para cuando se este escribiendo c贸digo no se vea tan extenso y poco legible

ej:


const  d = document,

asi ya no seria:

document.getElementById...
sino
d.getElementById...

de igual forma en principio no todas las variables deben necesariamente expresarse let por let puedes una sola vez y luego separado por comas seguir agregando las variables que necesites.

asi ya no seria:

let sss,
let fff,
let ttt,

sino

let sss,
     ffff,
     ttt.

cosas as铆 desde el principio nos ayuda a no ser tan verbosos innecesariamente en nuestros c贸digos.

Activar el boton solo cuando se seleccione una mascota

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

function seleccionarMascotaJugador(boton) {
  boton.disabled = true

  function mascotaSeleccionada() {
    if (inputHipodoge.checked) {
      alert('Hipodoge')
    } else if (inputCapipepo.checked) {
      alert('Capipego')
    } else {
      alert('Ratigueya')
    }
  }

  function activarBotonSeleccionar() {
    boton.disabled = false
    boton.addEventListener('click', mascotaSeleccionada)
  }

  let inputHipodoge = document.querySelector('#hipodoge')
  let inputCapipepo = document.querySelector('#capipepo')
  let inputRatigueya = document.querySelector('#ratigueya')
  inputHipodoge.addEventListener('click', activarBotonSeleccionar)
  inputCapipepo.addEventListener('click', activarBotonSeleccionar)
  inputRatigueya.addEventListener('click', activarBotonSeleccionar)
}

window.addEventListener('load', iniciarJuego)

a mi me funciono asi pero creo que el profe los guardo en variables para utilizarlos en otra funcion y no tener que hacer todo de nuevo.
function seleccionaMascotaJugador() {
if(hipodoge.checked){
alert(鈥楨legiste a Hipodoge鈥)
}
if(capipepo.checked){
alert(鈥楨legiste a Capipepo鈥)
}
if(ratigueya.checked){
alert(鈥楨legiste a Ratigueya鈥)
}
}

Algunas cosas hice mal, lo que mejor pude hacer fue verificar el Github en aportes y comparar mi c贸digo con el de el profe Juan, lo realice como veces por que no me daban unas cosas, lo que mas me motivaba era que si lograba arreglar cosas peque帽as poco a poco. pero si fue fundamental soportarme del GitHub y de la clase.

aqu铆 mi c贸digo, pido disculpas si es exactamente como el del profe, prometo que cuando tenga mejor dominio volver茅 a publicar mi aporte desde mi experiencia.

<code> 
function seleccionarMascotaJugador(){
        let inputHipodoge = document.getElementById ("hipodoge") 
        let inputCapipepo = document.getElementById ("capipepo")
        let inputRatigueya = document.getElementById("ratigueya")

        if (inputHipodoge.checked){
            alert("Seleccionaste a Hipodoge")
        } else if (inputCapipepo.checked) {
            alert("seleccionaste a Capipepo")
        } else if (inputRatigueya.checked) {
            alert("Seleccionaste a Ratigueya")
        } else {
            alert("Selecciona una mascota")
        }
    }  

Hola yo lo estoy creando de la misma manera pero con los personajes del dibujo animado 鈥淎vatar鈥

Me encanta la manera de hablar de Juan 馃槃

El profe juan se llama como mi hijo , juan de 13 a帽os voy hacer que sea un gran progamador

excelente. Me encata como va explicando Juan, me animo mucho m谩s para seguir aprendiendo

Mi c贸digo del ejercicio en JS

yo lo hice cuando se dio tiempo para realizarlo y lo hice asi y funciono, como ya se habia especificado en una funcion que por metodo de click se llmaba al input no hubo necesidad de agregarle nada mas, perooooooooo no se guardo en variable ni nada es como si quedara en el aire la funcion

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

function seleccionarMascotaJugador(){
if (hipodoge.checked) {
alert(鈥渉as selecionado a hipodoge鈥)
}
else if (capipepo.checked) {
alert(鈥渉as seleccionado a capipepo鈥)
}
else if (ratigueya.checked){
alert(鈥渉as seleccionado a ratigueya鈥)
}
}

Capipeo
jaajajaajajajajajajaj

Lo hice de esta manera, no s茅 si est谩 bien pero funciona.

function seleccionarMascotaJugador (){
    let inputHipodoge = document.getElementById("Hipodoge")
    let inputCapipepo = document.getElementById("Capipepo")
    let inputSaliguella = document.getElementById("Saliguella")
    let inputBotonSeleccion = document.getElementById("boton-mascota")
    if (inputHipodoge.checked) {
    alert('Usted ha seleccionado Hipodoge')
    }
    else if (inputCapipepo.checked){
    alert ('Usted ha seleccionado Capipepo') 
    }
    else if (inputSaliguella.checked){
    alert ("Usted ha seleccionado Saliguella")
    }
    else if (inputBotonSeleccion.click) {
    alert ("Debes seleccionar una mascota")
    }
}

Excelente, me gusta que avanzamos paso a paso para no confundirnos, aqui mi avance:

function confirmarSeleccionJugador1() {
    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) {
        alert('Has seleccionado al ajolote')
    } else if(seleccionTopo.checked) {
        alert('Has seleccionado al topo')
    } else if(seleccionHormigaDeFuego.checked) {
        alert('Has seleccionado a la Hormiga de fuego')
    } else if(seleccionKomodo.checked) {
        alert('Has seleccionado al Drag贸n de Komodo')
    } else if(seleccionTortuga.checked) {
        alert('Has seleccionado a la tortuga')
    } else if(seleccionCaballoDeMar.checked) {
        alert('Has seleccionado al Caballo de mar')
    } else {
        alert('Por favor, elige un Mokepon')
    }
}

Muy buena clase

Esto esta muy divertido. Asi voy yo con esta funcion (agregando todos los Mokepons).

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

    if (inputHipodoge.checked) {
        alert('Seleccionaste a Hipodoge')
    } else if (inputCapipepo.checked) {
        alert('Seleccionaste a Capipepo')
    } else if (inputRatigueya.checked) {
        alert('Seleccionaste a Ratigueya')
    } else if (inputLangostelvis.checked) {
        alert('Seleccionsate a Langostelvis')
    } else if (inputTucapalma.checked) {
        alert('Seleccionaste a Tucapalma')
    } else if (inputPydos.checked) {
        alert('Seleccionaste a Pydos')
    } else {
        alert('Selecciona tu mascota')
    }
}

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

function seleccionarMascotaJugador() {
let inputHipodoge = document.getElementById(鈥榟ipodoge鈥)
let inputCapipepo = document.getElementById(鈥榗apipepo鈥)
let inputRatigueya = document.getElementById(鈥榬atigueya鈥)

if (inputHipodoge.checked) {
    alert('seleccionaste a Hipodoge')
} else if (inputCapipepo.checked) {
    alert('seleccionaste a capipepo')
} else if(inputRatigueya.checked) {
    alert('seleccionaste a ratigueya')
}   

}

function selecionarMascotaJugador() {
alert(鈥楽ELECIONASTE UNA MASCOTA鈥)
}

window.addEventListener(鈥榣oad鈥, iniciarJuego)

Este es mi aporte, para poder seleccionar un mokepon de forma din谩mica.

function seleccionarMascotaJugador(){
    let mascotaSeleccionada = document.querySelector('input[name="mascota"]:checked')

    if(mascotaSeleccionada == null){
        alert("Selecciona una mascota")
    }else{
        alert("Mascota seleccionada " + inicialMayuscula(mascotaSeleccionada.id))
    }

}

function inicialMayuscula(cadena){
    return cadena.charAt(0).toUpperCase() + cadena.slice(1)
}

asi es mi logica

function seleccionarMascotaJugador() {
    // alert('SELECCIONASTE LA MASCOTA')
    let hipodoge = document.getElementById('hipodoge');
    let capipepo = document.getElementById('capipepo');
    let ratigueya = document.getElementById('ratigueya');

    if (hipodoge.checked) {
        alert('Elegiste Hipodoge')
    } else if (capipepo.checked) {
        alert('Elegiste Capipepo')
    } else if (ratigueya.checked) {
        alert('Elegiste Ratigueya')
    } else {
        alert('No elegiste ninguna mascota')
    }
}```

} else {
alert(鈥楴o ha realizado una seleccion鈥)

Le cambie los Nombres y le puse emoticones 馃槈_

. 鈥 .鈥. . .-. 鈥 / --.- 鈥- . / .-鈥 . 鈥 / --. 鈥- 鈥 - .

function iniciarJuego(){
    let botonMacotaJugador = document.getElementById("boton-mascota")
    botonMacotaJugador.addEventListener("click", seleccionarMascotaJugador)
   
}
function seleccionarMascotaJugador(){
    let inputHipos = document.getElementById ("hipos")
    let inputPlejo = document.getElementById ("plejo")
    let inputRanty = document.getElementById ("ranty")
    let inputTelvi = document.getElementById ("telvi")
    let inputPalma = document.getElementById ("palma")
    let inputPhyno = document.getElementById ("phyno")

    if (inputHipos.checked) {
        alert('Tu mascota es Hipos 馃')
    } else if (inputPlejo.checked) {
        alert('Tu mascota es Plejo 馃')
    } else if (inputRanty.checked) {
        alert('Tu mascota es Ranty 馃悤')
    } else if (inputTelvi.checked) {
        alert('Tu mascota es Telvi 馃')
    } else if (inputPalma.checked) {
        alert('Tu mascota es Palma 馃悊')
    } else if (inputPhyno.checked) {
        alert('Tu mascota es Phyno 馃悕')
    }else {
        alert('No has seleccionado ninguna')
    }
}

window.addEventListener("load", iniciarJuego)

Para que tengan todo el c贸digo en pantalla sin necesidad de usar el scroll lateral es VSCODE, puedes hacer esto:

Vete a view y ve abajo, selecciona word wrap o puedes usar el comando alt + z

No lo voy a negar, me sent铆a raro cuando nos quitaron al profe Freddy, pero me encanta como explica el profe Juan David: Te detiene a pensar y que tu cerebro se mantenga activo y no solo est茅s prestando atenci贸n a lo zombie, adem谩s, cuando mi respuesta es similar a la que se esperaba me hace darme cuenta que SI estoy aprendiendo a pesar de lo que uno cree.

Que alegr铆a, pude escribir la l铆nea de c贸digo que faltaba para que me lanzara un mensaje cuando se nos olvide seleccionar una mascota. Algunos les parecer谩 algo muy b谩sico, pero yo lo celebro y agradezco por este reto cumplido. Gracias Juan

Ay me sali贸 algo!
Que felicidad. Quizas es peque帽o pero para mi mucho.
En el final de la clase pude hacer sola el alerta para que Seleccione una mascota 馃槂

鈥 puuum! f铆jate lo que nos dice馃ぃ馃ぃ

sin duda, cuando el c贸digo funciona es: " a este momento de mi vida le llamo felicidad"

Yo lo hice de esta manera cuando pidieron hacer pausa al video. llam茅 directamente a los inputs e hice la validaci贸n dentro de la condicional. De esta manera consegu铆 hacer menos l铆neas de c贸digo. Espero ayude este aporte 馃槂

Yo lo hice as铆! 馃槃

<function seleccionarMascotaJugador(){ 
    let inputHipodoge = document.getElementById("Hipodoge");
    let inputCapipepo = document.getElementById("Capipepo");
    let inputRatigueya = document.getElementById("Ratigueya");

    if (inputHipodoge.checked){
        alert("Seleccionaste a Hipodoge ")
    } else if (inputCapipepo.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 (inputRatigueya.checked == true){
        alert("Seleccionaste a Ratigueya ")
    } else (document.getElementById.checked == false);{
        alert("隆Ops! Olvidaste seleccionar alguna de las mascotas. 馃槄");
    }
}> 

pausando la clase, realic茅 la siguiente formula que aprend铆 con Freddy.

luego de los if鈥檚 sobre cada input . debajo puse la siguiente formula.
else {
alert(鈥楴o elegiste nadda鈥)
}

PD: estos profesores ense帽an muy claramente, vamos a por m谩s.

Dejo por aqu铆 mi aporte, una forma de reducir m谩s el c贸digo.

Sin duda esta clase de programacion basica puede motivar a muchos 馃槂

Ac谩 una versi贸n en ingles sin utilizar bucles, requiere algunos conceptos intermedios de JS pero quise darle un toque personal.

function selectPlayerPet() {
    // get all the pets
    const pets = document.getElementsByName('pet');
    //turn pets into an array
    const petlist = Array.prototype.slice.call(pets);
    //find selected pet
    const pet = petlist.find((element) => element.checked == true)?.id;
    const petShout = typeof pet !== 'undefined' ? pet.toUpperCase() : '';
    const message =
        petShout == ''
            ? 'Please select a pet'
            : 'YOU HAVE PICKED YOUR PET, ' + petShout + '!!!';
    alert(message);
}

Para cuando no se haya seleccionado niguna mascota, a帽ad铆 el 鈥榚lse鈥, asi cuando no se seleccione ninguna mascota y se presione el bot贸n de seleccionar, me salga una alerta de que no seleccione nada. (Min 10:29)

Asi esta mi codigo javascript

A alguien mas su voz le recuerda a Carlo V谩zquez? (Voz de Max de Dino rey, Star-lord, Satoru de Inazuma Eleven)

Una forma diferente

function seleccionMascotaJugador(){

    function input(nombreMascota){

        document.getElementById(nombreMascota)

        return document.getElementById(nombreMascota)
    }


    if (input("hipodoge").checked){
        mascota = "Hipodoge"
    } else if (input("capipepo").checked){
        mascota = "Capipepo"
    } else if (input("ratigueya").checked){
        mascota = "Ratigueya"
    }

    alert('Seleccionaste ' + mascota)
}

let botonMacotaJugador = document.getElementById('seleccionar')
botonMacotaJugador.addEventListener('click', seleccionMascotaJugador)
function seleccionMascotaJugador(){
    
    if (document.getElementById('hipodoge').checked){
        mascota = "Hipodoge"
    } else if (document.getElementById('capipepo').checked){
        mascota = "Capipepo"
    } else if (document.getElementById('ratigueya').checked){
        mascota = "Ratigueya"
    }

    alert('Seleccionaste ' + mascota)
}

let botonMacotaJugador = document.getElementById('seleccionar')
botonMacotaJugador.addEventListener('click', seleccionMascotaJugador)

En mi caso lo manej茅 de la siguiente manera:

  • El mensaje que alerta cu谩l mascota escogiste lo divid铆 en otra funci贸n.
  • Declar茅 una nueva funci贸n en donde ir谩n los condicionales y al enviar el mensaje de la mascota seleccionada llam茅 a la funci贸n de la alerta.

Perd贸n si hay errores en ingl茅s, trato de practicarlo.

// Alert of what pet the player chose
function selectPetMessage(petIchose){
    alert("Seleccionaste a " + petIchose)
}

// Defines the player's mokepone
function selectMokepon() {
    // selection variables
    let inputCharmander = document.getElementById('charmander')
    let inputSquirl = document.getElementById('squirl')
    let inputBulbasur = document.getElementById('bulbasur')
    let inputLangostelvis = document.getElementById('langostelvis')
    let inputTucapalma = document.getElementById('tucapalma')
    let inputPydos = document.getElementById('pydos')
    
    //Conditionals with ternary operators
    inputCharmander.checked ? selectPetMessage('Charmander'):
        inputSquirl.checked ? selectPetMessage('Squirl') :
        inputBulbasur.checked ? selectPetMessage('Bulbasur'):
        inputLangostelvis.checked ? selectPetMessage('Langostelvis'):
        inputTucapalma.checked ? selectPetMessage('Tucapalma'):
        inputPydos.checked ? selectPetMessage('Pydos'): alert("NO SE HA SELECCIONADO NINGUN Mokepon!");
}

Yo lo hice de esta manera.

Para aquellos que les gustar铆a evitar utilizar tantos if juntos, les dejo una soluci贸n un poco diferente y as铆 puedan tener otra perspectiva de como hacer una misma soluci贸n pero con un c贸digo diferente 馃槃.

No te preocupes si aun no entiendes algunas cosas de este c贸digo m谩s adelante lograr谩s entenderlo, y recuerda nunca pares de aprender 馃挋.

function seleccionarMascotaJugador() {
    const petSelected = document.querySelector('input[name="mascota"]:checked')

    if(petSelected) {
        return alert(`seleccionaste a ${petSelected.id}`)
    }

    return alert('Selecciona una mascota!')
}

Yo lo hice de esta manera directa sin crear variables y funciona igual, el == true no es necesario pero lo deje por redundancia

function seleccionarMascotaJugador() {
    if(hipodoge.checked == true) {
        alert("Seleccionaste a hipo!")
    } else if (capipepo.checked == true) {
        alert("Seleccionaste a capipepo!")
    } else if (ratigueya.checked == true) {
        alert("Seleccionaste a ratigueya!")
    } else {
        alert("Necesitas seleccionar un Mokepon!")
    }
}

Una forma sencilla de obtener el valor del mokepon es capturando en el eventListener ya sea del bot贸n o del submit de un formulario el input que tenga la propiedad checked de esta manera: Usando el selector al momento de disparar el evento de seleccionar mokepon, javascript lee el input que tenga la propiedad name = mokepon y posea la propiedad :checked (seleccionado) por lo tanto, una vez tengamos ese valor extraemos la propiedad id que contiene nuestra selecci贸n y obtenemos el nombre.


const $mokeponForm = document.querySelector('#mokepon-form');
const $btnSelectMokepon = $('#btn-select-mokepon');

const chooseMokepon = (e) => { 
  e.preventDefault(); 
  const $selectedMokepon = document.querySelector('input[name=mokepon]:checked');
  const { id: mokeponValue } = $selectedMokepon;
  if (!mokeponValue) return;

  console.log(mokeponValue);
}

const startMokeponGame = () => { 
  $mokeponForm.addEventListener('submit', e => chooseMokepon(e));
}


window.addEventListener('load', startMokeponGame) 

mokepon.js

    <form id="mokepon-form">
      <input type="radio" name="mokepon" id="hipodoge">
      <label for="hipodoge">Hipodoge</label>
  
      <input type="radio" name="mokepon" id="capipego">
      <label for="capipego">Capipego</label>
  
      <input type="radio" name="mokepon" id="ratigueya">
      <label for="ratigueya">Ratigueya</label>
  
      <input type="radio" name="mokepon" id="langostelvis">
      <label for="langostelvis">Langostelvis</label>
  
      <input type="radio" name="mokepon" id="tucalpalma">
      <label for="tucalpalma">Tucalpalma</label>
  
      <input type="radio" name="mokepon" id="pydos">
      <label for="pydos">Pydos</label>
      <button id="btn-select-mokepon">Seleccionar</button>
    </form>
    

mokepon.html

JuanDC he notado con Freddy, y ahora contigo, que no utilizan ni se menciono el uso del punto y coma en JS.
Han llegado a algun tipo de estandarizaci贸n/acuerdo?