Famoso juego 2D usando JavaScript puro

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

En este tutorial paso a paso creamos un simple y famoso juego MDN escrito íntegramente en puro JavaScript y renderizado en HTML5 <canvas>.

Cada paso tiene ejemplos editables y vivos para jugar para que puedas ver como deberian ser los escenarios intermedios. Apenderás lo básico de usar el elemento <canvas> para implementar mecánicas de juego fundamentales como renderizar o mover imágenes, detección de colisiones, mecanismos de control y perder o ganar estados.

Para aprovechar al máximo esta serie de artículos deberías tener ya un conocimiento básico o intermedio de JavaScript. Después de trabajar a través de este tutorial deberías de ser capaz de construir tus propios juegos Web simples.

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

Detalles de las lecciones

Todas las lecciones — y las diferentes versiones del famoso juego MDN que estamos construyendo juntos — estan disponibles en GitHub:

  1. Crea el lienzo (canvas) y dibuja en él
  2. Mueve la bola
  3. Rebota en la pared
  4. Control de la pala y el teclado
  5. Fin del juego
  6. Construye el grupo de bloques
  7. Detección de colisiones
  8. Cuenta los puntos y gana
  9. Controles del ratón
  10. Finalizando

Empezar con puro javascript es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier framework que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero  sobre el mismo lenguaje para saber exactamente que es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como tu esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en Javascript puro.

Nota: Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una librería de juegos, consulta esta serie homóloga, famosos juegos 2D usando Phaser.

Nota:  Esta serie de artículos puedes usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenido canvas Gamedev  basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.

Siguientes pasos

Vale, ¡vamos a empezar! Apunta hacia el primer tema — Crea el lienzo (canvas) y dibuja en él.

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: emolinerom, jolosan
 Última actualización por: emolinerom,