Selección Aleatoria de Mascota Enemiga en JavaScript

Clase 22 de 84 • Curso Gratis de Programación Básica

Resumen

¿Cómo seleccionar una mascota de enemigo aleatoriamente?

Al desarrollar un videojuego, el objetivo no solo es crear una interfaz atractiva, sino también asegurarse de que la experiencia de juego sea desafiante y equitativa. En este caso, un elemento clave es la selección aleatoria de la mascota de un enemigo, lo que se logra mediante la lógica de programación en JavaScript. En esta guía te mostramos cómo implementar esta función crucial usando codificación y manipulación del DOM.

¿Cuál es el papel de la función "aleatorio"?

Para seleccionar una mascota de manera aleatoria necesitamos una función que nos permita generar números al azar. En este contexto, se utiliza la función aleatorio, que provee un número dentro de un rango establecido, siendo claves para definir la aleatoriedad del juego. El código de Freddy es ejemplar en este sentido ya que implementa la función de manera eficiente.

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

Esta función se integra en el proceso de selección de la mascota del enemigo, asegurando que cada vez que se necesite, el resultado sea impredecible.

¿Cómo implementar la función "seleccionarMascotaEnemigo"?

El responsable de desplegar la lógica de selección de las mascotas en el juego es la función seleccionarMascotaEnemigo. Esta función utiliza la aleatoriedad para elegir entre tres opciones: Hipodoge, Capipepo o Ratigueya. Vamos a profundizar en su implementación.

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 {
        spanMascotaEnemigo.innerHTML = 'Ratigueya';
    }
}

¿Cuándo se debe llamar a esta función?

Es crucial determinar cuándo se invoca la función seleccionarMascotaEnemigo. La lógica establecida sugiere que esto debe ocurrir después de que el jugador haya seleccionado su mascota, asegurando que el juego avance de manera ordenada y equilibrada.

function seleccionarMascotaJugador() {
    // ... lógica para seleccionar la mascota del jugador
    seleccionarMascotaEnemigo(); // Se invoca justo después de seleccionar la mascota del jugador
}

¿Cómo se muestran las mascotas seleccionadas?

Para que los usuarios puedan ver qué mascota ha sido asignada tanto a ellos como a sus enemigos, se utiliza innerHTML para actualizar dinámicamente el contenido del documento HTML. Al integrar la manipulación del DOM con lógica condicional, podemos asegurarnos de que siempre se visualice la información correcta.

// Ejemplo de actualización del contenido HTML con la mascota seleccionada
spanMascotaJugador.innerHTML = nombreMascotaSeleccionada;

¿Qué ajustes se deben hacer para mejorar la experiencia del usuario?

Es esencial revisar y probar el juego para asegurar que funcione correctamente. La corrección de errores menores como la ortografía en los mensajes de texto muestra atención al detalle y mejora la experiencia del usuario.

Con el mecanismo de selección aleatoria establecido, hemos avanzado considerablemente hacia una experiencia de juego inmersiva y dinámica. Una práctica recomendada es seguir explorando las funciones de JavaScript y DOM para mejorar la interactividad y complejidad de tu juego. ¡Anímate a seguir explorando y desarrollando!

Adonay Lizardo

student•

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

Juan Castro

teacher•

¿Y ese quién es?

Luisa Narváez

student•

XD XD XD

Jorge Hidalgo

student•

Como todos somos muy de hacer lo que no nos pide un programa "para 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';
  }
}

Diego Beltran

student•

que grande, justo queria hacer lo mismo pero no sabia bien como plantearlo.

Erick Alay

student•

Vaya me gusto tu solución, esta más escalable que la mía jaja

function checkMokepon() {

    let inputHipoge = document.getElementById("hipoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")

    if (inputHipoge.checked) {
        document.getElementById("your-mokepon").innerText = "Hipoge"
        checkMokeponEnemy()
    } else if (inputCapipepo.checked) {
        document.getElementById("your-mokepon").innerText = "Capipepo"
        checkMokeponEnemy()
    } else if (inputRatigueya.checked) {
        document.getElementById("your-mokepon").innerText = "Ratigueya"
        checkMokeponEnemy()
    } else {
        alert("Escoge un pokimon valido")
    }
}

Como solo estoy usando tres mokepones decidí invocar la función si entra a cualquiera de los if, si entra en el else no la invoco.

Pero ahora voy a implementar tu solucción, gracias :green_heart:

Alexis Bacik

student•

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

Nicolás Efraín Herrera

student•

jajaja

tania isabela parrado cabrera

student•

Matías Diego Balcázar Ureña

student•

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

Marcos Monteverde

student•

jajaja

Brayan Estiben Rodallega Saavedra

student•

Jajajaja

Junior Alonso Guerra Corpas

student•

Un metodo de ahorrar codigo es con los arreglos

Diego Alejandro Moreno Pedroza

student•

Es cierto, aunque aún no lo vemos :C

Karen Dayan Niño Fonseca

student•

Pregunta, ¿por qué lo inicias de 1 a 3 y restas 1 en lugar de iniciarlo de 0 a 2?

¿funcionaría igual, no?

Vanessa Carreño Pacora

student•

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

Eduardo Peña Ramos

student•

En esos casos, VSCode señala el error en rojo, mira:

También abajo, con el icono que parece "🚫" y dice 1. Le das clic y te lleva a ese error y dice por qué hay un error:

