Berserk es un sitio web informativo y visualmente inmersivo que presenta el universo manga del manga. El objetivo fue crear una interfaz moderna, oscura y atmosférica que refleje la esencia de la obra.
Pac Man es un videojuego arcade creado por el diseñador de videojuegos Toru Iwatani de la empresa Namco, y distribuido por Midway Games al mercado estadounidense a principios de los años 1980.
Es una aplicación web interactiva que recrea el clásico videojuego arcade Pac-Man. Permite al usuario jugar directamente desde el navegador, controlando al personaje a través de un laberinto dinámico en tiempo real para recolectar puntos, huir de los fantasmas y activar potenciadores con una jugabilidad fluida y de estilo retro.
El objetivo principal es desarrollar y programar una aplicación interactiva que emule de forma fiel las mecánicas esenciales y la jugabilidad del Pac-Man original, logrando gestionar en tiempo real la detección de colisiones, el movimiento dinámico de los personajes (jugador y fantasmas) y la lógica de puntuación para ofrecer una experiencia arcade fluida y entretenida.
Tu rol en este proyecto fue el de Desarrollador de Videojuegos Web (o Desarrollador Front-End). Fuiste el responsable absoluto de la lógica de programación del juego, implementando los algoritmos de movimiento, la inteligencia artificial básica de los fantasmas, el sistema de colisiones y la renderización visual en pantalla para asegurar una experiencia interactiva fluida.
Para esta aplicación, utilizaste HTML5 (Canvas) para renderizar el laberinto y los personajes en pantalla, CSS3 para el diseño de la interfaz y la estética retro, JavaScript (ES6+) como el motor principal para programar el bucle del juego, la detección de colisiones y la lógica de movimiento en tiempo real, y Git/GitHub para gestionar el código y desplegar el videojuego en línea.
Paso a paso de como se creo el sitio web.
Analisis de requerimientos, referencias visuales, sitios similares y definición del tono, estilo y experiencia que deberia tener el sitio.
Estructura de la información y diseño de wireframes en baja fidelidad para definir la jerarquia y distribución del contenido.
Diseño visual de páginas, paleta de colores oscura, tipografía y componentes UI para la experiencia inmersiva.
Maquetación y Desarrollo del sitio con HTML5, PHP, CSS y WordPress implementando animaciones y efectos para mejorar la integración.
Testing en diferentes dispositivos y navegadores. Optimización de rendimiento, accesibilidad y corrección de detalles.
Publicación del sitio en producción y configuración final. Documentación del proyecto código GitHub.
Diseño 100% responsive
Navegación intuitiva y experiencia inmersiva
Rendimiento Optimizado
Código limpio y Reutilizable
Gestión de estados y animaciones con JavaScript
Diseño de interfaces oscuras efectivas
Optimización de imágenes y assets
Mejores practicas en Desarrollo Frontend