Juego breakout en 2D usando Phaser

En este tutorial paso a paso, creamos un sencillo juego móvil: MDN Breakout, escrito en JavaScript, utilizando el framework Phaser.

Cada paso tiene muestras editables y en vivo disponibles para jugar, para que puedas ver cómo deberían ser las etapas intermedias. Aprenderás los fundamentos del uso del framework Phaser para implementar mecánicas de juego fundamentales como la renderización y el movimiento de imágenes, la detección de colisiones, los mecanismos de control, las funciones de ayuda específicas del framework, las animaciones y los tweens, y los estados de victoria y derrota.

Para sacar el máximo provecho de esta serie de artículos, deberías tener conocimientos básicos o intermedios de JavaScript. Después de terminar este tutorial, deberías ser capaz de construir tus propios juegos web simples con Phaser.

Pantalla de juego del juego MDN Breakout creado con Phaser en el que se puede utilizar la paleta para hacer rebotar la pelota y destruir el campo de ladrillos, manteniendo registro de los puntos y las vidas

Detalles de la lección

Todas las lecciones - y las diferentes versiones del juego MDN Breakout que estamos construyendo juntos - están disponibles en GitHub:

  1. Inicializar el framework
  2. Escalar
  3. Cargar los archivos e imprimirlos en pantalla
  4. Mover la bola
  5. Físicas
  6. Rebote en las paredes
  7. Paleta y controles del jugador
  8. Fin del juego
  9. Construir el campo de ladrillos
  10. Detección de colisiones
  11. Puntuación
  12. Ganar la partida
  13. Vidas extra
  14. Animaciones y keyframes intermedios
  15. Botones
  16. Aleatorización del juego

Como nota sobre las vías de aprendizaje - comenzar con JavaScript puro es la mejor manera de obtener un conocimiento sólido del desarrollo de juegos web. Si aún no estás familiarizado con el desarrollo de juegos en JavaScript puro, te sugerimos que primero trabajes con la contraparte de esta serie, Breakout: juego en 2D usando JavaScript puro.

Después de eso, puedes elegir cualquier framework que te guste y usarlo para tus proyectos; nosotros hemos elegido Phaser porque es un buen framework sólido, con un buen soporte y comunidad disponible, y un buen conjunto de plugins. Los frameworks aceleran el tiempo de desarrollo y ayudan a ocuparse de las partes aburridas, permitiéndote concentrarte en las cosas divertidas. Sin embargo, los frameworks no siempre son perfectos, así que si sucede algo inesperado o quieres escribir alguna funcionalidad que el framework no proporciona, necesitarás algunos conocimientos de JavaScript puro.

Nota: Esta serie de artículos puede utilizarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del Gamedev Phaser Content Kit basado en este tutorial si quieres dar una charla sobre desarrollo de juegos con Phaser.

Próximos pasos

¡Comencemos! Dirígete a la primera parte de la serie - Inicializar el framework.