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
Visual Studio Code
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
Aportes 38
Preguntas 29
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';
}
}
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.🤣
⚠️ 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 “manual” 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
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"
}
}
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
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.