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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
3H
29M
9S

Enemigos aleatorios

22/84
Recursos

Aportes 211

Preguntas 118

Ordenar por:

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

o inicia sesi贸n.

Muy feliz de ver clases con Timothy Chalamet y lo divertido de aprender asi.

Como todos somos muy de hacer lo que no nos pide un programa 鈥減ara ver que pasa鈥 por simples curiosos鈥 agregue que si el jugador no selecciona mascota entonces la PC tampo tiene que hacerlo

//Funcion de escucha del evento load del documento y evento click del boton
window.addEventListener('load', () => {
  let btnMascota = document.getElementById('btn-mascota');
  btnMascota.addEventListener('click', selecionarMascota);
});

//Funcion de Selecionar Mascota
function selecionarMascota() {
  //Declaracion de Variables
  let jugar = 1;
  let inputHipodoge = document.getElementById('hipodoge');
  let inputCapipepo = document.getElementById('capipepo');
  let inputRatigueya = document.getElementById('ratigueya');
  let inputLangostelvis = document.getElementById('langostelvis');
  let inputTucapalma = document.getElementById('tucapalma');
  let inputPydos = document.getElementById('pydos');
  let mascotaJugador = document.getElementById('mascota_juador');
  //Comprueba Seleccion y Cambia el DOM con la mascota selecionada
  if (inputHipodoge.checked) {
    mascotaJugador.innerHTML = 'Hipodoge';
  } else if (inputCapipepo.checked) {
    mascotaJugador.innerHTML = 'Capipepo';
  } else if (inputRatigueya.checked) {
    mascotaJugador.innerHTML = 'Ratigueya';
  } else if (inputLangostelvis.checked) {
    mascotaJugador.innerHTML = 'Langostelvis';
  } else if (inputTucapalma.checked) {
    mascotaJugador.innerHTML = 'Tucapalma';
  } else if (inputPydos.checked) {
    mascotaJugador.innerHTML = 'Pydos';
  } else {
    alert('Debes selecionar una mascota');
    jugar = 0;
  }
  /*Esta condicion solo se cumple si el jugador selecciono una mascota
  entonces la Pc seleccionara su mascota y comenzara el juego*/
  if (jugar == 1) {
    seleccionarMascotaEnemigo();
  }
}

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

//Funcion seleccion de mascota del enemigo
function seleccionarMascotaEnemigo() {
  let mascotaEnemigo = aleatorio(1, 6);
  let mascotaRival = document.getElementById('mascota_enemigo');
  if (mascotaEnemigo == 1) {
    mascotaRival.innerHTML = 'Hipodoge';
  } else if (mascotaEnemigo == 2) {
    mascotaRival.innerHTML = 'Capipepo';
  } else if (mascotaEnemigo == 3) {
    mascotaRival.innerHTML = 'Ratigueya';
  } else if (mascotaEnemigo == 4) {
    mascotaRival.innerHTML = 'Langostelvis';
  } else if (mascotaEnemigo == 5) {
    mascotaRival.innerHTML = 'Tucapalma';
  } else {
    mascotaRival.innerHTML = 'Pydos';
  }
}

Cuando Juan dice que que va a pedirle prestada la funci贸n de aleatoriedad a Freddy

Gracias joven manos de tijera por ponerle tanta emoci贸n a este curso

Un metodo de ahorrar codigo es con los arreglos

Literalmente no me funcionaba, me puse a leer el c贸digo y encontr茅 que me faltaba una " } "
Me faltaba una llavecita!!! Que bueno que ya me funcion贸, gracias 鉂わ笍

Ten铆a que llegar el d铆a en que ya no se usara el ;

Buenos dias, de acuerdo con lo que menciono freddy en las primeras clases que las funciones deberian declararse o definirse nates de ser usadas , creo que estamos haciendolo mal ya que la declaramos luego de usarla , a modo de opinion

He tenido que repasar esta clase m谩s de tres veces.馃ぃ

He agregado una nueva funcionalidad: si el usuario da clic en 鈥淪eleccionar鈥 sin haber seleccionado una mascota, el juego le dir谩 鈥淣o seleccionaste una mascota. Tu mascota ser谩 seleccionada aleatoriamente鈥 y le asignar谩 una:

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

function seleccionarMascotaJugador() {
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let spanMascotaJugador = document.getElementById("mascota-jugador")

    if (inputHipodoge.checked) {
        spanMascotaJugador.innerHTML = "Hipodoge"
    } 
    else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = "Capipepo"
    } 
    else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = "Ratigueya"
    } 
    else {
        alert("No seleccionaste una mascota. Tu mascota ser谩 seleccionada aleatoriamente")

        seleccionarMascotaJugador()    

        function seleccionarMascotaJugador() {
            
            let seleccionAleatoria = aleatorio(1,3)
        
            if (seleccionAleatoria == 1) {
                spanMascotaJugador.innerHTML = "Hipodoge"
            } else if (seleccionAleatoria == 2) {
                spanMascotaJugador.innerHTML = "Capipepo"
            } else {
                spanMascotaJugador.innerHTML = "Ratigueya"
            }
        }    

    }

    seleccionarMascotaEnemigo()
}

function seleccionarMascotaEnemigo() {

    let ataqueAleatorio = aleatorio(1,3)
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
    
    if (ataqueAleatorio == 1) {
        spanMascotaEnemigo.innerHTML = "Hipodoge"
    } else if (ataqueAleatorio == 2) {
        spanMascotaEnemigo.innerHTML = "Capipepo"
    } else if (ataqueAleatorio) {
        spanMascotaEnemigo.innerHTML = "Ratigueya"
    }
}

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

window.addEventListener ("load", iniciarJuego)

No sab铆a que se pod铆a poner una funci贸n dentro de otra, excelente clase 馃槃

Comparto como llevo el c贸digo de nuestro juego hasta el momento!!

JavaScript

HTML

Tengo que decir que soy alguien con nulo conocimiento en programaci贸n
Llevo casi tres semanas en esto y y aun se me dificulta poner la sintaxis correcta y debo mirar constantemente lo que ponen los maestros, pero algo que disfruto bastante es la deducci贸n, como dije soy alguien con escaso conocimiento en esto por lo que el c贸digo no me sale a la primera, pero lo que hago es observar lo que hay en el video para ver que me sali贸 mal, a veces llego a tardar mucho en descubrirlo pero pongo toda mi persistencia para analizar todo y ver el error, y eso que apenas estoy empezando, ya me imagino cuando vaya mas lejos, ah铆 se que empezar谩 el trabajo duro.

Agradezco haberme topado con este curso, estoy aprendiendo como puedo, tambi茅n aprendo mucho de los que aportan en los comentarios

Que bueno que usemos el codigo de otro proyecto!!

Al comienzo tuve un error y era que ya cuando guarde y me fui al navegador, el enemigo no seleccionaba su mokepon, el problema era que esa funci贸n no estaba siendo llamada, entonces llame la funcion dentro de la funcion iniciarJuego() y funciono.

