Substituir gráficos por bichos

[omiras]

Objetivo

Substituir las manzanas, bentos, etc; por los bichos Por ejemplo:

https://www.freepng.es/png-y2q6fj/ https://thumbs.dreamstime.com/b/cute-bugs-e-insectos-personajes-vectores-de-dibujos-animados-y-hormiga-sonriente-feliz-oruga-caracol-ara%C3%B1a-escarabajo-abeja-mosca-199452998.jpg insects

Análisis

1. Todas las ímagenes estan hechas en CSS (style.css). Tenemos que ver cómo substituir dichos diseños CSS por las imágenes
2. Previsiblemente, los selectores CSS pueden ser substituidos por otros que tengan más sentido para nuestro contexto (spider, ladybug, snake, etc.)
3. Si el proceso de cambio es más traumático que hacerlo de cero, valorarlo.
4. Para el primer nivel, el objetivo será substituir los platos del nivel 1 del juego original por mariquitas (u otro bicho)
5. Comprobar que tal se aplica la animación del "baile".
6. Idealmente los gráficos deberían ser vectoriales (SVG)

[omiras]

• Añadir un "césped" donde reposen las mariquitas.
• Para dar la sensación de "celda" de array, hacer como en Grid Garden

[omiras]

Se tiene la idea de aprovechar la manera que la app procesa el boardMarkup para:

• Generar una estructura tipo e indicar que esta parcela tiene una mariquita dentro, mientras que NO la tiene.
• Por ejemplo, si hay 3 tags significa que hemos de generar un grid de una fila y 3 columnas (grid-template-columns?)
• Valorar si no va a ser más sencillo este código para generar el grid de mariquitas: https://github.com/thomaspark/gridgarden/tree/master/js

• 2 Sería interesante consensuar con este equipo que información poner en el nivel 1 de la app @fataranto @fataranto

[SaraaLee]

• Estamos valorando usar boardMarkup ( donde se verán las celdas y bichos del array inicial) y boardMarkupSolution (que se verán las celdas y bichos de la solución final CORRECTA ) ✔
• Actualizados los nombres de los tags ( plate --> grass, orange --> ladybug) ✔
• Queremos hacer el logo 🚨

[fataranto]

aquí hay imágenes vectoriales gratis https://www.vecteezy.com/free-vector/bug

[fataranto]

aquí más... https://www.freepik.com/free-photos-vectors/insect

[fataranto]

más... https://www.freevector.com/vector/bugs