Secuencia de ataques aleatorios del enemigo

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:53

Secuencia de ataques aleatorios del enemigo

Curso Gratis de Programación Básica 2022

Clase 57 de 84

Clase 57 / 84

Recursos

Construir un juego por turnos en JavaScript implica algo más que registrar la jugada del usuario: necesitas que el enemigo también arme su propia secuencia de ataques para poder comparar resultados. Aquí aprendes a generar esa secuencia aleatoria, guardarla en un arreglo y sincronizarla con la jugada del jugador para luego validar victorias.

Por qué cambiar de vidas a victorias en el juego

La lógica original del juego usaba tres vidas por lado, pero ahora la mecánica gira en torno a cinco ataques por jugador y conteo de victorias. Con cinco botones disponibles, cada partida produce cinco enfrentamientos y gana quien acumule más triunfos en esa secuencia.

Esto abre tres escenarios posibles:

Ganas tres y la máquina dos: victoria tuya.
Empatan dos a dos con un empate intermedio: empate.
La máquina se lleva cuatro y tú una: gana la máquina.

¿Por qué pasar de vidas a victorias? Porque al tener cinco botones disponibles, contar victorias por secuencia es más natural que restar vidas y permite validar empates, algo que la lógica anterior no contemplaba.

Cómo generar ataques aleatorios del enemigo según la mascota

El primer paso es dejar de usar un hardcode que limitaba los ataques del uno al tres. Como ahora cada moquepón tiene cinco ataques definidos en su constructor, conviene leerlos directamente del objeto seleccionado [03:30].

Dentro de la función seleccionarMascotaEnemigo se extrae el arreglo de ataques del personaje elegido por la máquina y se guarda en una variable como ataquesPokeponEnemigo. Para evitar errores de referencia, esa variable debe declararse arriba con let antes de asignarla.

Luego, en ataqueAleatorioEnemigo, el rango del número aleatorio se calcula con la longitud del arreglo:

javascript let ataqueAleatorio = aleatorio(0, ataquesPokeponEnemigo.length - 1);

Así, si mañana cada mascota tiene 15 ataques en lugar de 5, el rango se ajusta solo.

Cómo evitar que el índice cero quede sin ataque asignado

Un detalle clave: si el random arranca en cero pero las validaciones empiezan en uno, el cero queda huérfano y no asigna nada. La solución es ampliar el if con tablas de la verdad para cubrir los cinco índices [05:40]:

Si ataqueAleatorio es 0 o 1: agrega fuego.
Si ataqueAleatorio es 2 o 3: agrega agua.
En cualquier otro caso: agrega tierra.

Cómo guardar la secuencia del enemigo en un arreglo con push

La variable que almacena los ataques del enemigo no puede ser una variable cualquiera: tiene que ser un arreglo, porque vas a meterle cinco elementos uno tras otro. Si la declaras como variable simple, al llamar .push el navegador devuelve el error Cannot read property push of undefined [07:15].

La corrección es inicializarla así:

javascript let ataqueEnemigo = [];

Con eso, cada validación del if puede agregar un elemento sin romper la ejecución:

javascript ataqueEnemigo.push('fuego');

¿Qué hace el método push en JavaScript? Agrega un nuevo elemento al final de un arreglo existente. Solo funciona sobre arreglos, no sobre variables que guardan un único valor.

Cómo sincronizar el ataque del jugador con el del enemigo

Al mandar a llamar la función del enemigo, aparece un comportamiento raro: el enemigo selecciona un ataque antes de que el jugador toque algún botón. Esto pasa porque la llamada estaba fuera del forEach que asigna el evento de clic, así que se ejecutaba apenas cargaba la función [09:50].

La solución es mover la llamada a ataqueAleatorioEnemigo dentro del bloque que se dispara con cada clic. El flujo correcto queda así:

La función registra el evento de clic en cada botón mediante forEach.
El jugador hace clic y se guarda su ataque en el arreglo del jugador.
Inmediatamente después, se ejecuta la función del enemigo y se agrega su ataque al arreglo enemigo.
El ciclo se repite hasta completar las cinco selecciones.

Para verificar que todo funciona, un console.log(ataqueEnemigo) dentro de la función del enemigo permite ver en la consola la secuencia que se va construyendo en paralelo a la del jugador.

Cómo distinguir en consola la secuencia propia y la del enemigo

Cuando ambos console.log imprimen al mismo tiempo, basta con revisar la línea que reporta la consola. Por ejemplo, la línea 173 corresponde a secuenciaAtaque (jugador) y la 202 a ataqueAleatorioEnemigo. Así confirmas que cada arreglo guarda lo que debe.

