En esta sexta clase, veremos cómo podemos utilizar esta nueva etiqueta para el desarrollo de un videojuego 2D, únicamente utilizando HTML5 y JavaScript.
Antes de aparecer HTML5, muchas aplicaciones online tenían que usar Flash Player, ya sea para realizar juegos, aplicaciones más potentes, acceder a la webcam, micrófono, etc.
Además de todas las funciones especiales (como acceso a webcam/micrófono), lo que realmente tenía Flash Player, era un tapiz donde pintar, es decir, un canvas. Y justamente por ello, HTML5 incorporó una nueva etiqueta llamada <canvas>.
Para ello, lo primero que debemos de conseguir, será un sprite (imagen de un personaje con diferentes movimientos) y un fondo largo una vez lo tengamos. ¡Empecemos!
Como veis, gracias a <canvas> hemos podido desarrollar un mini-juego donde el personaje (un ninja) se mueve hacia diferentes lados de un bosque.
Ahora sólo nos queda una cosa ¡Seguir con el juego! Mejorarlo, crearle más funciones, por ejemplo ¡Que el personaje salte!
Recordad que podéis mandar dudas sobre el curso a través del formulario de soporte de la Intranet de suscriptor. ¡Nos vemos en la siguiente lección, con más JavaScript! :)
Todos los capítulos de este curso:
- Curso de JavaScript para HTML5 #1. Introducción
- Curso de JavaScript para HTML5 #2. Formularios
- Curso de JavaScript para HTML5 #3. Librería de formularios
- Curso de JavaScript para HTML5 #4. Reproductor audio
- Curso de JavaScript para HTML5 #5. Reproductor vídeo
- Curso de JavaScript para HTML5 #6. Canvas. Empezando un videojuego
- Curso de JavaScript para HTML5 #7. localStorage
- Curso de JavaScript para HTML5 #8. Geoposición
- Curso de JavaScript para HTML5 #9. Micrófono
- Curso de JavaScript para HTML5 #10. Webcam