Proyecto Academico

PACMAN GAME

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.

Duración del proyecto

1 dia

Tipo de contrato

Ninguno

Titulo

Indefinida

Estado

Finalizado

Descripcion

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.

Objetivo

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.

Mi Rol

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.

Tecnologias

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.

Proyecto Academico

Paso a paso de como se creo el sitio web.

1

Investigacion

Analisis de requerimientos, referencias visuales, sitios similares y definición del tono, estilo y experiencia que deberia tener el sitio.

2

Wireframes

Estructura de la información y diseño de wireframes en baja fidelidad para definir la jerarquia y distribución del contenido.

3

Diseño UI

Diseño visual de páginas, paleta de colores oscura, tipografía y componentes UI para la experiencia inmersiva.

4

Desarrollo

Maquetación y Desarrollo del sitio con HTML5, PHP, CSS y WordPress implementando animaciones y efectos para mejorar la integración.

5

Pruebas

Testing en diferentes dispositivos y navegadores. Optimización de rendimiento, accesibilidad y corrección de detalles.

6

Lanzamiento

Publicación del sitio en producción y configuración final. Documentación del proyecto código GitHub.

Resultados

  • Diseño 100% responsive
  • Navegación intuitiva y experiencia inmersiva
  • Rendimiento Optimizado
  • Código limpio y Reutilizable

Lo que aprendi

  • 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