Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

Juego Breakout 2D con JavaScript puro

En este tutorial paso a paso creamos un juego sencillo para móviles, MDN Breakout, escrito en JavaScript puro, sin ninguna biblioteca externa.

Cada paso tiene ejemplos en vivo editables con los que puedes jugar, para que veas cómo deberían quedar las etapas intermedias. Aprenderás los fundamentos para implementar mecánicas de juego básicas, como la manipulación del canvas, el renderizado y movimiento de imágenes, la detección de colisiones, los mecanismos de control, las animaciones y tweens, y los estados de victoria y derrota.

Para aprovechar al máximo esta serie de artículos, deberías tener ya conocimientos de JavaScript de nivel básico a intermedio. Después de seguir este tutorial, deberías poder crear tus propios juegos web básicos.

Pantalla del juego MDN Breakout creado con JavaScript puro, en la que usas la paleta para hacer rebotar la pelota y destruir el muro de ladrillos, mientras se llevan los puntos y las vidas.

Nota: Esta guía tiene una guía hermana: Juego Breakout 2D con Phaser. Las dos siguen prácticamente los mismos pasos y llegan a resultados visualmente idénticos.