Cuando programas un juego por turnos en JavaScript, llega un momento clave: dejar de imprimir cada clic y empezar a controlar cuándo arranca el combate. Aquí aprenderás a estructurar la lógica para que el navegador espere las cinco selecciones de ataque, recorra los arreglos con un for y valide los empates antes de declarar un ganador.
¿Por qué el juego se rompe al imprimir el arreglo completo?
El problema inicial es de timing. Cada vez que dabas clic en un botón, se ejecutaba la función combate y se imprimía el arreglo entero, no el ataque individual. La consecuencia: texto repetido, lógica confusa y un juego que reacciona antes de tiempo.
La solución es separar dos momentos: registrar la secuencia de cinco ataques y lanzar el combate solo cuando ambas secuencias estén completas. Para eso, la llamada a combate se mueve fuera del bloque donde el enemigo elige sus ataques y se mete dentro de una función nueva que valida la longitud del arreglo.
¿Cuándo debe ejecutarse la función combate? Solo cuando el arreglo del jugador alcance los cinco ataques. Antes de eso, el navegador debe esperar y permitir que sigas seleccionando.
¿Cómo creo la función iniciarPelea para validar la secuencia?
La función iniciarPelea actúa como un guardia: revisa si ya tienes los cinco ataques antes de lanzar la pelea. Su lógica es simple pero poderosa.
javascript
function iniciarPelea() {
if (ataqueJugador.length === 5) {
combate();
}
}
Con esta validación, cada clic en un botón sigue agregando ataques al arreglo, pero el combate no se dispara hasta que la longitud llega a 5. Es la diferencia entre un juego que reacciona impulsivamente y uno que respeta la mecánica de turnos.
¿Qué hace el método length en este caso?
length devuelve cuántos elementos hay dentro de un arreglo. Si tu arreglo ataqueJugador tiene tres ataques seleccionados, ataqueJugador.length vale 3. La validación === 5 asegura que solo cuando completes la secuencia, el juego avance.
¿Cómo recorro los ataques con un loop for?
Una vez que ambas secuencias están listas, necesitas comparar ataque por ataque: el primero del jugador contra el primero del enemigo, el segundo contra el segundo, y así hasta el quinto. Para eso usas un for.
javascript
for (let index = 0; index < ataqueJugador.length; index++) {
// comparaciones aquí
}
El for arranca con index = 0, sigue mientras index sea menor a la longitud del arreglo del jugador, y suma uno en cada vuelta. En cada iteración, index te da el número exacto del ataque que estás revisando.
¿Qué es un loop for en JavaScript? Es una estructura que repite un bloque de código un número definido de veces. Sirve para recorrer arreglos elemento por elemento sin escribir el mismo código cinco veces.
¿Cómo evito repetir código al guardar los ataques actuales?
Aquí entra un principio que te va a acompañar toda tu carrera: don't repeat yourself, o DRY. Si necesitas acceder a ataqueJugador[index] y ataqueEnemigo[index] varias veces dentro de cada validación, repetirlo en cada if es ineficiente.
La solución es crear una función que extraiga ambos valores y los guarde en variables reutilizables.
javascript
let indexAtaqueJugador;
let indexAtaqueEnemigo;
function indexAmbosOponentes(jugador, enemigo) {
indexAtaqueJugador = ataqueJugador[jugador];
indexAtaqueEnemigo = ataqueEnemigo[enemigo];
}
Las variables se declaran con let porque su valor cambia en cada iteración. La función recibe dos parámetros, que en la práctica serán el mismo index del for, y rellena las variables globales que usarás en los mensajes y validaciones.
¿Cómo se aplica la validación de empate dentro del for?
Dentro del loop, llamas a indexAmbosOponentes(index, index) y luego comparas. Si los ataques coinciden, lanzas el mensaje de empate.
javascript
for (let index = 0; index < ataqueJugador.length; index++) {
if (ataqueJugador[index] === ataqueEnemigo[index]) {
indexAmbosOponentes(index, index);
crearMensajeEmpate();
}
}
Con esto, los mensajes ya no imprimen el arreglo entero. Imprimen el ataque puntual de cada ronda, línea por línea, como debe ser.
¿Qué reto queda pendiente para completar la lógica?
La validación de empates ya está. Falta resolver los otros dos escenarios: cuando gana el jugador y cuando gana el enemigo. La buena noticia es que ya tienes todas las piezas.
- Usa
else if para encadenar las comparaciones.
- Compara combinaciones como fuego contra agua, tierra contra fuego, agua contra tierra.
- Llama a
indexAmbosOponentes(index, index) en cada bloque para tener los ataques disponibles antes de imprimir el resultado.
- Sustituye los mensajes que imprimían el arreglo completo por mensajes que usen
indexAtaqueJugador y indexAtaqueEnemigo.
También queda pendiente cambiar la lógica general del juego: hoy depende de vidas que llegan a cero, pero la mecánica correcta es ganar por victorias acumuladas. Eso se resuelve en la siguiente etapa.
¿Cómo te quedó tu validación? Cuéntame en los comentarios qué combinaciones de ataques probaste y si te topaste con algún bug raro al recorrer los arreglos.
