Desarrollador lanza sitio web temático de Sith con juego de consentimiento de cookies

Resumen Rápido

Un desarrollador ha rediseñado su sitio web con un tema único de Sith Lord, centrado en el Imperio Galáctico de las Galletas. El rediseño presenta un juego de consentimiento de cookies interactivo ubicado en la página de bienvenida, reemplazando una versión anterior y más aburrida. El desarrollador probó el sitio en varias plataformas, incluyendo Linuxes usando Firefox y Chrome, y Macbook usando Safari, notando compatibilidad con teléfonos Android más antiguos. Para un juego óptimo, se recomienda un ancho de ventana mínimo de 800 píxeles, con la mejor experiencia en pantallas más grandes. El sitio incluye una serie de artículos "detrás de escena" que detallan el proceso de desarrollo, desde las mecánicas del juego hasta la creación del avatar. El desarrollo actual se centra en adaptar CMUdict a JavaScript para mejorar el tiempo de los fonemas en la animación del avatar, utilizando la detección de energía de la forma de onda. Cabe destacar que el desarrollador confirmó que no se utilizaron LLM; todo el código está escrito a mano y se dejó sin minificar con fines educativos. También hay una pelea de jefe secreta oculta dentro del juego, accesible a través de las Herramientas de Desarrollo.

El Diseño del Imperio Galáctico de las Galletas

El rediseño del sitio web se realizó durante el período navideño y de fin de año. El desarrollador eligió una estética de Sith Lord para comandar el Imperio Galáctico de las Galletas, impulsado por el deseo de mejorar el juego de consentimiento de cookies anterior que se había vuelto aburrido con el tiempo. El nuevo tema se aplica a la página de bienvenida del sitio, que sirve como punto de partida para la experiencia interactiva.

El elemento interactivo principal es un juego que se activa exclusivamente en la página de bienvenida. Presenta una nave espacial del jugador que navega por un mundo de juego donde la cámara hace zoom y sigue la nave en pantallas más pequeñas. El desarrollador señaló que el juego es jugable con un ancho de ventana mínimo de 800 píxeles, aunque un ancho de 1280 píxeles proporciona la mejor experiencia sin movimiento de cámara. El juego también incluye una pelea de jefe secreta oculta que los usuarios pueden desbloquear interactuando con las Herramientas de Desarrollo del navegador.

Implementación Técnica y Compatibilidad

Se realizó una prueba exhaustiva para asegurar que el sitio funcione en diferentes entornos. El desarrollador probó el sitio web en Firefox y Chrome/Chromium ejecutándose en Linuxes, así como en Safari en una Macbook. Aunque no estaba disponible un iPhone para las pruebas, el sitio funcionó correctamente en teléfonos Android más antiguos utilizando un hack de meta viewport.

El desarrollador expresó su frustración de que este hack siga siendo necesario después de 15 años. El sitio está diseñado para funcionar en navegadores modernos, siendo la animación del avatar un enfoque clave del desarrollo continuo. Para mejorar el avatar, el desarrollador está trabajando en las siguientes tareas técnicas:

• Adaptar CMUdict a JavaScript/ECMAScript.
• Implementar la detección de energía de la forma de onda para el tiempo de los fonemas.
• Usar un detector de tasa de cruce por cero para una mejor sincronización.

Estos cambios tienen como objetivo solucionar problemas de tiempo con los fonemas, ya que las herramientas existentes basadas en Python no eran lo suficientemente en tiempo real. El desarrollador señaló que los documentos existentes sobre animación de fonemas eran "una especie de mierda y estaban rotos", lo que llevó a un enfoque altamente experimental con el nuevo detector de límites.

Filosofía de Desarrollo y Recursos

El desarrollador ha hecho que el código fuente sea completamente accesible al público. Se tomó una decisión de diseño específica para mantener el código sin empaquetar y sin minificar. Esto permite a los visitantes leer y aprender del código directamente. El desarrollador afirmó explícitamente que no se utilizaron LLM en la creación del sitio web; todo fue codificado a mano.

Para aquellos interesados en los detalles técnicos, hay disponible una serie de blogs "detrás de escena". Estos artículos cubren el proceso de desarrollo, la creación del avatar y depuradores específicos utilizados durante el proyecto. Los recursos incluyen:

• Detrás de escena del juego
• Detrás de escena del avatar
• Depuradores para jugar con ellos

El desarrollador espera que los usuarios disfruten de su estadía y se diviertan jugando al Juego de Consentimiento de Cookies.