¿Por qué el enemigo atacaba antes de que yo hiciera clic? Porque la función del enemigo se llamaba fuera del listener de clic. Al moverla dentro del forEach que escucha el evento, el enemigo solo ataca después de cada selección del jugador.

Qué falta para validar quién gana cada combate

Con los dos arreglos listos, uno con tu apuesta y otro con la jugada de la máquina, ya tienes la materia prima para comparar. Sin embargo, el juego sigue semiroto: los contadores muestran valores como -7 o 3 porque la lógica original bloquea botones cuando las vidas llegan a cero, y ese sistema ya no aplica.

Lo que viene es ajustar esa validación para que acepte cinco rondas y cuente victorias en lugar de restar vidas. ¿Cómo crees que conviene comparar los dos arreglos elemento por elemento? Cuéntame en los comentarios cómo lo resolverías antes de pasar a la siguiente clase.

rafael martinez

Hace 4 años

Hola, tengo un problema con mi codigo no me selecciona otro boton de ataque mas que el de tierra. Ya intente con varios metodos pero nada sirve. Les agradeceria la ayuda.

<// Funcion iniciar juego
const sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
const sectionReiniciarJuego = document.getElementById("reiniciar")
const botonMascotaJugador = document.getElementById("boton_mascota")
const botonReiniciar = document.getElementById("boton-reiniciar")

//seleccionar mascota
const sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")


//seleccion mascota enemigo
const spanMascotaEnemigo = document.getElementById("mascota-enemigo")

//Combate
const spanVidasJugador = document.getElementById("vidas-jugador")
const spanVidasEnemigo = document.getElementById("vidas-enemigo")

//Crear mensaje
const sectionMensajes = document.getElementById("resultado")
const ataqueDelJugador = document.getElementById("ataque-del-jugador")
const ataqueDelEnemigo = document.getElementById("ataque-del-enemigo")
const contenedorTarjetas = document.getElementById("contenedorTarjetas")
const contenedorAtaques = document.getElementById("contenedorAtaques")

//Mensaje final


//Arrays: se declara con "= []" y puede contener muchos valores independientemente de su tipo.
let mokepones = [];
let botones = [];
//Variables globales: estas variables son accesibles para cualquiera de nuestras funciones. Las variables dentro de las funciones solo pueden ser usadas por esa funcion donde fueron creadas.
let ataqueJugador = [];
let ataqueEnemigo = [];
let indexAtaqueJugador
let indexAtaqueEnemigo
let ataquesMokeponEnemigo
let opcionDeMokepones
let inputHipodoge
let inputCapipepo 
let inputRatigueya
let inputLangostelvis 
let inputTucapalma 
let inputPydos
let mascotaJugador
let ataquesMokepon
let botonFuego
let botonAgua
let botonTierra
let spanMascotaJugador
let vidasJugador = 3
let vidasEnemigo = 3


class Mokepon {
    constructor (nombre, imagen, vida) {
        this.nombre = nombre
        this.imagen = imagen
        this.vida = vida
        this.ataques = []
    }
}

//-new- hace referencia a un nuevo objeto en una clase ya existente. Los valores deben ir en el orden en el que se indico en el constructor.
let hipodoge = new Mokepon ("Hipodoge", "./Assets/mokepons_mokepon_hipodoge_attack.webp", 5)
let capipepo = new Mokepon ("Capipepo", "./Assets/mokepons_mokepon_capipepo_attack.webp", 5)
let ratigueya = new Mokepon ("Ratigueya", "./Assets/mokepons_mokepon_ratigueya_attack.webp", 5)
let langostelvis = new Mokepon ("Langostelvis", "./Assets/DALL_E_2022-12-06_18.23.04-removebg-preview.png", 5)
let tucapalma = new Mokepon ("Tucapalma", "./Assets/DALL_E_2022-12-06_17.39.28-removebg-preview.png", 5)
let pydos = new Mokepon ("Pydos", "./Assets/DALL_E_2022-12-06_18.22.03-removebg-preview.png", 5)



hipodoge.ataques.push( 
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "tierra🌱", id: "boton_tierra"},
)

capipepo.ataques.push( 
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    )

ratigueya.ataques.push( 
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "tierra🌱", id: "boton_tierra"},
)

langostelvis.ataques.push( 
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "tierra🌱", id: "boton_tierra"},
)

tucapalma.ataques.push( 
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "agua💧", id: "boton_agua"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "fuego🔥", id: "boton_fuego"},
)

