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

Enemigos aleatorios

22/84
Recursos

Aportes 38

Preguntas 29

Ordenar por:

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

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

Un metodo de ahorrar codigo es con los arreglos

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

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

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 鉂わ笍

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

馃 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);
}

鉂わ笍

Que bueno que usemos el codigo de otro proyecto!!

馃敟馃敟馃憦馃憦

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

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

Genial!

// Alert of what pet the player and enemy chose
function selectPetMessage(petIchose){
    alert("馃懖 Seleccionaste a " + petIchose + "\n\n馃捇 El enemigo seleccion贸 " + selectMokeponEnemy(random(1,6)))
}

function selectMokeponEnemy(randomMokepon) {
    //span enemy-player variable
    let enemyPet = document.getElementById('enemy-pet')

    //Conditionals with ternary operators
    let enemyMokepon = ""
    randomMokepon == 1 ? (enemyMokepon = "Charmander", enemyPet.innerHTML = "Charmander"):
        randomMokepon == 2 ? (enemyMokepon = "Squirl", enemyPet.innerHTML = "Squirl"):
        randomMokepon == 3 ? (enemyMokepon = "Bulbasur", enemyPet.innerHTML = "Bulbasur"):
        randomMokepon == 4 ? (enemyMokepon = "Langostelvis", enemyPet.innerHTML = "Langostelvis"):
        randomMokepon == 5 ? (enemyMokepon = "Tucapalma", enemyPet.innerHTML = "Tucapalma") : (enemyMokepon = "Pydos", enemyPet.innerHTML = "Pydos");
    return enemyMokepon
}

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

Trate de colocar un else if como tercera opcion, pero no funciona por lo que los nombres de las mascotas de jugador y enemigo salen los 2 iguales.
Lo bueno que entendi a tiempo, espero les sea de ayuda

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)

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.

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
}

El curso esta buen铆simo, estoy intentando ponerle toda la voluntad posible e intento hacer (romper) el c贸digo antes de ver la clase para ver que se me ocurre.
Cree una funci贸n para que el enemigo elija un Mokepon aleatoriamente y se la sume al addEventListener del bot贸n Seleccionar, entonces cuando nosotros elegimos nuestro Mokepon autom谩ticamente el enemigo tambi茅n elije uno.
Ahora a ver la clase para ver como mejorarlo o que tengo que modificar 馃槄

function iniciarJuego() {

    let botonMascotaJugador = document.getElementById("boton-mascota")
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
    botonMascotaJugador.addEventListener("click", seleccionarMascotaEnemigo)

}

function seleccionarMascotaJugador() {
    let spanMascotaJugador = document.getElementById("mascota-jugador")

    if(hipodoge.checked == true) {
        spanMascotaJugador.innerHTML = "Hipodoge"
    } else if (capipepo.checked == true) {
        spanMascotaJugador.innerHTML = "Capipepo"
    } else if (ratigueya.checked == true) {
        spanMascotaJugador.innerHTML = "Ratigueya"
    } else {
        alert("Necesitas seleccionar un Mokepon!")
    }
}

