Iteración de Arreglos y Manipulación DOM en JavaScript

Hasta este punto del desarrollo de tu primer software, tienes un videojuego funcional, pero aún con mejoras y optimizaciones por delante que puedes aplicar con todos los nuevos conceptos aprendidos.

Optimización de los ataques

Cada mokepon tiene sus propios ataques dependiendo el tipo. En este momento, puedes observar en el HTML que tenemos hardcodeado tres ataques, por lo tanto, todos los mokepones tendrán los mismos.

<div class="tarjetas-ataques">
    <button id="boton-fuego" class="boton-de-ataque">Fuego</button>
    <button id="boton-agua" class="boton-de-ataque">Agua</button>
    <button id="boton-tierra" class="boton-de-ataque">Tierra</button>
</div>

Ya sabes que esto no es para nada recomendable y hay que solucionarlo. Tómate un tiempo para pensar en tu propia solución y a continuación, veremos cómo puedes lograrlo.

La clase Mokepon tiene un atributo llamado ataques que guarda un array de ataques de cada personaje. Vamos a utilizar esta información para crear el código HTML dinámicamente.

Luego de que el usuario de la aplicación seleccionara un mokepon, enviamos el mokepon seleccionado a una nueva función llamada extraerAtaques().

function seleccionarMascotaJugador() {
    // ...
    extraerAtaques(mascotaJugador);
}

Aquí, iteraremos con un for el arreglo de todos los mokepones en búsqueda del mokepon seleccionado para poder tomar sus ataques y guardarlos en una nueva variable que posteriormente utilizaremos para crear los ataques en el código HTML. Utilizamos un if para poder buscar y validar el nombre del personaje seleccionado.

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

Este arreglo de ataques lo enviaremos a otra nueva función para renderizar el HTML y que el usuario pueda jugar con los ataques propios del mokepon. En la siguiente clase, completaremos este flujo para tener casi terminado la lógica de los ataques de los personajes.

---

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