pydos.ataques.push( 
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "fuego🔥", id: "boton_fuego"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "tierra🌱", id: "boton_tierra"},
    {nombre: "agua💧", id: "boton_agua"},
)

mokepones.push (hipodoge, capipepo, ratigueya, langostelvis, tucapalma, pydos)

function iniciarJuego() {
    
    sectionSeleccionarAtaque.style.display = "none"

    
    mokepones.forEach((mokepon) => {
        opcionDeMokepones = `
        <input type="radio" id=${mokepon.nombre} name=Mascota />
        <label class ="tarjeta-de-mokepon" for=${mokepon.nombre}>
            <p>${mokepon.nombre}</p>
            <img src=${mokepon.imagen} alt=${mokepon.nombre} >
        </label>
        `
        contenedorTarjetas.innerHTML += opcionDeMokepones

        inputHipodoge = document.getElementById('Hipodoge')
        inputCapipepo = document.getElementById("Capipepo")
        inputRatigueya = document.getElementById("Ratigueya")
        inputLangostelvis = document.getElementById("Langostelvis")
        inputTucapalma = document.getElementById("Tucapalma")
        inputPydos = document.getElementById("Pydos")
        spanMascotaJugador = document.getElementById("mascota-jugador")
    })
  
    sectionReiniciarJuego.style.display = "none"
    
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
    
    botonReiniciar.addEventListener("click", reiniciarJuego)
}

function seleccionarMascotaJugador() {
    
    sectionSeleccionarMascota.style.display = "none"
    sectionSeleccionarAtaque.style.display = "flex"

        if(inputHipodoge.checked){
            spanMascotaJugador.innerHTML = inputHipodoge.id
            mascotaJugador = inputHipodoge.id
    } else if (inputCapipepo.checked) {
        spanMascotaJugador.innerHTML = inputCapipepo.id
        mascotaJugador = inputCapipepo.id
    } else if (inputRatigueya.checked) {
        spanMascotaJugador.innerHTML = inputRatigueya.id
        mascotaJugador = inputRatigueya.id
    } else if (inputLangostelvis.checked) {
        spanMascotaJugador.innerHTML = inputLangostelvis.id
        mascotaJugador = inputLangostelvis.id 
    } else if (inputTucapalma.checked) {
        spanMascotaJugador.innerHTML = inputTucapalma.id
        mascotaJugador = inputTucapalma.id
    } else if (inputPydos.checked) {
        spanMascotaJugador.innerHTML = inputPydos.id
        mascotaJugador = inputPydos.id
    } else {
        alert("No seleccionaste tu mascota")
    }

    extraerAtaques(mascotaJugador)
    seleccionarMascotaEnemigo ()
    
}


function extraerAtaques(mascotaJugador) {
    let ataques
    for (let i = 0; i < mokepones.length; i++) {
        if (mascotaJugador === mokepones[i].nombre) {
            ataques = mokepones[i].ataques
        }
    }
    mostrarAtaques(ataques)
    
}

function mostrarAtaques(ataques) {
    ataques.forEach((ataque) => {
        ataquesMokepon = `
        <button id=${ataque.id} class="boton-ataque Bataque">${ataque.nombre} </button>
        `
        contenedorAtaques.innerHTML += ataquesMokepon
    }) 
        botonFuego = document.getElementById("boton_fuego")
        botonAgua = document.getElementById("boton_agua")
        botonTierra = document.getElementById("boton_tierra")
        botones = document.querySelectorAll(".Bataque")
}


function secuenciaAtaque() {
    botones.forEach ((boton) => {
        boton.addEventListener("click", (e) => {
            if (e.target.textContent === "fuego🔥") {
                ataqueJugador.push("fuego")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
            } else if(e.target.textContent === "agua💧") {
                ataqueJugador.push("agua")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
            } else {
                ataqueJugador.push("tierra")
                console.log(ataqueJugador)
                boton.style.background = "#112f58"
            }
            
            ataqueAleatorioEnemigo()
        })
    })
}

function seleccionarMascotaEnemigo() {
    let enemigoAleatorio = aleatorio(0, mokepones.length -1)
    
    spanMascotaEnemigo.innerHTML = mokepones[enemigoAleatorio].nombre
    ataquesMokeponEnemigo = mokepones[enemigoAleatorio].ataques
    secuenciaAtaque()
}


function ataqueAleatorioEnemigo() {
    let ataqueAleatorio = aleatorio(0, ataquesMokeponEnemigo.length -1)

    if (ataqueAleatorio == 0 || ataqueAleatorio == 1) {
        ataqueEnemigo.push("fuego")
    } else if (ataqueAleatorio == 3 || ataqueAleatorio == 4) {
        ataqueEnemigo.push("agua")
    } else {
        ataqueEnemigo.push("tierra")
    }
    iniciarPelea()
    console.log(ataqueEnemigo)
}

