
Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript
Mario Andres Pagella
- Editorial
- O'Reilly
- Año
- 2011
- Páginas
- ~154
- Nivel
- Intermedio
De qué trata
Libro corto (cinco capítulos) en el que Mario Andrés Pagella explica cómo crear desde cero un juego social en tiempo real con vista isométrica, al estilo de Farmville de Zynga, usando solo tecnologías web abiertas. Se publicó en 2011, en plena transición de Flash a HTML5. Está dirigido a desarrolladores que ya dominan JavaScript, HTML5 y CSS3, y aprovecha más a quien tiene alguna experiencia previa en juegos.
El primer capítulo trata los fundamentos gráficos con canvas 2D: animaciones fluidas con requestAnimationFrame, hojas de sprites, cómo saber qué hay bajo un píxel teniendo en cuenta la transparencia y cómo elegir entre canvas, DOM o CSS para dibujar. Luego aborda la proyección isométrica y el dibujo de la cuadrícula de baldosas, el diseño de una interfaz que funcione tanto en el PC como en dispositivos móviles, el sonido con el elemento audio y el cálculo pesado en segundo plano con Web Workers, aplicado a la búsqueda de caminos con A*. También usa localStorage y sessionStorage. El último capítulo pasa al servidor: un modelo de datos en PHP y MySQL, la validación de puntuaciones para evitar trampas y la integración con Facebook como capa social.
Todo converge en un proyecto final, Tourist Resort, cuyo código completo se publicó en GitHub. Las reseñas coinciden en que es un repositorio de código muy útil, con técnicas finas como la detección de clics sobre píxeles transparentes o el redibujado parcial de baldosas, pero con poca explicación: hay listados largos y apenas comentados, y la transformación isométrica y la parte de servidor se tratan muy por encima. No es un libro para principiantes, y hoy conviene complementarlo con un motor moderno y con WebSockets para el tiempo real.
- HTML5 Canvas
- Sprites
- Proyección isométrica
- Juegos sociales
- CSS3
- Web Workers
- Pathfinding A*
- Audio HTML5
- localStorage
- PHP y MySQL
- Prevención de trampas
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Tourist Resort
Juego social isométrico al estilo de Farmville: el jugador construye y gestiona un complejo turístico. Se dibuja con canvas y CSS3, calcula rutas con A* en Web Workers, guarda los datos en un servidor PHP y MySQL que valida las puntuaciones y se integra con Facebook.

