Game Engine Web

Un motor de juegos web simple basado en el patrón Entity Component System (ECS), desarrollado en JavaScript puro utilizando el API de Canvas 2D para renderizado.

Descripción

Este proyecto implementa un motor de juegos básico que permite crear entidades con componentes como posición (Transform) y velocidad (Velocity), y actualizarlas a través de sistemas como entrada de usuario, movimiento y renderizado. El motor utiliza un bucle de juego (Game Loop) para actualizar el estado del juego en cada frame.

Estructura del Proyecto

GameEngine-Web/
├── index.html          # Archivo HTML principal con el canvas del juego
├── index.css           # Estilos CSS (si se usan)
├── README.md           # Este archivo
└── src/
    ├── main.js         # Punto de entrada del juego, inicializa entidades y motor
    ├── components/     # Componentes que definen propiedades de entidades
    │   ├── Transform.js    # Componente de posición (x, y)
    │   └── Velocity.js     # Componente de velocidad (x, y)
    ├── core/           # Núcleo del motor
    │   ├── Engine.js       # Motor principal que gestiona entidades y sistemas
    │   └── GameLoop.js     # Bucle de juego que ejecuta actualizaciones por frame
    ├── ecs/            # Sistema Entity Component System
    │   └── Entity.js       # Clase Entity para crear objetos del juego
    ├── input/          # (Directorio vacío, para futuras expansiones de entrada)
    ├── math/           # (Directorio vacío, para utilidades matemáticas)
    ├── renderer/       # Sistema de renderizado
    │   └── Renderer2D.js   # Renderer que dibuja en Canvas 2D
    ├── scene/          # (Directorio vacío, para gestión de escenas)
    └── systems/        # Sistemas que actualizan entidades
        ├── InputSystem.js   # Maneja entrada de teclado para el jugador
        ├── MovementSystem.js # Actualiza posiciones basado en velocidad
        └── RenderSystem.js  # Dibuja entidades en el canvas

Arquitectura

El motor sigue el patrón Entity Component System (ECS):

• Entities: Representan objetos del juego (jugador, enemigos, etc.). Cada entidad tiene un ID único y puede tener múltiples componentes.
• Components: Datos puros que definen propiedades (Transform para posición, Velocity para movimiento).
• Systems: Lógica que opera sobre entidades que tienen ciertos componentes. Se ejecutan en orden: InputSystem, MovementSystem, RenderSystem.

El GameLoop utiliza requestAnimationFrame para ejecutar actualizaciones a ~60 FPS.

Cómo Ejecutar

1. Abre index.html en un navegador web.
2. El juego se iniciará automáticamente, mostrando un cuadrado azul (jugador) y uno rojo (enemigo).
3. Usa las teclas WASD para mover el cuadrado azul.

Características Actuales

• Entidades: Jugador y enemigo básico.
• Movimiento: Control del jugador con WASD.
• Renderizado: Dibujo de rectángulos coloreados en canvas.
• Bucle de Juego: Actualización continua del estado.

Tecnologías Usadas

• JavaScript ES6 Modules: Para organización del código.
• Canvas 2D API: Para renderizado gráfico.
• HTML5: Estructura básica.

Futuras Mejoras

• Implementar más componentes (Sprite, Health, etc.).
• Agregar colisiones.
• Sistema de escenas para niveles.
• Utilidades matemáticas (vectores, colisiones).
• Más tipos de entrada (mouse, gamepad).
• Optimizaciones de rendimiento.
• Sistema de audio.

Contribuir

Si deseas contribuir, puedes:

• Agregar nuevos componentes o sistemas.
• Mejorar el rendimiento.
• Implementar características faltantes.

Licencia

Este proyecto es de código abierto.