A este punto ya se va complicando un poco el tema con tanto codigo. Pero no me rendire ya quiero ver este videojuego terminado.
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 34
Preguntas 9
A este punto ya se va complicando un poco el tema con tanto codigo. Pero no me rendire ya quiero ver este videojuego terminado.
A mi se me ocurrió utilizar una variable global de tipo arreglo (ataquesDisponibles), en la cual almacené los ataques disponibles, para que luego, dentro de la función ataqueAleatorioEnemigo(), se le asignara a otra variable global (ataqueEnemigo) el ataque del enemigo de manera aleatoria.
let ataquesDisponibles = ["FUEGO 🔥", "AGUA 💧", "TIERRA 🌱"]
let ataqueJugador
let ataqueEnemigo
function iniciarJuego() {
//variables
let botonMascotaJugador = document.getElementById("boton-mascota");
//eventos
botonMascotaJugador.addEventListener("click", seleccMascotaJugador);
let botonFuego = document.getElementById("boton-fuego");
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById("boton-agua");
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById("boton-tierra");
botonTierra.addEventListener('click', ataqueTierra)
}
//FUNCIONES PARA MASCOTAS
function seleccMascotaJugador() {
let inputHipodoge = document.getElementById("hipodoge");
let inputCapipepo = document.getElementById("capipepo");
let inputRatigueya = document.getElementById("ratigueya");
let mascotaSeleccJugador = document.getElementById("mascota-jugador");
let mascotaActualJugador = "";
if (inputHipodoge.checked) {
mascotaActualJugador = "Hipodoge";
alert("Has a seleccionado a " + mascotaActualJugador);
mascotaSeleccJugador.innerHTML = mascotaActualJugador;
} else if (inputCapipepo.checked) {
mascotaActualJugador = "Capipepo";
alert("Has a seleccionado a " + mascotaActualJugador);
mascotaSeleccJugador.innerHTML = mascotaActualJugador;
} else if (inputRatigueya.checked) {
mascotaActualJugador = "Ratigüeya";
alert("Has a seleccionado a " + mascotaActualJugador);
mascotaSeleccJugador.innerHTML = mascotaActualJugador;
} else {
alert("Selecciona tu mascota");
}
seleccMascotaenemigo()
}
function seleccMascotaenemigo() {
let ataqueAleatorio = aleatorio(1, 3)
let mascotaSeleccEnemigo = document.getElementById("mascota-enemigo");
let mascotaActualEnemigo = "";
if (ataqueAleatorio == 1) {
//Hipodoge
mascotaActualEnemigo = "Hipodoge"
mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
} else if (ataqueAleatorio == 2) {
//Capipepo
mascotaActualEnemigo = "Capipepo"
mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
} else {
//Ratigüeya
mascotaActualEnemigo = "Ratigüeya"
mascotaSeleccEnemigo.innerHTML = mascotaActualEnemigo;
}
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//FUNCIONES PARA ATAQUES
function ataqueFuego() {
ataqueJugador = "FUEGO 🔥"
alert(ataqueJugador)
let spanAtaqueJugador = document.getElementById("ataque-jugador")
spanAtaqueJugador.innerHTML = ataqueJugador
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = "AGUA 💧"
alert(ataqueJugador)
let spanAtaqueJugador = document.getElementById("ataque-jugador")
spanAtaqueJugador.innerHTML = ataqueJugador
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = "TIERRA 🌱"
alert(ataqueJugador)
let spanAtaqueJugador = document.getElementById("ataque-jugador")
spanAtaqueJugador.innerHTML = ataqueJugador
ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo() {
ataqueEnemigo = ataquesDisponibles[Math.floor(Math.random() * ataquesDisponibles.length)]
let spanAtaqueEnemigo = document.getElementById("ataque-enemigo")
spanAtaqueEnemigo.innerHTML = ataqueEnemigo
}
window.addEventListener("load", iniciarJuego); //otra manera de llamar al script después de que se cargue todo el HTML
//la función iniciarJuego se carga cuando ya todo el contenido está cargado.
Me adelanté a realizar la lógica de la función del ataque enemigo y me siento re feliz de que sí me salió parecida a la del profesor, muy muy parecida. Me siento increíble de que cada vez voy mejorando 😄
Aquí mi manera dejar saber al usuario el ataque del enemigo después de elegir su ataque.
También tenemos otra forma de escribir las funciones llamada “Función Flecha” que normalmente se utiliza con funciones cortas para que el código se vea mas compacto. Ambas formas funcionan pero ésta última tiene algunas limitaciones. mas información al respecto aquí: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions
También para aquellos que tengan un nivel de inglés intermedio es bueno para practicar que lo traduscan todo al inglés (nombres de variable, funciones, etc). de esa manera se van acostumbrando para cuando les toque leer el codigo de alguien más (lo que según me dijeron pasa seguido).
Les dejo como va mi código hasta ahora y cualquier correción y crítica constructiva sobre como mejorarlo es bienvenida.
hagan los personajes asi jajaajaja
Este es mi aporte, me funciona perfectamente 😄}
function ataqueFuego() {
ataqueJugador = 'FUEGO'
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueAgua() {
ataqueJugador = "AGUA"
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA'
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueEnemigo(){
let variableAtaqueEnemigo = aleatorio(1,3)
if (variableAtaqueEnemigo == 1) {
alert('El ataque de tu enemigo es de Fuego')
}else if(variableAtaqueEnemigo == 2){
alert('El ataque de tu enemigo es de Agua')
}else {
alert('El ataque de tu enemigo es de Tierra')
}
}
 {
let ataqueAleatorio = aleatorio(1,3)
let spanATAQUEENEMIGO = document.getElementById("ATAQUE-ENEMIGO")
if (ataqueAleatorio == 1) {
spanATAQUEENEMIGO.innerHTML = "FUEGO"
} else if (ataqueAleatorio == 2) {
spanATAQUEENEMIGO.innerHTML = "AGUA"
} else if (ataqueAleatorio == 3) {
spanATAQUEENEMIGO.innerHTML = "TIERRA"
}
}
Un detalle con los botones de ataque es que deberian habilitarse solamente cuando escojamos nuestra mascota.
Esto es muy facil, en el html cuando creamos los botones, le agregamos la propiedad disabled, así estarán deshabilitados en un inicio.
Ahora nos vamos al javascript, por el momento tenemos la logica de los botones en la función iniciar juego, estas lineas las podemos mover a una función nueva llamada habilitarBotonesAtaque(), dicha función la utilizariamos al final de la función seleccionarMascotaJugador().
En la función que creamos, vamos a ir por cada botón habilitandolo con la propiedad .disabled (la misma que colocamos en el html). Le colocamos que su valor sea false, ya que en un primer momento su valor es true. Nos quedaria de la siguiente forma:
Todo el código con el nuevo orden que le dimos quedaria así:
Por si alguien se pierde, esta clase va después de la clase llamada “Ataques en JavaScript”. Me salieron en orden invertido 😅
Estuve un rato tratando de ver como resolver el minireto hasta que recorde una frase de cursos anteriores de “No reinventar la rueda” y fui a ver el codigo que habiamos hecho con Freddy y ahi continue con esa logica que me parecia bastante acertada, por suerte, quedo funcional el codigo
Le agregue un par de cosas para que en los alert diga que pokemon ataca pj
Siendo sincero, me gusta mas como lo hizo el profe, es mas agradable a la vista, me falta calle
let ataqueJugador
let pc = 0
//
function iniciarJuego() {
let botonMascotaJugador = document.getElementById('boton-mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonFuego = document.getElementById("boton-fuego")
botonFuego.addEventListener("click", ataqueFuego)
let botonAgua = document.getElementById("boton-agua")
botonAgua.addEventListener("click", ataqueAgua)
let botonTierra = document.getElementById("boton-tierra")
botonTierra.addEventListener("click", ataqueTierra)
}
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 has elegido todavia...")
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo() {
let mascotaAleatorio = aleatorio(1, 3)
let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
if(mascotaAleatorio == 1) {
spanMascotaEnemigo.innerHTML = "Hipodoge"
} else if(mascotaAleatorio == 2) {
spanMascotaEnemigo.innerHTML = "Capipepo"
} else {
spanMascotaEnemigo.innerHTML = "Ratigueya"
}
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function ataqueAleatorioEnemigo(enemigo) {
resultado = ""
if(enemigo == 1) {
resultado = "Fuego"
} else if(enemigo == 2) {
resultado = "Agua"
} else {
resultado = "Tierra"
}
return resultado
}
function ataqueFuego() {
ataqueJugador = "Fuego"
let pc = aleatorio(1, 3)
alert(ataqueJugador)
alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc))
}
function ataqueAgua() {
ataqueJugador = "Agua"
let pc = aleatorio(1, 3)
alert(ataqueJugador)
alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc))
}
function ataqueTierra() {
ataqueJugador = "Tierra"
let pc = aleatorio(1, 3)
alert(ataqueJugador)
alert(document.getElementById("mascota-enemigo").innerHTML + " ataca con: " + ataqueAleatorioEnemigo(pc))
}
window.addEventListener("load", iniciarJuego)
En el minuto 3:25 cuando estén cambiando el nombre a una función o variable que invocaste varias veces no es necesario cambiar el nombre una por una, solo presiona F2 y te desplegará un cuadro de texto para que se cambie el nombre a todas
En mi caso lo que hice fue que la función retornara el valor, así me queda más claro en el lugar que la utilizo que es lo que hace y como usar la variable. (Separar responsabilidades)
Bienvenidos comentarios:
let ataqueEnemigo;
function ataqueFuego() {
ataqueJugador = "FUEGO";
alert("Ataque jugador " + ataqueJugador);
ataqueEnemigo = ataqueAleatorioEnemigo();
alert("Ataque enemigo " + ataqueEnemigo);
}
function ataqueAgua() {
ataqueJugador = "AGUA";
alert("Ataque jugador " + ataqueJugador);
ataqueEnemigo = ataqueAleatorioEnemigo();
alert("Ataque enemigo " + ataqueEnemigo);
}
function ataqueTierra() {
ataqueJugador = "TIERRA";
alert("Ataque jugador " + ataqueJugador);
ataqueEnemigo = ataqueAleatorioEnemigo();
alert("Ataque enemigo " + ataqueEnemigo);
}
function ataqueAleatorioEnemigo() {
const ataqueAleatorio = aleatorio(1, 3);
if (ataqueAleatorio == 1) {
return "FUEGO";
} else if (ataqueAleatorio == 2) {
return "AGUA";
} else {
return "TIERRA";
}
}
<code>
function ataqueFuego(){
ataqueJugador= 'FUEGO'
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueAgua(){
ataqueJugador= 'AGUA'
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueTierra(){
ataqueJugador= 'TIERRA'
alert(ataqueJugador)
ataqueEnemigo()
}
function ataqueEnemigo(){
let aAleatorio= ataqueAleatorio(1,3)
if ( aAleatorio == 1 ){
alert('ENEMIGO ATACO CON FUEGO')
} else if ( aAleatorio == 2 ){
alert('ENEMIGO ATACO CON AGUA')
} else {
alert('ENEMIGO ATACO CON TIERRA')
}
}
function ataqueAleatorio(min,max){
return Math.floor(Math.random()*(max-min+1)+min)
}
Les comento que para evitar escribir las condiciones y los valores máximo y mínimo, hice un diccionario, y los números de la función aleatoria van a variar según la carga de los datos.
function seleccionarMascotaEnemigo() {
let data = base[0]
let mascotaAleatorio = aleatorio(data)
let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
spanMascotaEnemigo.innerHTML= data[mascotaAleatorio]
}
function ataqueFuego() {
ataqueJugador = 'FUEGO'
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = 'AGUA'
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA'
ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo() {
let data = base[1]
let ataqueAleatorio = aleatorio(data)
ataqueEnemigo = data[ataqueAleatorio].toUpperCase()
}
function aleatorio(data) {
max= Object.keys(data).length
min=1
return Math.floor(Math.random()*(max-min+1)+min)
}
base = [
{
1:'Hipodoge',
2:'Capipepo',
3:'Ratigueya',
4:'Langostelvis',
5:'Tucapalma',
6:'Pydos'
},
{
1:'Fuego',
2:'Agua',
3:'Tierra'
}
]
Esta es mi version simplificando los alerts y la seleccion de ataques:
let ataquejugador1
let ataquejugador2
// Función para activar los botones del DOM
window.addEventListener('load', function iniciarJuego() {
//Activar boton de seleccion
let botonSeleccionJugador1 = document.getElementById('boton-seleccion-jugador1')
botonSeleccionJugador1.addEventListener('click', confirmarSeleccionJugadores)
botonSeleccionJugador1.addEventListener('click', seleccionAtaqueJugador1)
})
// 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 confirmarSeleccionJugadores() {
// Imprimir seleccion del primer jugador
let spanMokeponJugador1 = document.getElementById('mokepon-jugador1')
alert('Has seleccionado ' + seleccionJugador1())
spanMokeponJugador1.innerHTML = seleccionJugador1()
// La computadora elige un mokepon aleatoriamente (numeros 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)
}
// Función para elegir el ataque del primer jugador
function seleccionAtaqueJugador1() {
let botonTierra = document.getElementById('boton-tierra')
let botonFuego = document.getElementById('boton-fuego')
let botonAgua = document.getElementById('boton-agua')
let botonTierraFuego = document.getElementById('boton-tierraFuego')
let botonTierraAgua = document.getElementById('boton-tierraAgua')
let botonAguaFuego = document.getElementById('boton-aguaFuego')
botonTierra.onclick = function ataqueTierra() {
ataquejugador1 = 'TIERRA'
confirmarAtaqueJugadores()
}
botonFuego.onclick = function ataquFuego() {
ataquejugador1 = 'FUEGO'
confirmarAtaqueJugadores()
}
botonAgua.onclick = function ataqueAgua() {
ataquejugador1 = 'AGUA'
confirmarAtaqueJugadores()
}
botonTierraFuego.onclick = function ataqueTierraFuego() {
ataquejugador1 = 'TIERRA-FUEGO'
confirmarAtaqueJugadores()
}
botonTierraAgua.onclick = function ataqueTierraAgua() {
ataquejugador1 = 'TIERRA-AGUA'
confirmarAtaqueJugadores()
}
botonAguaFuego.onclick = function ataqueAguaFuego() {
ataquejugador1 = 'AGUA-FUEGO'
confirmarAtaqueJugadores()
}
}
// Función para elegir el ataque del segundo jugador
function seleccionAtaqueJugador2(ataque) {
if(ataque == 1) {
return eleccionAtaque = "TIERRA"
} else if(ataque == 2) {
return eleccionAtaque = "FUEGO"
} else if(ataque == 3) {
return eleccionAtaque = "AGUA"
} else if(ataque == 4) {
return eleccionAtaque = "TIERRA-FUEGO"
} else if(ataque == 5) {
return eleccionAtaque = "TIERRA-AGUA"
} else if(ataque == 6) {
return eleccionAtaque = "AGUA-FUEGO"
}
}
// Función para confirmar el ataque de ambos jugadores
function confirmarAtaqueJugadores() {
// La computadora elige un ataque aleatoriamente (numeros entre 1 y 6)
let eleccionAtaqueJugador2 = generarEnterosAleatorios(1,6)
ataquejugador2 = seleccionAtaqueJugador2(eleccionAtaqueJugador2)
alert("Tu mokepon ha hecho un ataque tipo " + ataquejugador1
+"\nEl enemigo ha hecho un ataque tipo " + ataquejugador2)
}
function ataqueFuego() {
ataqueJugador = 'FUEGO'
alert(ataqueJugador)
ataquePc()
}
function ataqueAgua() {
ataqueJugador = 'AGUA'
alert(ataqueJugador)
ataquePc()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA'
alert(ataqueJugador)
ataquePc()
}
function ataquePc(){
ataqueEnemigo = aleatorio(1,3)
if (ataqueEnemigo== 1) {
alert('Enemigo ataca con FUEGO')
} else if (ataqueEnemigo == 2) {
alert('Enemigo ataca con AGUA')
} else if (ataqueEnemigo == 3){
alert('Enemigo ataca con TIERRA')
}
}
Parece que ya todos lo han notado pero esta clase se adelantó a la siguiente, deben ver primero la 24 y luego devolverse a esta, para seguir en el mismo orden en que se va programando el código.
Hola! A mi se me ocurrio utilizar una sola funcion para los ataques del jugador en vez de 3 (una por tipo de ataque).
//VARIABLES GLOBALES
let ataqueJugador
let ataqueEnemigo
//FUNCIONES
function iniciarJuego(){
let botonMascotaJugador = document.getElementById("boton-mascota");
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
let botonFuego = document.getElementById("boton-fuego");
botonFuego.addEventListener("click", function(){seleccionarAtaque("FUEGO")});
let botonAgua = document.getElementById("boton-agua");
botonAgua.addEventListener("click", function(){seleccionarAtaque("AGUA")});
let botonTierra = document.getElementById("boton-tierra");
botonTierra.addEventListener("click", function(){seleccionarAtaque("TIERRA")});
}
function aleatorio(min, max){
return Math.floor(Math.random()*(max-min+1)+min);
}
//SELECCION DE MASCOTAS
function seleccionarMascotaJugador(){
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");
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("Debes seleccionar un MOKEPON!");
}
if(spanMascotaJugador.innerHTML!=""){
seleccionarMascotaEnemigo();
}
}
function seleccionarMascotaEnemigo(){
let mascotaAleatoria = aleatorio (1,6);
let spanMascotaEnemigo= document.getElementById("mascota-enemigo");
if (mascotaAleatoria==1){
spanMascotaEnemigo.innerHTML="Hipodoge";
} else if (mascotaAleatoria==2){
spanMascotaEnemigo.innerHTML="Capipepo";
} else if (mascotaAleatoria==3){
spanMascotaEnemigo.innerHTML="Ratigueya";
} else if (mascotaAleatoria==4){
spanMascotaEnemigo.innerHTML="Langostelvis";
} else if (mascotaAleatoria==5){
spanMascotaEnemigo.innerHTML="Tucapalma";
} else {
spanMascotaEnemigo.innerHTML="Pydos";
}
}
//SELECCION DE ATAQUES
function seleccionarAtaqueEnemigo(){
let ataqueAleatorio= aleatorio(1,3);
if (ataqueAleatorio==1){
ataqueEnemigo = "FUEGO";
} else if (ataqueAleatorio==2){
ataqueEnemigo = "AGUA";
} else{
ataqueEnemigo = "TIERRA";
}
}
function seleccionarAtaque(tipo){
ataqueJugador = tipo;
seleccionarAtaqueEnemigo();
}
window.addEventListener("load", iniciarJuego)
Lo logre!!
<let ataqueJugador
let ataqueEnemigo
function iniciarJuego(){
let botonMascotaJugador = document.getElementById('boton_mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonFuego = document.getElementById('boton_fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton_agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton_tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador(){
let inputHipodoge = document.getElementById('hipodoge').checked
let inputCapipepo = document.getElementById('capipepo').checked
let inputRatigueya = document.getElementById('ratigueya').checked
let spanMascotaJugador = document.getElementById('mascotaJugador')
if (inputHipodoge){
//alert("seleccionaste a Hipodoge")
spanMascotaJugador.innerHTML = "Hipodoge"
}else if (inputCapipepo){
//alert("seleccionaste a Capipepo")
spanMascotaJugador.innerHTML = "Capipepo"
}else if (inputRatigueya){
//alert("seleccionaste a Ratigueya")
spanMascotaJugador.innerHTML = "Ratigueya"
}else{
alert("Debes seleccionar una mascota")
spanMascotaJugador.innerHTML = ""
}
seleccionarMascotaEnemigo()
seleccionarAtaqueEnemigo()
}
function seleccionarMascotaEnemigo(){
let spanMascotaEnemigo = document.getElementById('mascotaEnemigo')
let mascotaEnemigo = aleatotio(1, 3)
if(mascotaEnemigo == 1){
spanMascotaEnemigo.innerHTML = "Hipodoge"
}else if(mascotaEnemigo == 2){
spanMascotaEnemigo.innerHTML = "Capipepo"
}else if(mascotaEnemigo == 3){
spanMascotaEnemigo.innerHTML = "Ratigueya"
}
}
function seleccionarAtaqueEnemigo(){
//let spanAtaqueEnemigo = document.getElementById('ataqueEnemigo')
let ataqueEnemigo = aleatotio(1, 3)
if(ataqueEnemigo == 1){
ataqueEnemigo = 'FUEGO 🔥'
alert("Enemigo eligió: " + ataqueEnemigo)
}else if(ataqueEnemigo == 2){
ataqueEnemigo = 'AGUA 💧'
alert("Enemigo eligió: " + ataqueEnemigo)
}else if(ataqueEnemigo == 3){
ataqueEnemigo = 'TIERRA 🌱'
alert("Enemigo eligió: " + ataqueEnemigo)
}
}
function ataqueFuego(){
ataqueJugador = 'FUEGO'
alert(ataqueJugador)
}
function ataqueAgua(){
ataqueJugador = 'AGUA'
alert(ataqueJugador)
}
function ataqueTierra(){
ataqueJugador = 'TIERRA'
alert(ataqueJugador)
}
function aleatotio(min, max){
return Math.floor(Math.random() * (max-min+1) + min)
}
window.addEventListener('load', iniciarJuego)>
Es muy interesante adentrarse en este mundo 😁
My code (^///^)
let ataqueJugador
let ataqueEnemigo
function iniciarJuego(){
let botonElegir = document.getElementById('boton-elegir')
let botonFuego = document.getElementById('boton-fuego')
let botonAgua = document.getElementById('boton-agua')
let botonTierra = document.getElementById('boton-tierra')
botonElegir.addEventListener('click', seleccionarMascotaJugador)
botonFuego.addEventListener('click', ataqueFuego)
botonAgua.addEventListener('click', ataqueAgua)
botonTierra.addEventListener('click', ataqueTierra)
}
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) {
// alert('Elegiste a Hipodoge! 💦')
spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked) {
// alert('Elegiste a Capipepo 🌱')
spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked) {
// alert('elegiste a Ratigueya 🔥 ')
spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
alert('Por favor elige una mascota! 🤔')
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo(){
let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
let mascotaAleatoriaEnemigo = numeroRandom(1,3)
if (mascotaAleatoriaEnemigo == 1){
spanMascotaEnemigo.innerHTML ='Hipodoge'
} else if (mascotaAleatoriaEnemigo == 2){
spanMascotaEnemigo.innerHTML ='Capipepo'
} else {
spanMascotaEnemigo.innerHTML = 'Ratigueya'
}
}
function numeroRandom(min, max){
return Math.floor(Math.random()*(max-min+1)+min)
}
function ataqueFuego(){
ataqueJugador = 'Fuego 🔥'
alert('Atacas con ' + ataqueJugador)
alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}
function ataqueAgua(){
ataqueJugador = 'Agua 💦'
alert('Atacas con ' + ataqueJugador)
alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}
function ataqueTierra(){
ataqueJugador = 'Tierra 🌱'
alert('Atacas con ' + ataqueJugador)
alert('Enemigo ataca con '+ seleccionarAtaqueEnemigo())
}
function seleccionarAtaqueEnemigo(){
ataqueEnemigo = numeroRandom(1,3)
if (ataqueEnemigo == 1) {
return 'Fuego 🔥'
} else if (ataqueEnemigo == 2){
return 'Agua 💦'
} else {
return 'Tierra 🌱'
}
}
window.addEventListener('load', iniciarJuego)
Una forma de cambiar el nombre a una variable o función es que selecciones el nombre y con Ctrl + D se sombrearán el nombre repetidos en el código y puedes escribir y se verá el cambio a todos esos nombres. esto sirve para que no cambies el nombre de la variable o función individualmente y te ahorras algo de tiempo.
Muy buena tu dinámica de enseñanza, es muy practica a la hora de transmitir los conocimientos… Muy buenas las clases.👍
Asi quedo mi Codigo, Un poquito diferente al del profe con el (Switch)
var ataqueJugador
var ataqueEnemigo
function iniciarJuego() {
let botonMascotaJugador = document.getElementById('boton-mokepon')
botonMascotaJugador.addEventListener('click', seleccionarMokeponJugador)
let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
//Logica de seleccion de los mokepones del jugador
function seleccionarMokeponJugador() {
let mokeponhipodoge = document.getElementById('Hipodoge')
let mokeponcapipepo = document.getElementById('Capipepo')
let mokeponratigueya = document.getElementById('Ratigueya')
let spanMokeponJugador = document.getElementById('mokepon-jugador')
if(mokeponhipodoge.checked == true)
{
spanMokeponJugador.innerHTML = 'Hipodoge'
} else if(mokeponcapipepo.checked == true)
{
spanMokeponJugador.innerHTML = 'Capipepo'
} else if(mokeponratigueya.checked == true)
{
spanMokeponJugador.innerHTML = 'Ratigueya'
} else {
alert('Por favor selecciona un mokepon')
}
seleccionarMokeponEnemigo()
}
//logica de seleccion de los mokepones del enemigo
function seleccionarMokeponEnemigo() {
let seleccionAleatorio = Randomnumbers(1,3)
let spanMokeponEnemigo = document.getElementById('mokepon-enemigo')
if (seleccionAleatorio == 1) {
spanMokeponEnemigo.innerHTML = 'Hipodoge'
} else if (seleccionAleatorio == 2) {
spanMokeponEnemigo.innerHTML = 'Capipepo'
} else {
spanMokeponEnemigo.innerHTML = 'Ratigueya'
}
}
function Randomnumbers(min, max) {
return Math.floor( Math.random()* (max - min + 1) + min)
}
//fuciones para los ataques de los mokepones
function ataqueFuego() {
ataqueJugador = 'Fuego'
ataqueEnemigoAleatorio()
}
function ataqueAgua() {
ataqueJugador = 'Agua'
ataqueEnemigoAleatorio()
}
function ataqueTierra() {
ataqueJugador = 'Tierra'
ataqueEnemigoAleatorio()
}
function ataqueEnemigoAleatorio() {
let ataqueAleatorio = Randomnumbers(1,3)
switch(ataqueAleatorio) {
case 1:
ataqueEnemigo = 'FUEGO'
break;
case 2:
ataqueEnemigo = 'AGUA'
break;
case 3:
ataqueEnemigo = 'TIERRA'
break;
}
}
window.addEventListener('load', iniciarJuego)
Guau… super dinámicas y productivas las clases… Tratando de seguir el ritmo a todos los conceptos y nombres y funciones, etc nuevos… y como dijo Freddy en unos videos anteriores, volver a ver las clases la cantidad de veces que sea necesario! Gracias por tanto aporte y enseñar con tanto entusiasmo!
Otra opción para ver si el código esta funcionando correctamente es usar console.log()
function ataqueEnemigop(){
let ataqueAleatorio = aleatorio (1, 3)
if(ataqueAleatorio == 1){
ataqueEnemigo = “Fuego 🔥”
}else if(ataqueAleatorio == 2){
ataqueEnemigo = “Agua 💧”
}else if(ataqueAleatorio == 3){
ataqueEnemigo = “Tierra 🌱”
}
console.log(ataqueEnemigo)
function ataqueFuego(){
ataqueJugador = 'Fuego'
alert(ataqueJugador)
seleccionAtaqueEnemigo()
}
function ataqueAgua(){
ataqueJugador = 'Agua'
alert(ataqueJugador)
seleccionAtaqueEnemigo()
}
function ataqueTierra(){
ataqueJugador = 'Tierra'
alert(ataqueJugador)
seleccionAtaqueEnemigo()
}
function seleccionAtaqueEnemigo(){
let ataqueEnemigo = aleatorio(1,3)
let spanAtaqueEnemigo= document.getElementById('ataqueEnemigo')
if (ataqueEnemigo == 1){
spanAtaqueEnemigo.innerHTML = 'Fuego'
}
else if(ataqueEnemigo == 2){
spanAtaqueEnemigo.innerHTML = 'Agua'
}
else{
spanAtaqueEnemigo.innerHTML = 'Tierra'
}
El mío pasa por todos los ataques, sin tirar error en navegador, ya lo puse de cabeza y no encuentro el problema
Mi solucion quedo asi, ojala sea valida
function ataqueFire() {
let spanAtaquePlayer = document.getElementById("ataque-player")
spanAtaquePlayer.innerHTML = "Fuego"
ataqueIA()
}
function ataqueWater() {
let spanAtaquePlayer = document.getElementById("ataque-player")
spanAtaquePlayer.innerHTML = "Agua"
ataqueIA()
}
function ataqueEarth() {
let spanAtaquePlayer = document.getElementById("ataque-player")
spanAtaquePlayer.innerHTML = "Tierra"
ataqueIA()
}
function ataqueIA() {
let ataqueIA = aleatorio(1,3)
let spanAtaqueIA = document.getElementById("ataque-ia")
if (ataqueIA == 1) {
spanAtaqueIA.innerHTML = "Fuego"
} else if (ataqueIA == 2) {
spanAtaqueIA.innerHTML = "Agua"
} else if (ataqueIA == 3) {
spanAtaqueIA.innerHTML = "Tierra"
}
}
Creo que estan volteados los nombres de las clases jajaja (esta y la anterior)
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.