Muy feliz de ver clases con Timothy Chalamet y lo divertido de aprender asi.
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
¿Cómo aprender programación?
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Instalando tu primer editor de código
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Juan David Castro Gallego
Aportes 254
Preguntas 119
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 “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';
}
}
Gracias joven manos de tijera por ponerle tanta emoción a este curso
Cuando Juan dice que que va a pedirle prestada la función de aleatoriedad a Freddy
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 “Seleccionar” sin haber seleccionado una mascota, el juego le dirá “No 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)
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
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
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)
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'
}```
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.
Que bueno que usemos el codigo de otro proyecto!!
🤍 Esta muy alto el Volumen
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= “mascota 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.
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);
}
estoy loqueando agregando imagenes en vez de texto
❤️
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
Me encanta haber aprendido tanto gracias a Mike Wheeler
⚠️ 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
No sé si más tarde se cambie, pero en la variable ataque
let ataqueAleatorio = aleatorio(1,3)
me parece más adecuado escribir “mascota”
let mascotaAleatorio = aleatorio(1,3)
ya que lo que estamos escribiendo, tiene que ver con la mascota y no con el ataque
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'
}
}
Estoy sorprendido con lo bien que explican lo profesores de platzi, es como si todos estuvieran super entrenados
Muchas gracias Juan , he aprendido mucho y el por què de errores que he tenido… por ejemplo la propiedad innerhtml
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
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
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
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)
}
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
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;
}
}
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
Un dato interesante es que a los errores de escritura en el ámbito digital se le llaman “Typo” o “Typos” en plural.
Así que, si la corrección que hizo el profesor al final se le dice corrección de typos
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];
}
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.
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.
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;
}
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.
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 “hey 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
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!!!
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.
🔥🔥👏👏
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;
}
Para no tener que escribir cada caso del pokemon enemigo, es decir
"que pasa si enemigo ==1,"
“que pasa si enemigo 2"
"que pasa si enemigo3…”
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.
Lo siento mas como una narracion , que como una explicacion.
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;
}
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(‘mascota-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'
}
}
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();
}
}
No sabia de la existencia del innerHTML que genial es. Se hacen cosas increibles con eso
al principio no me salio pero ahora si me sale
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;
}
}
}
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.
Voy realizando el juego mientras voy cantando:
Mokepon! tengo de codearlos!!!
Vamos bien, que chevere!!!
cuando el profe dijo “FELICIDADES 🎉” 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 !!!
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
Para el problema del “selecciona 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…no 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")
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?