¿Cómo no amar a VSCode? 💙 Saludos, Vane.

Mayra Ortega Ortega

student•

A mí me faltaba una "c" y duré un montón buscando qué pasaba jajaja, realmente es de paciencia :)

Nixon Ivan Angulo Valverde

student•

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

Percy Pablo Barriga Ponce

student•

sin querer aveces lo sigo poniendo

Erick Alay

student•

Tienes razón jaja

Camila Esmeralda Molina Pineda

student•

He tenido que repasar esta clase más de tres veces.🤣

Mauricio López Morales

student•

yo la he visto 4 veces, mi código está igual que el del profe, y aún no me funciona 😬

Vladimir Rodriguez

student•

En la función aleatorio asegura poner en orden los parámetros del numero máximo y el numero minimo

JANLUY MORENO

student•

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

Juan Castro

teacher•

Sí, pero no. El tema de las "buenas prácticas" es un poco más complicado que "esto está bien" y "esto está mal". Las buenas o malas prácticas son recomendaciones para contextos muy específicos. La palabra clave es CONTEXTO. . En muchos lenguajes NO se pueden usar funciones antes de crearlas. Pero JavaScript (el 90% de los casos) funciona diferente. No es como HTML que lee todo de arriba hacia abajo. JavaScript sí nos permite ejecutar funciones antes de crearlas. Y en muchos casos estos nos permite mejorar bastante la legibilidad de nuestro código. . La recomendación de Freddy está bien porque la hizo pensando en evitarte dolores de cabeza en el futuro. De hecho, si quieres crear las funciones al principio y después sí el resto del código, ¡adelante! ¡es tu código! Pero yo personalmente prefiero primero saber cómo usaré la función y luego sí escribir su código interno. A la larga me ha funcionado mejor para trabajar más fácil y rápido (sobre todo cuando es en equipo). . Si quieres estudiar el tema a mucha más profundidad, este curso es para ti: Curso del JS Engine . Pero si esta es la primera vez que vas a programar, mi recomendación es que no te preocupes por esto todavía, solo quédate con esto:

En archivos de JavaScript se pueden ejecutar funciones antes de crearlas (ojo: archivos con extensión js)
En otros lenguajes este comportamiento puede cambiar
Para muchas personas es buena o mala práctica, la forma en que lo cataloguen es lo de menos, lo importante es que 1) tu código funcione; y 2) entendamos el contexto de cualquier buena o mala práctica antes de elegir si queremos usarlas o no (si las X prácticas fueran absolutas se llamarían reglas, no prácticas)

Heberth López

student•

Muchas gracias por la explicación profe, justo tenía la misma duda pero después de leer esto ya lo tengo todo más claro 👍🏻

Jesus Olvera

student•

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

Risell Urdaneta

student•

Hola Jesus, te entiendo completamente! debemos ser constantes pero algo que tengo claro es que no aprenderé de la noche a la mañana y controlar la frustración es importante. Animo que llegaremos lejos!

Jairo ACP

student•

Hola Jesus, me identifico con tus palabras, apenas llevo 3 dias en esto jajaja, no sé absolutamente nada de programacion, pero tengo mucho interes en aprender.

Juan Francisco Sánchez Maldonado

student•

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)

David Alessandro Atahuamán Román

student•

Alejandra Monsalve

student•

Bro, esta genial!

Francisco Garcia Zuluaga

student•

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

JavaScript

HTML

Bayron Ocampo Vargas

student•

Como haces para lograr mostrar el codigo de hace manera, como genero esas imagenes?

Norman Daniel Pabon Contreras

student•

No sabía que se podía poner una función dentro de otra, excelente clase :D

Alberto Depablos

student•

En código el limite es tu imaginación, lo peor que puede pasar es que no funcione, las funciones que llaman a otras es básico para algoritmos recursivos

Esteven Vaca

student•

no a mi no se me cambian los nombres cuando recargo en el navegador y ya mi mire bien. ¿Alguien sabe porque será?

Leonardo Riojas

student•

Lo solucionaste? me pasa lo mismo, tengo todo igual y no me cambia el nombre del enemigo

Fiorella Hernández

student•

Hola, sube imagen del código.

Marcos Monteverde

student•

Que bueno que usemos el codigo de otro proyecto!!

Eddy atodeili Ochoa

student•

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.

Jorge Kevin Palomino Macias

student•

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

Alejandro Rendón

student•

Gracias! Repetí la clase 3 veces y no entendía porque no funcionaba

Carolina Restrepo Piedrahíta

student•

Muchas gracias. También tuve el mismo error y es gracias a tu comentario que ahora sí me funciona el código.

William Ricardo Lopez Rodriguez

student•

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:

Juan Camilo Santa Sánchez

student•

Yo lo hago igual xd, se ve mas largo y un poco feo pero me es muy util si necesito repasarlo

Excelente aporte :3

NEIDER SINISTERRA

student•

🤍 Esta muy alto el Volumen

David Antonio Morales Barrera

student•

Asi es y es una lástima que tan buenas explicaciones se vean afectadas por un mal audio. Desde hace dos clases me he dedicado mas a leer la documentacion y googlear por esa razón

David Antonio Morales Barrera

student•

Parece que ya lo corrigieron

Cristian Cevallos

student•

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