Sistemas a medida
Minijuego para Recicla Consciente
Un juego de arrastrar y soltar que enseña a separar residuos jugando: envases reales, 7 contenedores y fichas que explican cómo reciclar cada material. Cien por ciento editable desde WordPress.
El reto
La campaña necesitaba algo más que información: una forma de que la gente practique cómo separar sus residuos antes de llegar a la estación de reciclaje. Un juego, pero con reglas de la vida real: envases de verdad, contenedores de verdad, y la explicación de cada material a un toque de distancia.
Con un requisito extra: que el equipo pudiera renovarlo en cada campaña —cambiar productos, contenedores, textos y puntajes— sin tocar una línea de código.
Todo lo que hace
Jugar y aprender
- Arrastras cada envase al contenedor que aparece en pantalla: acierto suma un punto, error no penaliza pero consume el envase. Como en la vida real, lo mal separado no regresa.
- Tras cada jugada, ficha educativa del material: qué es, cómo prepararlo («lavar, secar y aplastar») y dónde depositarlo.
- El juego avanza solo de contenedor en contenedor hasta agotar los envases.
Un final que invita a compartir
- Puntaje final animado y un mensaje distinto según el nivel alcanzado (3 niveles con umbrales configurables).
- Iconos de redes sociales con enlace directo, siempre visibles.
Pensado para el celular
- Formato vertical que escala a cualquier pantalla, sin zoom raro ni scroll horizontal.
- El envase queda siempre bajo el dedo y se inclina levemente al arrastrarlo, como si sintiera el movimiento; si lo sueltas fuera, vuelve solo a su sitio.
- Los productos se distribuyen automáticamente sin taparse entre sí: cada uno responde siempre al toque en su centro.
Detrás, todo editable
- Panel de administración con 5 pestañas: productos (ilimitados: solo imagen + material, el juego los acomoda solo), contenedores y sus fichas, mensajes finales y puntajes, fondos y logo, redes sociales.
- Funciona recién instalado con el contenido de la campaña original; cada cambio del panel se refleja al instante.
El resultado
0 código
para renovar la campaña: productos, textos y gráficos desde el panel.
Hasta 30 productos
que se acomodan solos, sin superponerse, en cualquier pantalla.
1 librería externa
el motor es JavaScript puro.
Por dentro
Un layout que se calcula solo
Nadie posiciona productos a mano: el motor detecta las zonas libres alrededor del contenedor, calcula el tamaño de caja más grande que da cabida a todos los productos configurados y genera exactamente esa cantidad de posiciones, repartidas en proporción al espacio de cada zona y espaciadas parejo. Con 20 productos o con 30, la pantalla siempre se ve llena y ordenada, con rotaciones sutiles para que parezca un tablero de stickers y no una cuadrícula.
Se ve grande, se agarra preciso
Las áreas táctiles de los productos nunca se superponen, pero su imagen se dibuja un 35% más grande e ignora al puntero: los envases se ven al tamaño natural y se rozan entre sí, y aun así cada uno responde siempre al toque en su centro — ninguno puede bloquear a otro.
Geometría separada de animación
Regla estructural del motor: ningún elemento que participa del arrastre lleva animaciones; los efectos (entrada escalonada, deslizamiento del contenedor, inclinación al arrastrar) viven en elementos visuales hijos. El resultado es un drag & drop que no se desalinea nunca, ni siquiera con la pestaña en segundo plano.
Un solo objeto de configuración
WordPress fusiona lo guardado en el panel con los valores por defecto, resuelve las imágenes de la Biblioteca de medios y entrega al juego un único objeto de configuración. El motor no sabe nada de la campaña: todo lo que muestra —productos, fichas, textos, umbrales, redes— viene de ahí. Cambiar la campaña entera es cambiar datos, no código.
Cuéntame qué necesitas
No necesitas tenerlo todo claro ni saber de tecnología. Si tienes una idea o un problema dando vueltas, escríbeme y lo vemos juntos. Te respondo yo mismo, sin compromiso.