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?
Programación en Navegadores: Primeros Pasos
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 233
Preguntas 123
A este punto ya se va complicando un poco el tema con tanto codigo. Pero no me rendire ya quiero ver este videojuego terminado.
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 😄
La comunidad es tan hermosa al compartir sus cosas, pero admito que me pone ansiosa ver como cada uno le agrega su toque personalizado a su código mientras que yo apenas le voy llevando el ritmo al profe jsjs :’(
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.
Aquí mi manera dejar saber al usuario el ataque del enemigo después de elegir su ataque.
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í:
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.
Hola comunidad, ¿cómo están?
Considero más efectivo realizar el proyecto Mokepón con diferente temática pero con misma lógica.
Es por eso que me he puesto a la tarea de realizar un juego algo diferente.
He aquí mis avances en el navegador
también un poco de mi código:
Html:
<<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title>Leyends of warriors</title>
<script src="./Js/Leyends of warriors.js"></script>
</head>
<body>
<h1>¡Leyends of warriors! ⚔️</h1>
<!--S. SELECCIONAR PERSONAJE-->
<section id="Seleccionar-guerrero">
<h2>Opta por el guerrero de tu preferencia:</h2>
<label for="ballista">Ballista</label>
<input type="radio" name="guerrero" id="ballista"/>
<label for="espadachin">Espadachin</label>
<input type="radio" name="guerrero" id="espadachin"/>
<label for="infante">Infante</label>
<input type="radio" name="guerrero" id="infante"/>
<button id="boton-guerrero">Poseer</button>
</section>
<!--S. ATAQUES-->
<section id="Seleccionar-arremetida">
<h2>Opta por la arremetida de tu preferencia:</h2>
<p>Tu guerrero <span id="guerrero-jugador"></span> posee <span>3</span> vidas</p>
<p>El guerrero enemigo <span id="guerrero-enemigo"></span> posee <span>3</span> vidas</p>
<p>
<button id="boton-ballesta">Ballesta 🏹</button>
<button id="boton-espada">Espada 🗡</button>
<button id="boton-hacha">Hacha 🪓</button>
</p>
</section>
<section id="avisos">
<p>Tu guererto ha atacado con Ballesta, el guerrero enemigo ha atacado con Espada - ¡la victoria es tuya! 🎊</p>
</section>
<section id="reiterar">
<button id="boton-reiterar">¡Vuelve a luchar!</button>
</section>
</body>
</html>>
Javascript
<let arremetidaJugador
let arremetidaEnemigo
function iniciarJuego(){
let botonGuerreroJugador = document.getElementById("boton-guerrero")
botonGuerreroJugador.addEventListener("click", poseerGuerreroJugador)
let botonBallesta = document.getElementById("boton-ballesta")
botonBallesta.addEventListener("click", arremetidaBallesta)
let botonEspada = document.getElementById("boton-espada")
botonEspada.addEventListener("click", arremetidaEspada)
let botonHacha = document.getElementById("boton-hacha")
botonHacha.addEventListener("click", arremetidaHacha)
}
function poseerGuerreroJugador() {
let inputBallista = document.getElementById("ballista")
let inputEspadachin = document.getElementById("espadachin")
let inputInfante = document.getElementById("infante")
let spanGuerreroJugador = document.getElementById("guerrero-jugador")
if (inputBallista.checked) {
spanGuerreroJugador.innerHTML = "Ballista"
} else if (inputEspadachin.checked) {
spanGuerreroJugador.innerHTML = "Espadachin"
} else if (inputInfante.checked) {
spanGuerreroJugador.innerHTML = "Infante"
} else {
alert("¡No pudes acudir a la batalla sin un guerrero!")
}
poseerGuerreroEnemigo()
}
function poseerGuerreroEnemigo() {
let GuerreroAleatorio = aleatorio(1,3)
let spanGuerreroEnemigo = document.getElementById("guerrero-enemigo")
if (GuerreroAleatorio === 1) {
spanGuerreroEnemigo.innerHTML = "Ballista"
} else if (GuerreroAleatorio === 2){
spanGuerreroEnemigo.innerHTML = "Espadachin"
} else {
spanGuerreroEnemigo.innerHTML = "Infante"
}
}
function arremetidaBallesta() {
arremetidaJugador = "Ballesta"
arremetidaAleatoriaEnemigo()
}
function arremetidaEspada() {
arremetidaJugador = "Espada"
arremetidaAleatoriaEnemigo()
}
function arremetidaHacha() {
arremetidaJugador = "Hacha"
arremetidaAleatoriaEnemigo()
}
function arremetidaAleatoriaEnemigo() {
let arremetidaAleatoria = aleatorio(1,3)
if (arremetidaAleatoria == 1) {
arremetidaEnemigo = "Ballesta"
} else if (arremetidaAleatoria == 2) {
arremetidaEnemigo = "Espada"
} else {
arremetidaEnemigo = "Hacha"
}
}
function aleatorio(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
window.addEventListener("load",iniciarJuego)>
Espero que este proyecto pueda concluirse exitosamente, sin más, gracias por llegar hasta el final. Espero que les guste. 😄
Algún día podré hacer un aporte 😦 , por el momento estaré siguiendo las instrucciones de Juan 😄
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')
}
}
Ufff está clase la tuve que repetir varias veces, no me arrojaba ningún resultado, al final, me di cuenta que no tenía declarada la variable global.
y pensar que hace un mes no sabia nada de codigos y empece en PLATZI , ahora entiendo lo que escriben en cada linea de codigo! no me atrevo aun a irme solo por el mar de los codigos! pero no me rendire y seguire aprendiendo un poco cada dia mas! NUNCA PAREMOS DE APRENDER
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)
es imposible entenderlo, tantas funciones muy complicado mantener encendido el cerebro 🤣🤣
Este es mi primer aporte, realmente no necesite preguntar o escribir nada en esta seccion de comentarios, pero este es un momento especial, al fin logre realizar por mi mismo mi parte del código que el profe dijo antes de ver su respuesta, parece tonto pero las ultimas veces no pude lograrlo por mi mismo y me fastidiaba, pensaba que no había aprendido nada y que era inútil, que solo calqueo que el profe dictaba y listo, pero por fin veo que algo esta funcionando, lento pero si funciona.
lo que intente fue que cuando el jugador eligiera cualquiera de los botones de ataques elementales, osea fuego, agua y tierra, te saliera un alert, pero que al instante despues tambien te saliera un alert para la eleccion del rival que es completamente aleatoria, reutilize la logica aleatoria del piedra papel y tijeras, y lo cambie por los elementos, y asi al momento de elegir por ejemplo fuego, el rival tambien elige uno de forma aleatoria.
hay un monton de cosas que se pueden mejorar, pero estoy orgulloso del bebe que logre crear, esta feo, pero al menos respira ajajjaa 😅.
En este punto me empezó a sudar la frente 🤣
![](
<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)
}
Yo lo hice de esta manera:
function ataqueEnemigo() {
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"
}
}
Estoy en este momento en la pausa de la clase.
Mi forma de hacer el ataque aleatorio del enemigo, fue creando una nueva función (function defensaEnemigo(){}). En esta función reutilizo la función aleatorio().
Me funciono, acá les dejo el código:
function defensaEnemigo(){
let defenEnemigo = ""
defenEnemigo = aleatorio(1,30)
if (defenEnemigo <= 10){
alert(ataqueJugador + " Vs. 🔥")
}else if(defenEnemigo >=11 && defenEnemigo <= 20){
alert(ataqueJugador + " Vs. 🌊")
}else{
alert(ataqueJugador + " Vs. 🌱")
}
}
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'
}
]
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";
}
}
El código para obtener un número aleatorio entre mínimo y máximo que usan Freddy y Juan me parece innecesariamente complicado ya que como no soy bueno en matemáticas no logro memorizarlo bien, en cambio, hice este código que es más fácil de digerir y genera números aleatorios entre 1 y el número más alto que quieras delimitar con la variable max:
let rng = Math.ceil(Math.random() * max);
de modo que si max es = 3, va a generar un número aleatorio entre 1 y 3, así de simple y no tienes que crear una segunda variable, puedes poner max = 100 y generará un número aleatorio entre 1 y 100, y si quieres controlar el mínimo puedes usar un ciclo while para obtener un nuevo valor mientras rng sea menor al mínimo especificado en el ciclo while de esta manera:
let rng = 0;
while (rng < min) //min = 50
rng = Math.ceil(Math.random() * max); // max = 100
Generará un número aleatorio hasta que rng obtenga un valor mayor o igual a 50, delimitado por el límite máximo que en este caso sería 100.
Asi lo hice yo, en el documento HTML cree un espan con el id = “ataque-jugador”, y otro con id = “ataque-enemigo”, para que diera el resultado directamente en el documento HTML sin un cuadro de dialogo,
function ataqueFuego(){
ataqueJugador = "FUEGO"
document.getElementById("ataque-jugador").innerHTML = "FUEGO"
alert("Tu ataque fue " + ataqueJugador)
//luego de que se selecciona el ataque, inmediatamente se invoca el ataque aleatorio del enemigo
ataqueAleatorioEnemigo()
}
function ataqueAgua(){
ataqueJugador = "AGUA"
document.getElementById("ataque-jugador").innerHTML = "AGUA"
alert("Tu ataque fue " + ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueTierra(){
ataqueJugador = "TIERRA"
document.getElementById("ataque-jugador").innerHTML = "TIERRA"
alert("Tu ataque fue " + ataqueJugador)
ataqueAleatorioEnemigo()
}
//para crear las funciones de ataque enemigo
function ataqueAleatorioEnemigo() {
let spanAtaqueEnemigo = document.getElementById(“ataque-enemigo”)
let ataqueAleatorio = aleatorio(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = 'FUEGO'
spanAtaqueEnemigo.innerHTML = "FUEGO"
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = 'AGUA'
spanAtaqueEnemigo.innerHTML = "AGUA"
} else {
ataqueEnemigo = 'TIERRA'
spanAtaqueEnemigo.innerHTML = "TIERRA"
}
alert("El ataque enemigo fue " + ataqueEnemigo)
}
//MOSTRANDO LOS ATAQUES DENTRO DEL HTML SIN CUADROS DE DIALOGOS O ALERTAS
//Funcion aleatorio general
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
window.addEventListener(“load”, iniciarJuego)
Pause y lo hice quiza este bien o no pero funciona… para que el ataque enemigo se reproduzca inmediatamente termine el nuestro llame a la funcion terminando cada ataque de nuestra mascota … :v
Resolví estó con switch case para el enemigo asjdsajdklasj
A este punto tuve que repetir las partes del curso que no comprendia, por que me costaba ciertos conceptos y que se estaba haciendo en la practica, pero ahora ya lo entiendo mejor todo con un mayor contexto
Hola! Saludos cordiales.
Seria bueno que dejaran el codigo completo de cada clase en un archivo pdf para uno como estudiante poder comparar donde esta mal su codificacion! es algo contructivo. Soy nuevo, me incribi hoy y tengo muchas ganas de seguir aprendiendo.
Gracias
Es impresionante la forma en que se usa las variables globales para el funcionamiento de los botones del JS. Esta parte del curso se complica un poco, pero eso es lo bueno de la practica.
Me Gusta El Ritmo Del Prof. juan Super Excelente …
Cada Clase Veo Mi Progreso de Aprendijase Mas Aguil.
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)
}
Por si alguien se pierde, esta clase va después de la clase llamada “Ataques en JavaScript”. Me salieron en orden invertido 😅
Para evitar tanto if, lo hice así
Aquí el código copiable
function ataqueAleatorioEnemigo() {
opcionesDeAtaques = ["Fuego", "Agua", "Tierra"];
let indice = aleatorio(0, 2);
ataqueEnemigo = opcionesDeAtaques[indice];
};
al resolverlo solo, lo resolví de esta manera:
cree una función de selección del ataque enemigo en el cual use la función aleatorio, luego hice use condicionales para los ataques.
function SeleccionarAtaquetaqueEnemigo() {
let numeroAleatorio = aleatorio(1,3)
let ataqueEnemigo = ""
if (numeroAleatorio == 1) {
ataqueEnemigo = "FUEGO"
alert("Mascota enemiga usa " + ataqueEnemigo)
} else if (numeroAleatorio == 2) {
ataqueEnemigo = "AGUA"
alert("Mascota enemiga usa " + ataqueEnemigo)
} else {
ataqueEnemigo = "TIERRA"
alert("Mascota enemiga usa " + ataqueEnemigo)
}
}
luego la función que cree la invoque al final de cada función de ataque para que después de elegir un ataque se ejecute el del enemigo
function ataqueFuego() {
ataqueJugador = "FUEGO"
alert("Tu mascota usa " + ataqueJugador)
SeleccionarAtaquetaqueEnemigo()
}
function ataqueAgua() {
ataqueJugador = "AGUA"
alert("Tu mascota usa " + ataqueJugador)
SeleccionarAtaquetaqueEnemigo()
}
function ataqueTierra() {
ataqueJugador = "TIERRA"
alert("Tu mascota usa " + ataqueJugador)
SeleccionarAtaquetaqueEnemigo()
}
Cada vez se pone mejor… Si había notado que el codigo para seleccionar mascota, se habia hecho con código para el ataque… Eso al final fue confuso y con todo respeto profe… Debería corregirse para no crear confusion, o si no se cambia el video… al menos dejar una “fe de erratas”.
Por ahora y muy emocionado, dejo mi código
let ataqueJugador
let ataqueEnemigo
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function seleccionarMascotaEnemigo() {
//alert('SELECCIONAR LA MASCOTA DEL ENEMIGO AUTOMATICAMENTE')
let mascotaAleatorio = aleatorio(1,3)
//alert('Mascota aleatoria Enemigo' + ataqueAleatorio)
let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
if (mascotaAleatorio == 1){
//Hipogogue
spanMascotaEnemigo.innerHTML = 'Hipodoge'
} else if (mascotaAleatorio == 2){
//Capipepo
spanMascotaEnemigo.innerHTML = 'Capipepo'
} else {
//Ratigueyta
spanMascotaEnemigo.innerHTML = 'Ratigueya'
}
}
function seleccionarMascotaJugador() {
//alert('SELECCIONASTE TU MASCOTA')
//Creando variables para inspeccionar los elementos seleccionados
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('Seleccionaste Hipodoge')
spanMascotaJugador.innerHTML = 'Hipodoge'
}
else if (inputCapipepo.checked){
//alert('Seleccionaste Capipepo')
spanMascotaJugador.innerHTML = 'Capipepo'
}
else if (inputRatigueya.checked){
//alert('Seleccionaste Ratigueya')
spanMascotaJugador.innerHTML = 'Ratigueya'
}
else {
alert('Aún no has seleccionado a tu mascota')
}
seleccionarMascotaEnemigo()
}
function ataqueAleatorioEnemigo(){
let ataqueAleatorio = aleatorio(1,3)
//alert('Ataque aleatorio Enemigo' + ataqueAleatorio)
//let spanAtaqueEnemigo = document.getElementById('ataque-enemigo')
if (ataqueAleatorio == 1){
//Fuego
ataqueEnemigo = 'Fuego 🔥'
alert('El enemigo ataca con ' + ataqueEnemigo)
} else if (ataqueAleatorio == 2){
//Agua
ataqueEnemigo = 'Agua 💧'
alert('El enemigo ataca con ' + ataqueEnemigo)
} else {
//Tierra
ataqueEnemigo = 'Tierra 🌱'
alert('El enemigo ataca con ' + ataqueEnemigo)
}
}
function ataqueFuego(){
ataqueJugador = 'Fuego 🔥'
alert('El jugador ataca con ' + ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueAgua(){
ataqueJugador = 'Agua 💧'
alert('El jugador ataca con ' + ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueTierra(){
ataqueJugador = 'Tierra 🌱'
alert('El jugador ataca con ' + ataqueJugador)
ataqueAleatorioEnemigo()
}
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)
}
window.addEventListener('load', iniciarJuego)
Con todo respeto, pero qué desorden para enseñar y que falta de seriedad con los estudiantes con toda esa borradera de código, cambio de nombre a las variables o funciones y esa manía de escribir código saltando en desorden por todas las secciones del algoritmo. ¿Así son todos los cursos Platzi? o ¿sólo es éste por ser gratuito?.
Con ese método van a correr a las personas que nunca han tenido clases de programación.
Mejor empiecen por enseñar bien la estructura del lenguaje y el cómo, para qué y cuándo de todas sus etiquetas, métodos, librerías, etc. Después enseñen con pseudocódigo para estructurar bien el algoritmo y luego si lo transcriben al lenguaje de programación.
buenas para todos soy d e colombia soy tecnico electronico y de sistemas per les comparto este tema es una calidad me gusta y sis estamos aqui es porque nos gusta y es el aliciente para seguir adelanteeeee… pa lante compañeros. es mas ya se que voy a estudiar programacion y desarrollo de sotfaware. para aplicarlo a mi proyecto de vida. deseo lo mejor para todos
La función se puede interpretar como una pequeña parte del programa o software que realice una tarea en particular de manera independientes y esta a su vez te puede devolver algún valor o no. variable = lugar en la memoria que guarda un determinado valor.
duré casi una noche completa para poder resolver mi error. y la satisfacción tan grande de haberlo encontrado y que salga igual del profesor. Animo amigos. Se puede 🙌😃
ESTA FUE MI SOLUCION
let ataqueJugador
let ataqueEnemigo
function IniciarJuego() {
let botonMokeponJugador = document.getElementById('boton-mokepon')
botonMokeponJugador.addEventListener('click', seleccionarMokeponJugador)
let botonFuego = document.getElementById("boton-fuego")
botonFuego.addEventListener("click", ataqueFuego)
let botonTierra = document.getElementById("boton-tierra")
botonTierra.addEventListener("click", ataqueTierra)
let botonAgua = document.getElementById("boton-agua")
botonAgua.addEventListener("click", ataqueAgua)
}
function seleccionarMokeponJugador(){
let inputSprinkler = document.getElementById("sprinkler")
let inputTerranova = document.getElementById("terranova")
let inputFireball = document.getElementById("fireball")
let inputAarno = document.getElementById("aarno")
let inputAnubis = document.getElementById("anubis")
let inputSpyro = document.getElementById("spyro")
let spanMokeponJugador = document.getElementById("mascota-jugador")
if (inputSprinkler.checked ) {
spanMokeponJugador.innerHTML = "SPRINKLER"
} else if (inputTerranova.checked ){
spanMokeponJugador.innerHTML = "TERRANOVA"
} else if (inputFireball.checked ){
spanMokeponJugador.innerHTML = "FIREBALL"
} else if (inputAarno.checked ){
spanMokeponJugador.innerHTML = "AARNO"
} else if (inputAnubis.checked ){
spanMokeponJugador.innerHTML = "ANUBIS"
} else if (inputSpyro.checked ){
spanMokeponJugador.innerHTML = "SPYRO"
} else {
spanMokeponJugador.innerHTML = "ERROR EN LA SELECCION"
}
eleccionMokeponEnemigo()
}
function aleatorio(min,max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
let pc
function eleccionMokeponEnemigo(){
pc = aleatorio(1,6)
let spanMokeponEnemigo = document.getElementById("mascota-enemigo")
if(pc == 1){
spanMokeponEnemigo.innerHTML = "SPRINKLER"
} else if(pc == 2){
spanMokeponEnemigo.innerHTML = "TERRANOVA"
} else if(pc == 3){
spanMokeponEnemigo.innerHTML = "FIREBALL"
} else if(pc == 4){
spanMokeponEnemigo.innerHTML = "AARNO"
} else if(pc == 5){
spanMokeponEnemigo.innerHTML = "ANUBIS"
} else {
spanMokeponEnemigo.innerHTML = "SPYRO"
}
}
function ataqueFuego(){
ataqueJugador = "TU MOKEPON ATACA CON FUEGO"
alert(ataqueJugador)
ataquePC()
}
function ataqueTierra(){
ataqueJugador = "TU MOKEPON ATACA CON TIERRA"
alert(ataqueJugador)
ataquePC()
}
function ataqueAgua(){
ataqueJugador = "TU MOKEPON ATACA CON AGUA"
alert(ataqueJugador)
ataquePC()
}
function ataquePC(){
pc = aleatorio(1,3)
if (pc == 1) {
ataqueEnemigo = "FUEGO"
alert("EL MOKEPON ENEMIGO ATACA CON "+ ataqueEnemigo)
} else if (pc == 2) {
ataqueEnemigo = "TIERRA"
alert("EL MOKEPON ENEMIGO ATACA CON " + ataqueEnemigo)
} else {
ataqueEnemigo = "AGUA"
alert("EL MOKEPON ENEMIGO ATACA CON " + ataqueEnemigo)
}
}
window.addEventListener("load", IniciarJuego)
tengo un dolor de cabeza desde que empecé este curso que es terrible pero con la motivación que tengo nadie me para he visto mi codigo 60 millones de veces y me sigue dando error
hay no ! eso de de borrar y volver a rediseñar me enrreda yo si es explicacion asi NO prendo xq me enrredo mas !!!
<code>
```function ataqueFuego() {
ataqueJugador= "Fuego"
alert(ataqueJugador)
ataqueMascota ()
}
function ataqueAgua() {
ataqueJugador= "Agua"
alert(ataqueJugador)
ataqueMascota ()
}
function ataqueTierra() {
ataqueJugador= "Tierra"
alert(ataqueJugador)
ataqueMascota ()
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function ataqueMascota() {
let ataqueMascota = aleatorio(1, 3)
let spanAtaqueMascota = document.getElementById("enemigo-ataque")
if(ataqueMascota == 1) {
spanAtaqueMascota.innerHTML = "Fuego"
} else if(ataqueMascota == 2) {
spanAtaqueMascota.innerHTML = "Agua"
} else {
spanAtaqueMascota,innerHTML = "Tierra"
}
}
Por aquí les dejo mi código hasta ahora 😁
var mokeponActual
var c = 0
var mokepones = ["hipodoge", "capipepo", "ratigueya", "langostelvis", "tucapalma", "pydos"]
var ataques = ["FUEGO 🔥", "AGUA 💧", "TIERRA 🌱"]
let ataqueJugador
let ataqueRival
function iniciarJuego() {
let botonMascotaJugador = document.getElementById("botonMascota")
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function nombreBoton(nombre) {
if(document.getElementById(nombre).checked){
mokeponActual = nombre.charAt(0).toUpperCase() + nombre.slice(1)
alert("Escogiste a " + mokeponActual)
document.getElementById("mascotaJugador").innerHTML = mokeponActual
} else {
c++
}
}
function seleccionarMascotaJugador() {
for(i = 0; i < mokepones.length; i++) {
nombreBoton(mokepones[i])
}
if(c == mokepones.length) {
alert("¡Elige una mascota!")
c = 0
}
seleccionarMascotaRival()
}
function seleccionarMascotaRival() {
let numeroMascota = aleatorio(0, 5)
let nombre = mokepones[numeroMascota]
mokeponRival = nombre.charAt(0).toUpperCase() + nombre.slice(1)
alert("El rival escogio a " + mokeponRival)
document.getElementById("mascotaRival").innerHTML = mokeponRival
seleccionarAtaqueJugador()
}
function tipoAtaqueJugador(elemento) {
alert("Tu ataque es " + elemento)
ataqueJugador = elemento
ataqueRivalAleatorio()
}
function seleccionarAtaqueJugador() {
let botonFuego = document.getElementById("botonFuego")
botonFuego.addEventListener("click", function(elemento){
tipoAtaqueJugador(ataques[0])})
let botonAgua = document.getElementById("botonAgua")
botonAgua.addEventListener("click", function(elemento){
tipoAtaqueJugador(ataques[1])})
let botonTierra = document.getElementById("botonTierra")
botonTierra.addEventListener("click", function(elemento){
tipoAtaqueJugador(ataques[2])})
}
function ataqueRivalAleatorio() {
let ataqueAleatorio = aleatorio(0,2)
ataqueRival = ataques[ataqueAleatorio]
alert("El rival ataca con " + ataqueRival)
}
window.addEventListener("load", iniciarJuego)
siii!!! logre que el codigo funcinara antes que juan David castro, ahora vamos a ver como lo hace el
WOww!! lo hice exactamente igual, y hasta tuve el mismo problema de ponerle el mismo nombre a la variable y a la función jaja
Con Switch para simplificar
function ataqueEnemigo(){
let ataque= aleatorio(1,3);
switch(ataque){
case 1:
ataqueMascotaEnemigo.innerHTML = "fuego";
break;
case 2:
ataqueMascotaEnemigo.innerHTML = "agua";
break;
case 3:
ataqueMascotaEnemigo.innerHTML = "tierra";
break;
}
}
**si algo me ha servido mucho, es rehacer todo el código escrito anteriormente cada día antes de iniciar el curso, sin ver las clases,
ósea vuelvo a escribir todo el código que he aprendido antes de darle continuidad al curso, voy lento, pero ya puedo hacer todo esto de memoria **
Yo en vez de utilizar un if utilicé switch
let ataque_jugador = ""
let num_ataque_enemigo = aleatorio(1,3)
let ataque_enemigo = ""
console.log("el ataque del jugador es: " + ataque_enemigo);
console.log("el ataque del enemigo es: " + ataque_jugador);
function iniciarJuego() {
let let_boton_mascota = document.getElementById("boton_mascota")
let_boton_mascota.addEventListener("click", seleccionarMascota)
let let_botonfuego = document.getElementById("boton_fuego")
let_botonfuego.addEventListener("click", ataqueFuego)
let let_botonagua = document.getElementById("boton_agua")
let_botonagua.addEventListener("click", ataqueAgua)
let let_botontierra = document.getElementById("boton_tierra")
let_botontierra.addEventListener("click", ataqueTierra)
}
function seleccionarMascota() {
input_hipodoge = document.getElementById("Hipodoge")
input_capipepo = document.getElementById("Capipepo")
input_ratigueya = document.getElementById("Ratigueya")
span_mascotajugador = document.getElementById("id_mascotajugador")
if(input_hipodoge.checked){
span_mascotajugador.innerHTML = "Hipodoge"
} else if(input_capipepo.checked){
span_mascotajugador.innerHTML = "Capipepo"
} else if(input_ratigueya.checked){
span_mascotajugador.innerHTML = "Ratigueya"
}else{
span_mascotajugador.innerHTML = "NO SELECCIONADA"
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo() {
let mascota_aleatoria = aleatorio(1, 3)
console.log("la mascota del enemigo es: " + mascota_aleatoria);
span_mascotaenemigo = document.getElementById("id_mascotaenemigo")
if (mascota_aleatoria == 1) {
span_mascotaenemigo.innerHTML = "Hipodoge"
} else if (mascota_aleatoria == 2) {
span_mascotaenemigo.innerHTML = "Capipepo"
} else if (mascota_aleatoria == 3) {
span_mascotaenemigo.innerHTML = "Ratigueya"
} else {
span_mascotaenemigo.innerHTML = "ERROR, MASCOTA NO SELECCIONADA"
}
}
function ataqueFuego(){
ataque_jugador = "FUEGO"
alert("Jugador atacó con " + ataque_jugador)
ataqueEnemigo()
}
function ataqueAgua(){
ataque_jugador = "AGUA"
alert("Jugador atacó con " + ataque_jugador)
ataqueEnemigo()
}
function ataqueTierra(){
ataque_jugador = "TIERRA"
alert("Jugador atacó con " + ataque_jugador)
ataqueEnemigo()
}
function ataqueEnemigo() {
switch (num_ataque_enemigo) {
case 1:
ataque_enemigo = "FUEGO"
alert("Enemigo atacó con " + ataque_enemigo)
break;
case 2:
ataque_enemigo = "AGUA"
alert("Enemigo atacó con " + ataque_enemigo)
break;
case 3:
ataque_enemigo = "TIERRA"
alert("Enemigo atacó con " + ataque_enemigo)
break;
}
}
function aleatorio(min, max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
window.addEventListener("load", iniciarJuego)
Este fue mi modo de resolverlo 😃
Las variables globales se pueden leer desde la consola
Les juro que todavía voy por el minuto 2:55 y me re emocione por ver que tenía el codigo similar al profe 😃))
let ataqueJugador
let ataqueEnemigo
function iniciarJuego() {
let btnMascota = document.getElementById("seleccionar")
btnMascota.addEventListener("click", seleccionarMascotaJugador)
let btnFuego = document.getElementById("ataque-fuego")
btnFuego.addEventListener("click", ataqueFuego)
let btnAgua = document.getElementById("ataque-agua")
btnAgua.addEventListener("click", ataqueAgua)
let btnTierra = document.getElementById("ataque-tierra")
btnTierra.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 == true) {
spanMascotaJugador.innerHTML = "Hipodoge"
} else if (inputCapipepo.checked == true) {
spanMascotaJugador.innerHTML = "Capipepo"
} else if (inputRatigueya.checked == true) {
spanMascotaJugador.innerHTML = "Ratigueya"
} else{
alert("Elige una mascota")
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo() {
let mascotaAleatorio = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
if (mascotaAleatorio == 1) {
//Hipodoge
spanMascotaEnemigo.innerHTML = "Hipodoge"
} else if (mascotaAleatorio == 2){
//Capipepo
spanMascotaEnemigo.innerHTML = "Capipepo"
} else{
//Ratigueya
spanMascotaEnemigo.innerHTML = "Ratigueya"
}
}
function ataqueFuego() {
ataqueJugador = "FUEGO"
ataquesEnemigo()
}
function ataqueAgua() {
ataqueJugador = "AGUA"
ataquesEnemigo()
}
function ataqueTierra() {
ataqueJugador = "TIERRA"
ataquesEnemigo()
}
function ataquesEnemigo() {
let ataqueAleatorio = aleatorio(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = "Fuego"
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = "Agua"
} else {
ataqueEnemigo = "Tierra"
}
}
function aleatorio(min, max) {
return Math.floor(Math.random()*(max-min+1)+min)
}
window.addEventListener("load", iniciarJuego)
En mi propuesta use Switch para evaluar los casos con más facilidad.
Yo recordaba algo de los eventos cuando aprendí JAVA desktop y era que se podía crear la función en el mismo llamado del evento, lo busqué y para JS es así…
boton.addEventListener('click', function(){
//codigo que necesitas ejecutar
})
De esta forma no es necesario siempre crear una función, ya que a veces es innecesario crear 1 función por cada evento si es que sólo se usará 1 vez esa función.
Estoy muy contento porque la solución que planteé fue casi igual a la del profe! 😄
yo lo hice asi xd
<code>
function atqFire (){
atqPlayer = "FIRE"
alert(atqPlayer)
atqEnemy()
}
function atqWater (){
atqPlayer = "WATER"
alert(atqPlayer)
atqEnemy()
}
function atqEarth (){
atqPlayer = "EARTH"
alert(atqPlayer)
atqEnemy()
}
function atqEnemy() {
let atqRandomEnemy = random(1,3)
if (atqRandomEnemy == 1) {
alert ("FIRE")
} else if (atqRandomEnemy == 2) {
alert("WATER")
} else {
alert("EARTH")
}
}
function random(min, max) {
return Math.floor(Math.random() * (max - min +1) + min)
Entiendo pero cuando voy hacer el ejercicio si ver el video no logro hacer lo mismo
Esto fue lo primero que se me ocurrió
pst: no funciono😀
function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorio(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = "FUEGO 🔥"
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = "AGUA 💧"
} else {
ataqueEnemigo = "TIERRA 🏔️"
}
}
Hice la función etc y no pasó nada, hasta que escuché la solución de nuestro querido profe de llamar las funciones dentro y voilá funciono, solo me faltaba eso.
let attackPlayer
//let attackOpponent
function selectAttackOpponent(){
//let spanPetOther = document.getElementById(‘petOther’)
let spanAttackOpponent = document.getElementById(‘attackOpponent’)
let attackOpponent = aleatoria(1,4)
if( attackOpponent == 1){
//Hipodoge
spanAttackOpponent.innerHTML = ‘🌊🌊🌊’
}else if (attackOpponent == 2){
//Ratigueya
spanAttackOpponent.innerHTML = ‘🔥🔥🔥’
}else if (attackOpponent == 3){
//Langostelvis
spanAttackOpponent.innerHTML = ‘🌪️🌪️🌪️’
}else if (attackOpponent == 4){
//Tucapalma
spanAttackOpponent.innerHTML = ‘🪵🪵🪵’
}
}
//------ATAQUE DE TIERRA-------
function selectAttackEarth(){
attackPlayer = 'Ataque de 🪵🪵🪵🪵🪵🪵🪵’
selectAttackOpponent()
}
"
function ataqueEnemigo(){
let enemigoAtaque = aleatorio(1,3)
if(enemigoAtaque == 1){
enemigoAtaque = "Fuego"
alert("El enemigo escogio atacar con: " + enemigoAtaque)
}else if(enemigoAtaque == 2){
enemigoAtaque = "Agua"
alert("El enemigo escogio atacar con: " + enemigoAtaque)
}else{
enemigoAtaque = "Tierra"
alert("El enemigo escogio atacar con: " + enemigoAtaque)
}
}
"
function ataqueFuego() {
ataqueJugador = "Fuego"
alert("Elegiste atacar con: " + ataqueJugador)
ataqueEnemigo()
}
function ataqueAgua() {
ataqueJugador = "Agua"
alert("Elegiste atacar con: " + ataqueJugador)
ataqueEnemigo()
}
function ataqueTierra() {
ataqueJugador = "Tierra"
alert("Elegiste atacar con: " + ataqueJugador)
ataqueEnemigo()
}
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"
}
}
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.
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
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')
}
}
\<button id="boton-fuego" class="ataqueAle1">fuego 🔥\</button> \<button id="boton-agua" class="ataqueAle1">agua 💧 \</button> \<button id="boton-tierra" class="ataqueAle1">tierra 🌱 \</button> \
1. cree esto dentro de la funcion de iniciar juego let ataqueEnemigos = document.getElementsByClassName('ataqueAle1') ataqueEnemigos.addEventListener('click',ataqueAleatorioEne) 1. cree esta funcion con la misma logica de seleccionar mascota enemigo function ataqueAleatorioEne () { let ataqueenemigoale = aleatorio(1,3) let spanAtaqueEnemigo1 = document.getElementById('spanAtaqueEnemigo') if(ataqueenemigoale == 1) { spanAtaqueEnemigo1.innerHTML = 'AGUA'} else if (ataqueenemigoale == 2) { spanAtaqueEnemigo.innerHTML = 'FUEGO'} else { spanAtaqueEnemigo1.innerHTML = 'TIERRA'} } 1. le coloque el span en html, pero pues cuando lo prueba no aparece nada, no se en que parte esta incorrecto o si lo logica esta mal, agradezco todos los comentarios , lo siento por el desorden y la sintaxis, gracias
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?