function iniciaJuego(){
    let botonMascota = document.getElementById('boton_Mascota')
    seleccionarMascotaEnemigo()
    
    botonMascota.addEventListener('click', seleccionarMascotaJugador)
}


function seleccionarMascotaEnemigo(){
    let mokaponEnemigo = 0
    mokaponEnemigo = aleatorio(1,3)
    let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
    
    if(mokaponEnemigo == 1){
        spanMascotaEnemigo.innerHTML = 'hipodoge'
    }else if(mokaponEnemigo == 2){
        spanMascotaEnemigo.innerHTML = 'capipepo'
    }else if(mokaponEnemigo = 3){
        spanMascotaEnemigo  .innerHTML = 'ratigueya'
    
    
}```

En mi versi贸n del juego hice una funci贸n que escogiera un oponente distinto al que haya escogido el jugador. Les comparto el c贸digo para que vean como lo hice.

function iniciarJuego(){
    

    function aleatorio(max,min){
        return Math.floor(Math.random()*(max-min+1)+min)
    }
    let personajes = ["Katara", "Zuko", "Toph"]
    let personajeJugador =""
    let personajeOponente = personajes[aleatorio(2,0)]
    let spamPersonajeJugador= document.getElementById("personaje-jugador")
    let spamPersonajeOponente= document.getElementById("personaje-oponente")

    function seleccionarOponente (){
        //Selecciona un oponente que no sea el mismo que escogio el jugador
        while (personajeJugador == personajeOponente) {
            personajeOponente = personajes[aleatorio(2,0)]
        }
        spamPersonajeOponente.innerHTML= personajeOponente
        alert("Tu oponente es "+ personajeOponente)
    }
    
    function seleccionarPersonajeJugador(){
        let inputkatara=document.getElementById('katara')
        let inputZuko=document.getElementById('zuko')
        let inputToph=document.getElementById('toph')
            if (inputkatara.checked)
                {
                    personajeJugador="Katara"
                }
            else if (inputZuko.checked)
            {
                personajeJugador="Zuko"
            } 
            else if (inputToph.checked)
            {
                personajeJugador="Toph"
            }
            else {
                alert('no seleccionaste nada, debes seleccionar un personaje')
                exit
            }
            alert ("Tu personaje es " + personajeJugador)
            spamPersonajeJugador.innerHTML = personajeJugador
            seleccionarOponente()
    }
    alert('Selecciona a tu personaje')
    let botonPersonaje=document.getElementById("boton-personaje")
    botonPersonaje.addEventListener("click", seleccionarPersonajeJugador)
    
}

window.addEventListener("load",iniciarJuego)

Muy din谩mica y practica la clase, a comentario personal me tenia detenido un detalle muy com煤n que es errores de escritura con el .innerHTML lo escrib铆 repetidamente como .innerHtml al no obtener resultados inicie la b煤squeda de mi error hasta dar con el y entonces corregir y as铆 obtener el resultado y avanzar, muy contento de ir desbloqueando puntos de error y seguir avanzando. un saludos a todos y mucho 茅xito en este curso.

馃 Esta muy alto el Volumen

window.addEventListener("load", iniciarJuego);

function seleccionarMascota() {
  let mascota = "";
  let mascotaEnemigo = "";

  const radios = document.getElementsByName("mascota");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      mascota = radios[i].id;
      break;
    }
  }
  alert("Has seleccionado: " + mascota);

  if (mascota == "") {
    alert("No has seleccionado tu mascota");
  }

  mascotaEnemigo = radios[random(1, 3)].id;

  document.getElementById("mascota-jugador").innerHTML = mascota.toUpperCase();
  document.getElementById("mascota-enemigo").innerHTML = mascotaEnemigo.toUpperCase();
}

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

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

Algo muy 煤til y que me sirvi贸 en mi proceso de aprendizaje es que mientras comprenden que funci贸n tiene cada l铆nea del c贸digo es darle un comentario:

Hola, quisiera agregar mi aporte con algo que me sucedi贸. siguiendo el paso a paso que venimos haciendo hasta el momento, a la hora de ejecutar seleccionar, la opci贸n enemiga no me funcionaba, y todo aparentemente estaba bien escrito. cuando pase el c贸digo HTML por un validador me di cuenta que en el span id= 鈥渕ascota del enemigo鈥 lo tenia con un espacio as铆
span id= " mascota del enemigo" por eso no me funcionaba la opci贸n.
dejo el validador https://validator.w3.org/ para que puedan evaluar posibles errores.

estoy loqueando agregando imagenes en vez de texto

Me encanta haber aprendido tanto gracias a Mike Wheeler

Intentando usar programaci贸n orientada a objetos (OOP) 馃構

鈿狅笍 Advertencia: si est谩s empezando y a煤n no sabes qu茅 es OOP mejor ignora este comentario y haz tu propia soluci贸n con lo que conoces. En su momento aprender谩s sobre el tema en la Escuela de Desarrollo web.

A煤n no conozco mucho sobre OOP (c贸mo usar clases, getters, setters, etc), pero estructurar los datos con objetos y arrays de verdad es 煤til y me permite organizar informaci贸n sobre las mascotas con mucha facilidad.
Les dejo mi c贸digo actual, si tienen sugerencias para refactorizar agradecer铆a cualquier contribuci贸n.
.
JS

"use strict";

function getSelectedPetInfo(petsList, petId) {
  let pet;
  for (let i = 0; i < petsList.length; i++) {
    const listItem = petsList[i];
    if (petId === listItem.id) pet = listItem;
  }
  return pet;
}

function getSelectedPetMsg(selectedPet) {
  return selectedPet
    ? `You selected ${selectedPet.name.toUpperCase()}! ${selectedPet.emoji}`
    : "No pet selected...";
}

function getPetId() {
  const petsToSelect = document.querySelectorAll("input[name='pet']");
  let petId;
  for (let i = 0; i < petsToSelect.length; i++) {
    const pet = petsToSelect[i].id;
    const isChecked = petsToSelect[i].checked;
    if (isChecked) petId = pet;
  }
  return petId;
}

function labelWithPetName(span, petName) {
  span.innerHTML = petName;
}

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

function getRandomPet(petsList) {
  const randomIndex = random(0, petsList.length - 1);
  return petsList[randomIndex];
}

function startGame() {
  const pets = [
    {
      name: "Hipodoge",
      id: "hipodoge",
      emoji: "馃敟",
    },
    {
      name: "Capipepo",
      id: "capipepo",
      emoji: "馃挧",
    },
    {
      name: "Ratig眉eya",
      id: "ratigueya",
      emoji: "馃尡",
    },
  ];

  const btnPlayerPet = document.getElementById("pet-btn");
  const spanPlayerPet = document.getElementById("player-pet");
  const spanEnemyPet = document.getElementById("enemy-pet");
  let playerPet;
  let enemyPet;
  btnPlayerPet.addEventListener("click", () => {
    const petId = getPetId();
    playerPet = getSelectedPetInfo(pets, petId);
    if (playerPet) {
      enemyPet = getRandomPet(pets);
      labelWithPetName(spanPlayerPet, playerPet.name);
      labelWithPetName(spanEnemyPet, enemyPet.name);
    }
    alert(getSelectedPetMsg(playerPet));
    if (enemyPet)
      alert(
        "Enemy has selected " +
          `${enemyPet.name.toUpperCase()}! ${enemyPet.emoji}`
      );
  });
}

window.addEventListener("load", startGame);

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MOKEPON!</title>
    <script src="./js/mokepon.js"></script>
  </head>
  <body>
    <h1>MOKEPON! 馃敟馃挧馃尡</h1>

    <section id="select-pet">
      <h2>Select your pet:</h2>

      <label for="hipodoge">Hipodoge</label>
      <input type="radio" name="pet" id="hipodoge" />

      <label for="capipepo">Capipepo</label>
      <input type="radio" name="pet" id="capipepo" />

      <label for="ratigueya">Ratig眉eya</label>
      <input type="radio" name="pet" id="ratigueya" />

      <button id="pet-btn">Select</button>
    </section>

    <section id="select-attack">
      <h2>Select your attack:</h2>
      <p>Your pet <span id="player-pet"></span> has <span>3</span> lives</p>
      <p>
        Opponent's pet <span id="enemy-pet"></span> has <span>3</span> lives
      </p>
      <p>
        <button>Fire 馃敟</button>
        <button>Water 馃挧</button>
        <button>Ground 馃尡</button>
      </p>
    </section>

    <section id="messages">
      <p>
        Your pet attacked with FIRE, opponent's pet attacked with GROUND - YOU
        WIN 馃帀
      </p>
    </section>

    <section id="reset">
      <button>Reset</button>
    </section>
  </body>
</html>

EXCELENTE CLASE JUAN DAVID CASTRO DIOS TE BENDIGA

Mi propuesta para la solucion de este ejercicio.

//Seccion de Declaracion de Variables y funciones

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

let mascotaJugador = document.getElementById('mascota-jugador');
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');

function seleccionarMascotaJugador(){
    let seleccionado = 'Nadie';
    
    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;
    }else{
        alert('Por favor selecciona una mascota')
    }
    alert(`Seleccionaste a ${seleccionado}`);
    mascotaJugador.innerHTML = seleccionado;
    seleccionarMascotasEnemigo();
}

function seleccionarMascotasEnemigo(){
    let mascotaEnemigo = document.getElementById('mascota-enemigo');
    let min = 1;
    let max = 6;
    let seleccionEnemiga = Math.floor(Math.random()*(max-min+1)+min);
    let mascotaEnemigoSeleccionada = '';

    switch(seleccionEnemiga){
        case 1:
            mascotaEnemigoSeleccionada = hipodoge.id;
            break;
        case 2:
            mascotaEnemigoSeleccionada = capipepo.id;
            break;
        case 3:
            mascotaEnemigoSeleccionada = ratig眉eya.id;
            break;
        case 4:
            mascotaEnemigoSeleccionada = langostelvis.id;
            break;
        case 5:
            mascotaEnemigoSeleccionada = tucapalma.id;
            break;
        case 6:
            mascotaEnemigoSeleccionada = pydos.id;
            break;
        default:
            mascotaEnemigoSeleccionada = 'Nadie'
    }

    mascotaEnemigo.innerHTML = mascotaEnemigoSeleccionada;

}

window.addEventListener('load', iniciarJuego);
function iniciarJuego() {
    let botonMascotaJugador = document.getElementById('boton-mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
    botonMascotaJugador.addEventListener('click', seleccionarMascotaEnemigo)
}

Yo puse eso, no lo puse adentro de la funcion de seleccionar mascota jugador, sino que al iniciar el juego cuando se selecciona la mascota del jugador yse cumple toda esa funcion consecutivamente se firea el otro evento.

馃搶 Se pueden conseguir valores aleatorios en JS con math.random que van desde 0 hasta 1 y sus decimales

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

yo lo hice de manera que la pc eligiera a la mascota enemiga en el momento en que hagas click en seleccionar, le puse un event listener de click

鉂わ笍

Un enorme y c谩lido saludo desde Medell铆n Colombia.

Genial!

dejo mi solucion

<code> 
function seleccionarMascotaEnemigo() {
  let mascotas = document.getElementsByName("mascota");
  let cantidadDeMascotas = mascotas.length -1 
  let mascotaElegida = mascotas[aleatorio(0,cantidadDeMascotas)].value
  let spanMascotaEnemigo = document.getElementById("mascota-enemigo");
  spanMascotaEnemigo.innerHTML = mascotaElegida
}

Hice una version diferente para evitar usar tantos alert y los innerHTML

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

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

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

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

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

// Funci贸n para confirmar la seleccion de ambos jugadores
function confirmarSeleccionJugador() {

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

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

Que honor que el mism铆simo pr铆ncipe ATREIDES nos ense帽e programaci贸n

Me encanto el nuevo mokepon鈥 hipopepo lol鈥 que chido profesor!

Afortunadamente entre programadores no existen comentarios como 鈥渉ey robaste mi c贸digo鈥 xD

if (ataqueEnemigo == Capipeo){
alert('quien se cago???)
}

ME asuste bastante porque cuando prob茅 el c贸digo 5 veces seguidas sali贸 Empate鈥 o sea la misma mascota鈥 WTF? pero a la 6 ya cambio鈥 cre铆 que algo hab铆a hecho mal

innerHTML no es una funcion ni tampoco un metodo, es una propiedad un valor del contenido del elemento HTML que est谩 en el DOM

Me encanta, mil gracias Juan David por la excelente explicaci贸n y colocar valor agregado que motiva.

Admiro la capacidad de explicar did谩ctica y pedag贸gicamente esta clase de contenidos. Eso significa que la persona maneja los conceptos que brinda de forma muy profesional. Deseo alg煤n d铆a llegar a ese nivel!!! 馃挭馃徏馃挭馃徏馃挭馃徏 Quiz谩 deba ver 3 veces cada v铆deo, pero no es por como est谩n explicados los temas sino por la complejidad de aprehensi贸n de los mismos. Gracias por tanto!!!

Me parece que lo m谩s esencial del c贸digo es que siga una simplificada l贸gica que haga m谩s f谩cil poder interpretarlo.

Ahora el jugador puede seleccionar una opci贸n aleatoria o solo seleccionar la que quiera m茅diate el <input type=鈥渂utton鈥 />

C脫DIGO JS

//EVENTO CLICK AUTOELEGIR MASCOTAS
function autoEleccion(){
	//OBCIONES DEL JUGADOR
	hipodogeJugador = 1
	capipepoJugador = 2
	ratigueyaJugador = 3
	//NUMERO ALEATORIO
	hipocapigueya = aleatorio(3, 1)
	//ELECCI脫N DEL JUGADOR
	if (hipocapigueya == hipodogeJugador){
		mascotaJugador.innerHTML = "Hipodoge"
	} else if (hipocapigueya == capipepoJugador){
		mascotaJugador.innerHTML = "Capipepo"
	} else if (hipocapigueya == ratigueyaJugador){
		mascotaJugador.innerHTML = "Ratigueya"
	}
	//ELECCI脫N DEL OPONENTE
	eleccionOponente()
}
//EVENTO CLICK ELECION BOTON
function seleccionHipodogue(){
	alert("Elegiste a: Hipodogue")
	mascotaJugador.innerHTML = "Hipodoge"
	eleccionOponente()
} function seleccionCapipepo(){
	alert("Elegiste a: Capipepo")
	mascotaJugador.innerHTML = "Capipepo"
	eleccionOponente()
} function seleccionRatigueya(){
	alert("Elegiste a: Ratigueya")
	mascotaJugador.innerHTML = "Ratigueya"
	eleccionOponente()
}
//OPONENTE ELIGE
function eleccionOponente(){
	//OBCIONES DEL OPONENTE
	hipodogeOponente = 4
	capipepoOponente = 5
	ratigueyaOponente = 6
	//NUMERO ALEATORIO
	ratipepodogue = aleatorio(6, 4)
	//ELECCI脫N DEL OPONENTE
	if (ratipepodogue == hipodogeOponente){
		mascotaOponente.innerHTML = "Hipodoge"
	} else if (ratipepodogue == capipepoOponente){
		mascotaOponente.innerHTML = "Capipepo"
	} else if (ratipepodogue == ratigueyaOponente){
		mascotaOponente.innerHTML = "Ratigueya"
	}
}
//NUMERO ALEATORIO
function aleatorio(max, min){
	return Math.floor(Math.random() * (max - min + 1) + min)
}
//VARIABLES DECLARADAS
let hipodoge = 0
let capipepo = 0
let ratigueya = 0
let hipocapigueya = 0
//EVENTO CLICK BOTON MASCOTAS
let buttonHipodoge = document.getElementById("hipodoge").addEventListener("click", seleccionHipodogue)
let buttonCapipepo = document.getElementById("capipepo").addEventListener("click", seleccionCapipepo)
let buttonRatigueya = document.getElementById("ratigueya").addEventListener("click", seleccionRatigueya)
//EVENTO CLICK BOTON AUTOELEGIR MASCOTAS
let eleccionJugador = document.getElementById("eleccion_automatica").addEventListener("click", autoEleccion)
//NOMBRE DE LA MASCOTA ELEGIDA
let mascotaJugador = document.getElementById("mascota-jugador")
let mascotaOponente = document.getElementById("mascota-oponente")
//DOCUMENTO CARGADO
//window.addEventListener("load", iniciarJuego)

C脫DIGO HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>MOKEPON</title>
		<script defer src="./js/mokepon2.0.js"></script>
	</head>
	<body>
		<h1>MOKEPON! 鉀帮笍 馃挧 馃敟</h1>
		<!--SECCI脫N PARA ELEGIR MASCOTA-->
		<section id="eleccion_mascota">
			<h2>Elig茅 t煤 mascota</h2>
			 <!--CAPIPEPO-->
			 <!--<label for="capipepo">Capipepo</label>-->
			 <input type="button" value="Capipepo" id="capipepo"/><br/><br/><br/>
			 <!--HIPODOGE-->
			 <!--<label for="hipodoge">Hipodoge</label>-->
			 <input type="button" value="Hipodoge" id="hipodoge"/><br/><br/><br/>
			 <!--RATIGUEYA-->
			 <!--<label for="ratigueya">Ratigueya</label>-->
			 <input type="button" value="Ratigueya" id="ratigueya"/><br/><br/><br/>
			 <!--ELEGIR--> 
			 <button id="eleccion_automatica">AUTOELEGIR</button>
			 <!--LANGOSTELVIS AGUA Y FUEGO, TUCAPALMA AGUA Y TIERRA, PAYDOS TIERRA Y FUEGO-->
		</section>
		<!--SECCI脫N PARA ELEGIR ATAQUE-->
		<section id="eleccion_ataque">
			<h2>Elig茅 t煤 ataque</h2>
			 <!--MARCADORES DE VIDA-->
			 <p>T煤 mascota <span id="mascota-jugador">---</span> tiene <span id="vidas-jugador">3</span> vidas</p>
			 <p>La mascota <span id="mascota-oponente">---</span> de tu oponente tiene <span id="vidas-oponente">3</span> vidas</p>
		   	 <!--TIERRA VENCE AGUA, AGUA VENCE FUEGO, FUEGO VENCE TIERRA-->
			 <section>
				<button>TIERRA 鉀帮笍</button>
				<button>AGUA 馃挧</button>
				<button>FUEGO 馃敟</button>
			 </section>
		</section>
		<!--AVISOS-->
		<section id="mensajes">
			<p>El oponente atac贸 con TIERRA, t煤 atacaste con AGUA. </p>
		</section>
		<!--JUGAR DE NUEVO-->
		<section id="reiniciar">
			<button>REINICIAR</button>
		</section>
	</body>
</html>

Poco a poco voy viendo el progreso, el mejor consejo es la constancia, ir a prendiendo a nuestro ritmo sin abrumarnos con proyectos o colegas con mayor experiencia, hasta el m谩s experto fue un aprendiz en su inicio.

馃敟馃敟馃憦馃憦

Yo para evitarme los condicionales lo hice mediante un arreglo

function mascotaAleatoriaPc(){
    let mascotaEnemigo=document.getElementById('mascota-enemiga')
    let mascotas=['hipodoge','capipepo','ratigueya'] 
    mascotaPosicion=aleatorio(0,3)
    mascotaEnemigo.innerHTML =mascotas[mascotaPosicion]
    
}
function aleatorio(min,max){
   return Math.floor(Math.random() * max) + min;

}

Lo siento mas como una narracion , que como una explicacion.

Me pareci贸 mas interesante al no haber el .checked ocupar Smith case y me funciono de igual forma
C贸digo en Github:
https://github.com/p3podev/mokepon/commit/1873b75004c701bd38cd143d43ff13b441c334f8
Github Pages:
https://p3podev.github.io/mokepon/

function selectPetEnemy() {
    let petRandom = aleatorio(1, 6)
    let spanPetEnemy = document.getElementById('pet_Enemy')
    switch (petRandom) {
        case 1:
            spanPetEnemy.innerHTML = ' Hipodoge '
            break;
        case 2:
            spanPetEnemy.innerHTML = ' Capipepo '
            break;
        case 3:
            spanPetEnemy.innerHTML = ' Ratigueya '
            break;
        case 4:
            spanPetEnemy.innerHTML = ' Langostelvis '
            break;
        case 5:
            spanPetEnemy.innerHTML = ' Tucapalma '
            break;
        case 6:
            spanPetEnemy.innerHTML = ' Pydos '
            break;
    }

Ya saben chicos si nos sale un uno tenemos al majestuoso Hipopepo馃槍

asi vamos 馃槉

let hipodogue = document.getElementById('hipodoge')
let capipepo = document.getElementById('capipepo')
let Ratigueya = document.getElementById('Ratigueya')
let btnAgua = document.getElementById('btn-agua')
let btnFuego = document.getElementById('btn-fuego')
let btnTierra = document.getElementById('btn-tierra')
let nombreMokepon = document.getElementById('Nombre-mokepon')
let mokeponEnemigo = document.getElementById('mokepon-enemigo')
let btnReiniciarJuego = document.getElementById('btn-reiniciar')




window.addEventListener('load', ()=>{
    
    let btnSeleccionarMascota = document.getElementById('seleccionar_mascota').addEventListener('click', ()=> { 
        
        if(hipodogue.checked){
            nombreMokepon.innerHTML= 'hipodogue'
        }else if (capipepo.checked){
           nombreMokepon.innerHTML = 'capipepo'
        }else if(Ratigueya.checked){
            nombreMokepon.innerHTML = 'Ratigueya'
        }else{
            alert('No seleccionaste ningun mokepon')
        }

        function seleccionarMascotaDelEnemigo (){
            let ataqueAleatorio = aleatorio(1,3)

            if(ataqueAleatorio == 1){
                mokeponEnemigo.innerHTML = 'hipodogue'
            }else if(ataqueAleatorio == 2){
                mokeponEnemigo.innerHTML = 'capipepo'
            }else if(ataqueAleatorio == 3){
                mokeponEnemigo.innerHTML = 'Ratigueya'
            }
        }

        seleccionarMascotaDelEnemigo();
    })    
})



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

    let ataqueAleatorio = aleatorio(1, 6);
    let spanMascotaEnemigo = document.getElementById('mascotaEnemigo');

    switch(true){

        case ataqueAleatorio == 1:
            // hipodoge
            spanMascotaEnemigo.innerHTML = ' HIPODOGE';
        break;

        case ataqueAleatorio == 2:
            // Capipepo
            spanMascotaEnemigo.innerHTML = ' CAPIPEPO';
        break;

        case ataqueAleatorio == 3:
            // Ratigueya
            spanMascotaEnemigo.innerHTML = ' RATIGUEYA';
        break;

        case ataqueAleatorio == 4:
            // Langostelvis
            spanMascotaEnemigo.innerHTML = ' LANGOSTELVIS';
        break;

        case ataqueAleatorio == 5:
            // Tucapalma
            spanMascotaEnemigo.innerHTML = ' TUCAPALMA';
        break;

        case ataqueAleatorio == 6:
            // Pydos
            spanMascotaEnemigo.innerHTML = ' PYDOS';
        break;

    }

Gracias Juan por esa pasi贸n al ense帽ar, en verdad motivas mucho y cr茅eme cuando te digo que haz formado, estas formando y formaras muchos apasionados del JS

As铆 me esta quedando a mi jeje

Yo sigo utilizando las 6 mascotas desde el inicio:

function seleccionarMascotaEnemigo(){
let ataqueAleatorio = aleatorio(1,6)
let spanMascotaEnemigo = document.getElementById(鈥榤ascota-enemiga鈥)

if (ataqueAleatorio == 1){
    spanMascotaEnemigo.innerHTML= 'Hipodoge'
} else if (ataqueAleatorio == 2){
    spanMascotaEnemigo.innerHTML= 'Capipepo'
} else if (ataqueAleatorio == 3){
    spanMascotaEnemigo.innerHTML= 'Ratigueya'
} else if (ataqueAleatorio == 4){
    spanMascotaEnemigo.innerHTML= 'Langostelvi'
} else if (ataqueAleatorio == 5){
    spanMascotaEnemigo.innerHTML= 'Tucapalma'
} else if (ataqueAleatorio == 6){
    spanMascotaEnemigo.innerHTML= 'Pydos'

}
}

honestamente nunca habia estado tan emocionado por html y java script la forma de ense帽ar de este profesor esta a otro nivel, se emociona con los avanzes y hace que me emocione yo tambien jajajaj

paus茅 el video y termine la parte del c贸digo del enemigo solo pensando
y es como OHH LA PROGRAMACION CORRIENDO POR MIS VENAS
YA quiero que esto sea mi profesi贸n y diversi贸n

yo tambien me llamo Juan David

En mi caso utilic茅 un booleano para validar que primero elija el jugador y hasta ese momento elija el enemigo, y la condicional en lugar poner una comparaci贸n de

" if(mascotaSeleccionada == 1)"

Solo poner "if(mascotaSeleccionada){
seleccionarMascotaEnemiga()
}

function seleccionarMascota(){

   let inputHipodoge = document.getElementById('hipodoge');
   let inputCapipepo = document.getElementById('capipepo');
   let inputRatigueya = document.getElementById('ratigueya');
   let inputLangostelvis = document.getElementById('langostelvis');
   let inputTucapalma = document.getElementById('tucapalma');
   let inputPydos = document.getElementById('pydos');

   let spanMascotaJugador = document.getElementById('mascota-jugador');
   let mascotaSeleccionada = true;
   

   if (inputHipodoge.checked) {
    spanMascotaJugador.innerHTML = 'Hipodoge';

   } else if (inputCapipepo.checked) {

    spanMascotaJugador.innerHTML = 'Capipepo';


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


   }else if (inputLangostelvis.checked) {
    
    spanMascotaJugador.innerHTML = 'Langostelvis';


   }else if (inputTucapalma.checked) {
    
    spanMascotaJugador.innerHTML = 'Tucapalma';


   }else if (inputPydos.checked) {
    
    spanMascotaJugador.innerHTML = 'Pydos';


   }else{
    alert('No seleccionaste ning煤n mokepon!!!!!');
    mascotaSeleccionada = false;
   }

   

   if (mascotaSeleccionada) {
   seleccionarMascotaEnemiga();
   }
}

Muchas gracias Juan , he aprendido mucho y el por qu猫 de errores que he tenido鈥 por ejemplo la propiedad innerhtml

Estuve probando mi c贸digo y a pesar de que todo estaba bien, no me cambiaba el spanMascotaEnemigo, despu茅s de analizar me di cuenta que cree esa variable en la funcion de seleccionarMascotaJugador y por eso no me lo cambiaba, hago este aporte por si acaso a alguien le ocurre lo mismo que a mi, y no pierda tanto tiempo buscando la soluci贸n jajaj.

Hay un detalle irrelevante en el c贸digo y es que te mostrar谩 la mascota del enemigo antes que del jugador, solo si el jugador presiona directamente en 'seleccionar' sin escoger la mascota.

No sabia de la existencia del innerHTML que genial es. Se hacen cosas increibles con eso

Estoy sorprendido con lo bien que explican lo profesores de platzi, es como si todos estuvieran super entrenados

al principio no me salio pero ahora si me sale

Les cuento que, siempre me pasa algo, siempre me falta algo, pero en ese momento recuerdo cuando Freddy nos dijo que programar es controlar la frustraci贸n, as铆 que respiro profundo, reviso mi c贸digo con calma, compar谩ndolo con el c贸digo del profesor, hasta que consigo la falla, o las fallas.
Pero realmente es bueno este tipo de ejercicios, porque logro notar que empiezo a entender con mayor claridad todo esto.

Se me ocurri贸 utilizar arreglos para ahorrar l铆neas de c贸digo:

function seleccionarMascotaEnemigo()
{
    let randomNumber = Math.floor(Math.random() * 6)
    let arrregloNombres = ['Hipodoge', 'Capipepo', 'Ratigueya', 'Langostelvis', 'Tucapalma', 'Pydos']
    document.getElementById('mascota-enemigo').innerHTML = arrregloNombres[randomNumber];
}

Un dato interesante es que a los errores de escritura en el 谩mbito digital se le llaman 鈥淭ypo鈥 o 鈥淭ypos鈥 en plural.

As铆 que, si la correcci贸n que hizo el profesor al final se le dice correcci贸n de typos

Asi va quedando

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

}
function aleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
function seleccionarMascotaJugador(){
    let inputPiplup = document.getElementById("Piplup")
    let inputSandile = document.getElementById("Sandile")
    let inputLitten = document.getElementById("Litten")
    let inputVolcanion = document.getElementById("Volcanion")
    let inputSwampter = document.getElementById("Swampter")
    let inputHeatmor = document.getElementById("Heatmor")
    let spanMascotajugador = document.getElementById("mascota-jugador")


    if (inputPiplup.checked){
        spanMascotajugador.innerHTML = "Piplup"
   } else if  (inputSandile.checked) {
        spanMascotajugador.innerHTML = "Sandile"
   } else if (inputLitten.checked){
    spanMascotajugador.innerHTML = "Litten"
   } else if (inputVolcanion.checked) {
    spanMascotajugador.innerHTML = "Volcanion"

   }else if (inputSwampter.checked) {
    spanMascotajugador.innerHTML = "Swampter"
   } else if (inputHeatmor.checked) {
    spanMascotajugador.innerHTML = "heatmor"
   } else {
    spanMascotajugador.innerHTML = "NINGUNO"
   }

   seleccionarMascotaEnemigo ()

}

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

    if (ataqueAleatorio == 1) {
        spanMascotaEnemigo.innerHTML = "Piplup"
    }else if (ataqueAleatorio==2){
        spanMascotaEnemigo.innerHTML = "Sandile"
    }else if (ataqueAleatorio==3) {
        spanMascotaEnemigo.innerHTML = "Litten"
    }else if (ataqueAleatorio==4){
        spanMascotaEnemigo.innerHTML = "Volcanion "
    }else if (ataqueAleatorio==5){
        spanMascotaEnemigo.innerHTML = "Swampter"
    } else {
        spanMascotaEnemigo.innerHTML = "Heatmor"
    }
    
}



window.addEventListener("load", iniciarJuego)

mi solucion para seleccionar mascota del enemigo y que no sea igual a la mia

//Selecciona la mascota aleatoria del enemigo, pero no puede ser igual al escogido por el jugador
function selectPetEnemy(gamerSelectTitle) {

    let distinctChoiceGamer = false

    while (distinctChoiceGamer == false) {
        let petEnemyNumber = random(1, 6);
        
// Para que lo ubique en el array correctamente        
        petEnemyNumber = petEnemyNumber - 1; 

        // Leo el array, para traer todas las mascotas    
        let pets_array = document.getElementsByName("pets");

        let pets_input = pets_array[petEnemyNumber];

        if (pets_input.title != gamerSelectTitle) {
            document.getElementById("petEnemy").innerHTML = pets_input.title;
            distinctChoiceGamer = true;
        }
    }
}

Mi proyecto se ve as铆:

Mi c贸digo se ve asi:

Intente optimizarlo un poco

window.addEventListener('load', startGame)

let animalEmojis = [
    { name: "Hipodoge", emoji: "馃悩" },
    { name: "Capipepo", emoji: "馃" },
    { name: "Ratigueya", emoji: "馃" }
];


function startGame(){
    let btnSelect = document.getElementById("btn-select")

    btnSelect.addEventListener("click",selectJugador)
}

function selectJugador(){
    numSelect = 0
    if(document.getElementById("hipodoge").checked){
        numSelect = 1
    }else if(document.getElementById("capipepo").checked){
        numSelect = 2
    }else if(document.getElementById("ratigueya").checked){
        numSelect = 3
    }else{
        alert("Debes selecionar una mascota")
    }

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

    let nameAnimalSelected = animalEmojis[numSelect - 1].emoji + animalEmojis[numSelect - 1].name;
    spamNameAnimal.innerHTML = nameAnimalSelected

    selectEnemy()
}

function selectEnemy(){
    let numRandom = getRandom(1,3)
    let spamNameAnimalEnemy = document.getElementById("mascota-enemigo")

    let nameAnimalSelected = animalEmojis[numRandom - 1].emoji + animalEmojis[numRandom - 1].name;
    spamNameAnimalEnemy.innerHTML = nameAnimalSelected
}

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

As铆 es como voy en el c贸digo de JS ya hab铆a escuchado sobre el DOM pero no le hab铆a entendido tan bien, como lo que voy del curso, aunque en algunas partes me pierdo lo vuelvo a repetir hasta que me quede claro 馃槂

Mi codigo

<code> 
iniciarJuego = () => 
{
   let buttonMascotas = document.getElementById("seleccionarMascota");
   buttonMascotas.addEventListener("click",seleccionMascotaJugador);
}

seleccionMascotaJugador = (enemigo) => 
{
   // querySelectorAll genera un nodelist con todos los elementos similares 
   let nodelist = document.querySelectorAll("#seleccionar-mascota input");
   var inputMascotas = [].slice.call(nodelist);
   // Convertimos el nodelist en un array(nombresMascotas) 
   var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaJugador = document.getElementById("mascota-jugador");
   //forEach es el metodo de recorrer un arreglo.
   inputMascotas.forEach((valor, indice) => 
   {
      if(valor.checked)
      {  
         spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
         enemigo == true;
      }
   })
   if(enemigo)
   {
      seleccionarMascotaEnemigo(aleatorio(0,3));
   }
}

seleccionarMascotaEnemigo = (pc) =>
{
   var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaEnemigo = document.getElementById("mascota-enemigo");
   nombresMascotas.forEach((valor, indice) => 
   {
      if(indice == pc)
      {  
         console.log(valor);
         console.log(indice);
         spanMascotaEnemigo.innerHTML= ` ${nombresMascotas[indice]}`;
      }
   })
}

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

window.addEventListener("load", iniciarJuego)


Interesante como motiva el profesor para meterse mas al codigo e incluso deja algunos retos que la verdad motiva mucho en el aprendizaje y es perfecto para sacar mas esperiencia

Incre铆ble clase. Hasta aqu铆 mi c贸digo de momento (con un extra que le he tomado prestado al c贸digo de otro compa帽ero)

function startGame(){
    let selectPet = document.getElementById("select_pet")
    selectPet.addEventListener("click", selectPlayerPet)
}


function selectPlayerPet() {
    let play = 1

    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let inputLangostelvis = document.getElementById("langostelvis")
    let inputLucapalma = document.getElementById("lucapalma")
    let inputPydos = document.getElementById("pydos")

    let spanPlayerPet = document.getElementById("name_player_pet")

    if (inputHipodoge.checked) {
        spanPlayerPet.innerHTML = "Hipodoge"
    } else if (inputCapipepo.checked) {
        spanPlayerPet.innerHTML = "Capipepo"
    } else if (inputRatigueya.checked) {
        spanPlayerPet.innerHTML = "Ratigueya"
    } else if (inputLangostelvis.checked) {
        spanPlayerPet.innerHTML = "Langostelvis"
    } else if (inputLucapalma.checked) {
        spanPlayerPet.innerHTML = "Lucaplma"
    } else if (inputPydos.checked) {
        spanPlayerPet.innerHTML = "Pydos"
    } else{
        alert("Choose your pet")
        play = 0
    }
    if (play == 1) {
        selectEnemyPet()
    }
}

function selectEnemyPet(params) {
    let aleatoryAttack =aleatory(1,6)
    let spanEnemyPet = document.getElementById("name_enemy_pet")

    if (aleatoryAttack == 1) {
        spanEnemyPet.innerHTML = "Hipodoge"
    }else if (aleatoryAttack == 2) {
        spanEnemyPet.innerHTML = "Capipepo"
    }else if (aleatoryAttack == 3) {
        spanEnemyPet.innerHTML = "Ratigueya"
    }else if (aleatoryAttack == 4) {
        spanEnemyPet.innerHTML = "Langostelvis"
    }else if (aleatoryAttack == 5) {
        spanEnemyPet.innerHTML = "Lucapalma"
    }else{
        spanEnemyPet.innerHTML = "Capipepo"
    }
}

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

window.addEventListener("load", startGame)

que buen curso la verdad, hasta el momento el profe fredy y juan me han parecido ecxelentes.

Math.floor: Devuelve el entero m谩s grande y tambi茅n puede ser menor o igual a un n煤mero dado.

Math.random: M茅todo para producir n煤meros aleatorios

Voy realizando el juego mientras voy cantando:

Mokepon! tengo de codearlos!!!

Para no tener que escribir cada caso del pokemon enemigo, es decir
"que pasa si enemigo ==1,"
鈥渜ue pasa si enemigo 2"
"que pasa si enemigo
3鈥︹

Decidi emplear una array con todos los pokemones, en este yo realize 06 pokemones, recordemos que el array se lee de izquierda a derecha y va de la posicion 0 hasta el 5

Para llamarlo simplemente se emplea $array[posicion], dentro de las [] va la posicion que deseamos que aparezca, y la posicion sera determinada por el numero aleatorio,

Enemypokemon= Aleatorio(1,6)

pero esto hay que restarle uno porque la posicion va de 0 a 5
Enemypokemon= Aleatorio(1,6) -1

al final quedaria:
$array[Enemypokemon] siendo Enemypokemon= Aleatorio(1,6) -1

podemos colocar una alert (computadora ha escogido $array[Enemypokemon])
Y listo aparecera el pokemon que la computadora escoge aletoriamente sin necesidad de crear caso por caso

En vez de usar las comillas dobles 鈥溾 debemos usar las comillas simples`` (alt+96) para podemos emplear el simbolo de dollar.

Me he percatado a trav茅s de las clase que la mayor铆a de mis errores son a causa de una falta ortogr谩fica, ya sea por el uso incisivo de las may煤sculas o las min煤sculas. Como dijo Freddy, la sintaxis debe ser exacta, pero cabe aclarar que esto tambi茅n est谩 abierto a confusiones, al menos en JavaScript, donde estoy notando que existen elementos que deben escribirse alternando en el uso de may煤sculas y min煤sculas, como, por ejemplo:

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

Hay que tener un ojo relativamente agudo para detectar esta clase de detalles, pero seg煤n parece es un problema bastante com煤n en el mundo de la programaci贸n, as铆 que no se estresen si no les sale a la primera, revisen el c贸digo con calma e intenten pulir las etiquetas, funciones y elementos que deber铆an estar funcionando.

Vamos bien, que chevere!!!

No s茅 si m谩s tarde se cambie, pero en la variable ataque

let ataqueAleatorio = aleatorio(1,3)

me parece m谩s adecuado escribir 鈥渕ascota鈥

let mascotaAleatorio = aleatorio(1,3)

ya que lo que estamos escribiendo, tiene que ver con la mascota y no con el ataque

cuando el profe dijo 鈥淔ELICIDADES 馃帀鈥 me senti tan bien jajaja. me gusta mucho la clase, Animo Gente 馃

A la gente que no le dio el cambio de enemigo al seleccionar el bot贸n, a m铆 me funciono checar par茅ntesis! y los corchetes que no estaban dentro de la funci贸n de SeleccionarMascota.

function seleccionarPeleadorJugador() {

        let inputCaldo = document.getElementById('caldo')
        let inputVicky = document.getElementById('vicky')
        let inputSantangas = document.getElementById('santangas')
        let spanPeleadorJugador = document.getElementById('peleador-jugador')

    if (inputCaldo.checked){
        spanPeleadorJugador.innerHTML = 'Caldo'
    } else if(inputVicky.checked){
        spanPeleadorJugador.innerHTML = 'Vicky'
    } else if(inputSantangas.checked){
        spanPeleadorJugador.innerHTML = 'Santangas'
    } else {
        alert('Selecciona una Peleador Idiota')    
    } 
    seleccionarPeleadorEnemigo ()
    }

Ya v铆 la importancia de los peque帽os detalles tanto en HTML como en JS y si tienes una letra que no coincida, como por ejemplo con mi id no te sale en el navegador tal y como lo explica el profe. Pero afortunadamente me di cuenta de mi error y pude corregirlo. Simplemente quise comentarlo porque tratas de ver en que fall贸 la l铆nea de c贸digo.
#NuncaParesDeAprender 馃挌

Un Cra !!!

la formula de la aleatoridad:
:
function aleatorio(min, max) {
return Math.floor (Math.random( ) * (max - min + 1) + min)

Aqui era un buen momento para usar Switch y variar de If, Bueno a seguir adelante

function seleccionarmascotaEnemigo() {
    let nunAleatorio = aleatorio(1 , 3);
    let mascotaEnemigo = document.getElementById('mascotaEnemigo')

    switch (nunAleatorio) {
        case 1:
                mascotaEnemigo.innerHTML =" Hipodoge "
            break;
        case 2:
            mascotaEnemigo.innerHTML =" Capipepo "
            break;
        case 3:
            mascotaEnemigo.innerHTML =" Ratigueya "
            break;
        default:
            break;
    }

    
}

Me dio algo de toc 馃槄 que en la funci贸n de la selecci贸n de mascota aleatoria en el let dijera ataqueAleatorio ya que mas adelante me imagino que de igual forma habr谩 que hacer una funci贸n para la elecci贸n del ataque del enemigo y de igual forma ser谩 aleatoria 馃樁 yo lo cambie por mascotaAleatoria

yo hice asi para escoger el jugador del enemigo

sin duda alguna es un placer poder aprender con personas as铆 es muy divertido

tengan mucho cuidado con los puntos y las comas, por un punto en aleatorio donde tenia que haber una coma, no me daba resultado el ejercicio

<code> 
function selectPetEnemy() {
    let atqRandom = aleatorio(1,6)

ya me volvia loco buscando jajajaja pero no me rendi constancia ante todo como diria freddy

Para el problema del 鈥渟elecciona una mascota鈥 y arroje la mascota del enemigo, despu茅s de haber seleccionado su mascota deber谩 poner justo debajo la funci贸n de seleccionarMascotaEnemigo(). Saludos!

Muy buena explicacion. El curso esta muy bueno, sobre todo en la forma de c贸mo se explica gracias

// iniciar juego
function startPlay(){
    // Seleccionando un elemento de HTML desde Javascript
    let btnPets = document.querySelector('#btn-pets');
    btnPets.addEventListener('click', selectPetsPlayer);
}

// Seleccionando la mascota
function selectPetsPlayer(){
    // let inputInfo = document.querySelector('#hipodoge').checked;
    let inputSelect1 = document.querySelector('#hipodoge');
    let inputSelect2 = document.querySelector('#capipepo');
    let inputSelect3 = document.querySelector('#ratigueya');

    // Muestra mascota del jugador en el HTML
    let spanPetPlayer = document.querySelector('#petPlayer');

    // condition
    if(inputSelect1.checked){
        // alert('Seleccionaste "Hipodoge"');
        spanPetPlayer.innerHTML = '<strong>Hipodoge</strong>';
    } else if(inputSelect2.checked){
        spanPetPlayer.innerHTML = '<strong>Capipepo</strong>';
    } else if(inputSelect3.checked){
        spanPetPlayer.innerHTML = '<strong>Ratigueya</strong>';
    } else{
        alert('隆NO seleccionaste ninguna mascota!');
    }

    // Llamando a la funcion de seleccion de mascota del enemigo despues de seleccionar la mascota del jugador
    selectPetsEnemy();
}

// Funcion de la seleccion de mascota del enemigo
function selectPetsEnemy(){
    // guardando el numero aleatorio
    let randomAttack = aleatorio(1, 3);

    // variable para guardar el valor de la mascota, es decir la mascota elegida por la PC
    let spanPetEnemy = document.querySelector('#petEnemy');

     // Lugar o accion donde podamos decirle a nuestro codigo que nos diga cual es la variable o mascota que selecciona la PC
    if(randomAttack == 1){
        spanPetEnemy.innerHTML = '<strong>Hipodoge</strong>'
    } else if(randomAttack == 2){
        spanPetEnemy.innerHTML = '<strong>Capipepo</strong>';
    } else{
        spanPetEnemy.innerHTML = '<strong>Ratigueya</strong>';
    }

   
}

// Funcion para dar un valor aleatorio en la seleccion de mascota del enemigo o de la PC
function aleatorio(min, max){
    return Math.floor(Math.random()*(max - min + 1) + min);
}


// Metodo para nuestro navegador al cargar el HTML
// Apenas carge nuestro HTML carge el juego
window.addEventListener('load', startPlay);

cree una variable String para controlar la elecci贸n del jugador y le hice una condicional para que cuando el jugador no elige nada entonces no se ejecute la funci贸n de elegir enemigo.

    // funcion para que el js incie una vez carge el html
    function iniciarJuego(){
        //configuramos boton de elegir mascota
        let botonMascotaJugador = document.getElementById('boton-mascota')
        botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
        seleccionarMascotaEnemigo
        
    }
    // funcion para saber que eleccion tomo el jugador
    function seleccionarMascotaJugador(){
        let mokeponHipodoge = document.getElementById('hipodoge')
        let mokeponCapipepo = document.getElementById('capipepo')
        let mokeponRatigueya = document.getElementById('ratigueya')
        let mokeponLangostelvis = document.getElementById('langostelvis')
        let mokeponTucapalma = document.getElementById('tucapalma')
        let mokeponPydos = document.getElementById('pydos')
        let spanMascotaJugador = document.getElementById('mascota-jugador')
        let eleccionJugador= ""

        if(mokeponHipodoge.checked){         
            eleccionJugador = "Hipodoge"        
        }else if(mokeponCapipepo.checked){
            eleccionJugador = "Capipepo"         
        }else if(mokeponRatigueya.checked){
            eleccionJugador = "Ratigueya"  
        }else if(mokeponLangostelvis.checked){
            eleccionJugador = "Langostelvis"  
        }else if(mokeponTucapalma.checked){
            eleccionJugador = "Tucapalma"  
        }else if(mokeponPydos.checked){
            eleccionJugador = "Pydos"  
        }else{
            alert ('No seleccionaste a nadie 馃槩馃槩')
        }
        spanMascotaJugador.innerHTML = eleccionJugador
        // si el jugador no elige algun mokepon no se ejecuta la funcion del enemigo
        if (eleccionJugador != ""){
        seleccionarMascotaEnemigo()
        }

    }

    function seleccionarMascotaEnemigo(){
        let eleccionEnemigo = aleatorio(1,6)
        let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
        if(eleccionEnemigo == 1){
            spanMascotaEnemigo.innerHTML = "Hipodoge"        
        }else if(eleccionEnemigo == 2){ 
            spanMascotaEnemigo.innerHTML = "Capipepo"         
        }else if(eleccionEnemigo == 3){
            spanMascotaEnemigo.innerHTML = "Ratigueya"  
        }else if(eleccionEnemigo == 4){
            spanMascotaEnemigo.innerHTML = "Langostelvis"  
        }else if(eleccionEnemigo == 5){
            spanMascotaEnemigo.innerHTML = "Tucapalma"  
        }else if(eleccionEnemigo == 6){
            spanMascotaEnemigo.innerHTML = "Pydos"  
        }

    }

    function aleatorio(min,max){
        return Math.floor(Math.random() * (max-min+1)+min)
    }
    window.addEventListener('load', iniciarJuego)

Despues le pondre algun nombre鈥o se me ocurren

var enemigos = ["enemyAanimal1", "enemyAnimal2", "enemyAnimal3"]
 


window.addEventListener("load", iniciarJuego);

function iniciarJuego(){
    let botonMascota = document.getElementById("botonSeleccionar");
    botonMascota.addEventListener("click", selectionPet)
}
function selectionPet(){
    let random = Math.floor(Math.random() * enemigos.length)
    let randomEnemy = enemigos[random];
    
    if (document.getElementById("animal1").checked){
        document.getElementById("namePet").innerHTML = "animal1"
        document.getElementById("enemyNamePet").innerHTML = randomEnemy
    }
    else if (document.getElementById("animal2").checked){
        document.getElementById("namePet").innerHTML = "animal2"
        document.getElementById("enemyNamePet").innerHTML = randomEnemy 
    }
    else if (document.getElementById("animal3").checked){
        document.getElementById("namePet").innerHTML = "animal3"
        document.getElementById("enemyNamePet").innerHTML = randomEnemy 
    }
    else {
        alert("Slecciona una mascota")
    }
}

Seleccionar una mascota aleatoria para el enemigo

Funci贸n para obtener numeros aleatorios