Implementación de lógica de combate en juegos JavaScript

Tienes lista la lógica para preparar al mokepon del jugador y el mokepon del enemigo para el combate. Aun resta finalizar la lógica del propio combate para lograr determinar al ganador a partir de la cantidad de ataques ganados.

Cambiando la lógica del combate

Comienza declarando dos variables que utilizaremos para mostrar en el HTML el tipo de ataque del jugador y del enemigo (fuego, agua, tierra).

let indexAtaqueJugador;
let indexAtaqueEnemigo;

Luego de que la lógica de los ataques del jugador y del enemigo esté lista, ejecuta una nueva función iniciarPelea() que determinará si el combate está listo para iniciar o no.

function ataqueAleatorioEnemigo() {
    // ...
    iniciarPelea();
}

Implementaremos una nueva lógica para el combate donde es necesario que el jugador haya seleccionado el orden de sus cinco ataques para iniciar el combate. Para determinar esta lógica, utilizaremos el length del arreglo que guarda los ataques del jugador. Recuerda que, por cada ataque del jugador, se selecciona un ataque enemigo de forma aleatoria.

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

Declara otra nueva función llamada indexAmbosOponente() que usaremos para renderizar en el HTML el orden de los ataques del mokepon del jugador y del enemigo.

function indexAmbosOponente(jugador, enemigo) {
    indexAtaqueJugador = ataqueJugador[jugador];
    indexAtaqueEnemigo = ataqueEnemigo[enemigo];
}

Esta variable es leída desde la función crearMensaje() que es la encargada de crear el HTML.

function crearMensaje(resultado) {
    // ...
    nuevoAtaqueDelJugador.innerHTML = indexAtaqueJugador;
    nuevoAtaqueDelEnemigo.innerHTML = indexAtaqueEnemigo;
}

Si la lógica para iniciar el combate se cumple, el mismo inicia y se realiza el cálculo para evaluar quién es el ganador de cada ataque del combate o si hay empate.

function combate() {
    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] === ataqueEnemigo[index]) {
            indexAmbosOponente(index, index);
            crearMensaje("EMPATE");
        }
        // RETO: Determinar lógica del combate por cada ataque
    }
    revisarVidas();
}

Queda pendiente un reto para ti. Cada ataque del jugador puede ganar, empatar o perder. Implementa esta lógica en la función combate() y realiza el cálculo para determinar al ganador de la pelea al mejor de 5 ataques.

Haz un esfuerzo por resolver este reto. En la siguiente clase, encontrarás la solución al mismo.

---

Contribución creada por: Kevin Fiorentino (Platzi Contributor)