function iniciarPelea() {
    if (ataqueJugador.length === 5) {
        combate()
    }
}

function indexAmbosOponentes (jugador, enemigo) {
    indexAtaqueJugador = ataqueJugador[jugador]
    indexAtaqueEnemigo = ataqueEnemigo[enemigo]

}
   
function combate() {

    
    
    for (let index = 0; index < ataqueJugador.length; index++) {
        if (ataqueJugador[index] === ataqueEnemigo[index]) {
            indexAmbosOponentes (jugador, enemigo)
            crearMensaje("Empate")
        }
    }

    if (ataqueJugador == ataqueEnemigo) {
        crearMensaje("Empate")
    } else if (ataqueJugador == "fuego" && ataqueEnemigo == "tierra") {
        crearMensaje("GANASTE")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == "agua" &&  ataqueEnemigo == "fuego")  {
        crearMensaje("GANASTE")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo
    } else if (ataqueJugador == "tierra" && ataqueEnemigo == "agua") {
        crearMensaje("GANASTE")
        vidasEnemigo--
        spanVidasEnemigo.innerHTML = vidasEnemigo
    } else {
        crearMensaje("PERDISTE")
        vidasJugador--
        spanVidasJugador.innerHTML = vidasJugador
    }

    revisarVidas()
}

function revisarVidas() {
    if (vidasEnemigo == 0) {
        mensajeFinal("FELICITACIONES GANASTE!!!🎉🎉")
    } else if (vidasJugador == 0)  {
        mensajeFinal("LO SIENTO; PERDISTE😿😿. VUELVE A JUGAR")
    } 
}

function crearMensaje(resultado) {
    
    let nuevoAtaqueJugador = document.createElement("p")
    let nuevoAtaqueEnemigo = document.createElement("p")
    
    sectionMensajes.innerHTML = resultado
    nuevoAtaqueJugador.innerHTML =  indexAtaqueJugador
    nuevoAtaqueEnemigo.innerHTML = indexAtaqueEnemigo

    ataqueDelJugador.appendChild(nuevoAtaqueJugador)
    ataqueDelEnemigo.appendChild(nuevoAtaqueEnemigo)
}

function mensajeFinal(resultadoFinal) {
    sectionMensajes.innerHTML = resultadoFinal
    
    botonFuego.disabled = true
    botonAgua.disabled = true
    botonTierra.disabled = true
    
    sectionReiniciarJuego.style.display = "block"
}

function reiniciarJuego ()   {
    location.reload()
}

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

window.addEventListener("load", iniciarJuego)>

Juan Boni

Hace 3 años

Lograste resolverlo? Tengo el mismo error, siempre me devuelve el ataque Tierra

Juan Boni

Hace 3 años

Resolviste el error? Tengo el mismo problema

Comentarios (184)184 comentarios

Oscar Humberto Godínez Paiz

Juan Camilo Martinez Guerrero

Jorge Damián

Paula Inés Cudicio

Sebastian Pacheco Lopez

Damian Alquinga

MARTÍN ALBERTO CAB QUÉN

Arnaldo Medina

Jonathan Rafael Petit Rojas

Marcos Monteverde

Gabriel López

Ricardo Alfonso Chavez Vilcapoma

Xiomara Alejandra Hernández Arzola

Angel Rf Acuña

Nestor Rios Garcia

Laura Bedoya

Hace 2 años

ALEJANDRO ZAZUETA

Hace un año

Juan Pascuarelli

Leandra Vela

Jhon Lopez

Gustavo Mosquera

Adrián Leonardo Morales Rodríguez

Isaura Pino

Juan Omar Palma álvarez

David Limon

David Muñoz Sáez

Eddie Mora

Jose Daniel Lopez Marulanda

Oscar Antonio Gil Escalante

Felipe Gustavo Charalla Quispe

OSCARLEON www.oscarleon.app

Gabriel Enrique Rodriguez Mujica

Andres Mauricio hernandez aguiar

Hace 9 meses

Santiago Villalba

Fernando Javier Ruiz Revilla

Miguel Suarez

Miguel A. Rodriguez

Juan Pablo Peña Franco

Carbajal Resendiz Oswaldo Moises

Frandel Corporan Rodríguez

Jazmín Mirenda

Andres Rafael Tito

Eduardo Peña Ramos

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero