16. Fuegos artificiales: mousePressed() y funciones auxiliares

Paso 4/5 de práctica 3 "Fuegos artificiales"

El programa del paso anterior funciona, pero draw() empieza a ser largo y difícil de leer: la lógica de crear chispas y la de moverlas están mezcladas en el mismo bloque. Antes de añadir más cohetes, vamos a limpiar el código extrayendo esa lógica a funciones auxiliares. Verás que un código más limpio es también más fácil de ampliar.

Extraer funciones: explotar() y gestionarChispas()

Creamos dos funciones auxiliares. Cada una recibe un cohete como parámetro (llamado c dentro de la función) y trabaja con sus propiedades:

Nota

Localiza en el código que tenías antes de estas funciones y que ahora está dentro de ellas. Sustituye ese código por una llamada a la función correspondiente.

Ahora draw() queda mucho más corto y legible: solo describe el flujo general, sin entrar en detalles.

Varios cohetes con mousePressed()

Con el código limpio, dar el salto a varios cohetes es sencillo. Cambiamos cohete por un array cohetes = []. La función mousePressed() añade un cohete nuevo en cada clic. draw() los gestiona todos con un bucle for:

Array de objetos frente a arrays paralelos

En la práctica 2 teníamos px[], py[], pvx[], pvy[] y el índice i relacionaba los datos de la misma partícula. Aquí cada cohete lleva consigo todos sus datos agrupados: cohetes[i].x, cohetes[i].vy, cohetes[i].chispas… Al añadir una propiedad nueva — por ejemplo un tipo de explosión — solo hay que añadirla al objeto, sin crear un array paralelo nuevo.

El setup y draw

Fíjate en ===

c.chispas.length === 0 usa triple igual. En JavaScript === compara valor y tipo a la vez, mientras que == solo compara el valor y puede dar resultados inesperados. Es buena práctica usar siempre === para comparar.