function seleccionarMascotaEnemigo() {
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
    let min = 1
    let max = 3
    let selec = Math.floor(Math.random() * (max-min+1) + min)

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


window.addEventListener("load", iniciarJuego)

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

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

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>

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

Para esto requerimos que ciertos recursos del HTML sean din谩micos para lograr manipularlos, para esto se debe rememorar que utilizamos la etiqueta ``

Todos los recursos com煤nmente se hallan DOCUMENTADOS es decir un 鈥渕anual鈥 de c贸mo funciona el componente que iremos a usar, este fue realizado por quienes hicieron esta tecnolog铆a o algunas veces, por la sociedad

  • etc茅tera

Usando esta funcion de innerHTML tenemos la posibilidad de modificar de manera directa el HTML

En la clase de hoy mejore un poco el c贸digo dejando las alertas para el jugador junto con el cambio del span.

adem谩s a帽ad铆 una condici贸n para que se cumpla siempre que el jugador elija una mascota.

function selectPlayerPet() {
    //Varibles para seleccionar una mascota
    let play = 1
    let inputHipo = document.getElementById('hipodoge')
    let inputCapi = document.getElementById('capipepo')
    let inputRati = document.getElementById('ratigueya')
    let spanPet = document.getElementById('pet-name')

    //Proceso de alerta para saber cual mascota eligio el usuario
    //Proceso de Funcion innerHTML
    if(inputHipo.checked){
        alert('Seleccionaste a Hipodoge')
        spanPet.innerHTML = "Hipodoge"
    } else if (inputCapi.checked){
        alert('Sleccionaste a Capipepo')
        spanPet.innerHTML = "Capipepo"
    } else if (inputRati.checked){
        alert('Seleccionaste a Ratigueya')
        spanPet.innerHTML = "Ratigueya"
    } else {
        alert('Olvidaste seleccionar una mascota!')
        jugar = 0
    }

    //Condicion pa que se cumpla si el jugador slecciono una mascota
     if (play == 1) {
        selectEnemyPet()
    }
}

//funcion para la aleatoriedad del enemigo
function randomPet(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

//funcion del enemigo
function selectEnemyPet() {
    //variables para el enemigo
    let enemyPet = randomPet(1,3)
    let spanEnemy = document.getElementById('enemy-pet')

    if (enemyPet == 1) {
        spanEnemy.innerHTML = "Hipodoge"
    } else if (enemyPet == 2) {
        spanEnemy.innerHTML = "Capipepo"
    } else {
        spanEnemy.innerHTML = "Ratigueya"
    }

}
hola amigos! el 煤nico problema que tengo es que cuando abro la p谩gina en mi navegador, carga el HTML de la elecci贸n de la mascota del enemigo, pero yo a煤n no he elegido Mi mascota (no le he dado al bot贸n para seleccionar mi mascota), alguien sabe a qu茅 se debe?

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.

Le he agregado alertas, cuando el enemigo (computadora) selecciona un jugador, aparece una alerta

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

    if (ataqueAleatorio == 1) {
        spanMascotaEnemigo.innerHTML = 'Hipos 馃'
        alert('La mascota de tu enemigo es Hipos 馃')
    } else if (ataqueAleatorio == 2) {
        spanMascotaEnemigo.innerHTML = 'Plejo 馃'
        alert('La mascota de tu enemigo es Plejo 馃')
    } else if (ataqueAleatorio == 3) {
        spanMascotaEnemigo.innerHTML = 'Ranty 馃悤'
        alert('La mascota de tu enemigo es Ranty 馃悤')
    } else if (ataqueAleatorio == 4) {
        spanMascotaEnemigo.innerHTML = 'Telvi 馃'
        alert('La mascota de tu enemigo es Telvi 馃')
    } else if (ataqueAleatorio == 5) {
        spanMascotaEnemigo.innerHTML = 'Palma 馃悊'
        alert('La mascota de tu enemigo es Palma 馃悊')
    }else if (ataqueAleatorio == 6) {
        spanMascotaEnemigo.innerHTML = 'Phyno 馃悕'
        alert('La mascota de tu enemigo es Phyno 馃悕')
    }
}

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

Hipopepo

Yo cre茅 una funci贸n para la selecci贸n de mascota del enemigo:

function seleccionarMascotaEnemigo () {
    let valorMascota = 0
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")

    valorMascota = aleatorizar(1,3)
    // 1. Hipodoge, 2. Capipepo, 3. Ratigueya
    switch (valorMascota) {
        case 1:
            spanMascotaEnemigo.innerHTML = "Hipodoge"
            break
        case 2:
            spanMascotaEnemigo.innerHTML = "Capipepo"
            break
        case 3:
            spanMascotaEnemigo.innerHTML = "Ratigueya"
            break
    }

}

Y para habilitar su funcionamiento puse el disparador en la funci贸n iniciarJuego() :

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

Cosa que cada vez que se haga click en el bot贸n de Seleccionar, se genere una nueva elecci贸n para el enemigo.
(Espero que esto no complique mi c贸digo m谩s adelante 馃槄馃

    selecionarMascotaEnemigo()
}

function selecionarMascotaEnemigo(){
    let ataqueAleatorio = aleatorio(1, 4)
    let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
    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 = "Langostelvis"
    }
    else if(ataqueAleatorio == 5){
        spanMascotaEnemigo.innerHTML = "Tucapalma"
    }
    else {
        spanMascotaEnemigo.innerHTML = "Pydos"
    }
          
}

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


window.addEventListener("load", iniciarJuego)

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

excelente