En la WEB podemos escontrar un tutorial de como realizar paso a paso un simple pero funcional juego 2D utilizando el elemento Canvas de HTML y Javascript.
Podemos realizar el tutorial independientemente del nivel que tengamos en los lenguajes HTML y JAVASCRIPT ya que en cada lección (Hay 10) nos muestran el código que tenemos que ir añadiendo a nuestro archivo de forma secuencial e imediatamente después de mostrarnos el código que debemos añadir nos explica su función y la lógica detrás de él, aunque lo recomendable es tener un nivel básico-intermedio para poder entenderlo en totalidad y realizar las modificaciones opcionales. También comentar que lo ideal es ir razonando nosotros el código a la vez que lo escribimos y asegurarnos que entendemos lo que escribimos no sólo «copiarlo y pegarlo».
Un detalle a destacar y que me ha gustado mucho es que al final de cada lección nos dan el código de dicho apartado para compararlo con el nuestro u además propone una modificación alternativa a cierta parte del código, la cual no tiene código accesible (pero que es muy sencilla de realizar), lo que resulta en que tengamos que crear esa parte sin ayuda para así aprender aún más. Entre los recursos del tutorial se incluyen las anteriormente mencionadas partes de código de cada lección, el código del juego en su totalidad y el juego funcional alojado en un servido externo, aparte de enlaces a otros tutoriales.
Foto del juego:
URLs:
Web del tutorial: https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript
Juego funcional: http://breakout.enclavegames.com/lesson10.html