Desarrolla juegos HTML5 con canvas
What you'll learn
- El alumno aplicará las propiedades y métodos básicos del Canvas de HTML5
- Crear gradientes lineales y radiales, así como cargar imágenes para utilizarlas como patrones en círculos, rectángulos, etc.
- Aplicar sus conocimientos fundamentales para dibujar con el ratón sobre el canvas
- Cargará sobre el canvas un archivo externo y aplicará diferentes filtros, como blanco y negro, filtros de color, un flip horizontal, entre otros.
- Desplegará enunciados en el canvas, así como cambiar las propiedades y aplicar ciertos efectos visuales
- Comprenderá los principios básicos de la animación en canvas y realizará la animación clásica de una pelotita
- Realizará un juego de memoria simulando cartas
- Utilizar el juego previo de memoria y utilizar imágenes
- Aplicar sus conocimientos básicos para crear un juego de ahorcados para encontrar una palabra secreta
- Por medio de un algoritmo de valoraciones de pesos de las diferentes jugadas, realizará con canvas un sencillo juego de "gato" o "tres en línea"
- Crear un juego de tipo "Simón" donde el usuario deberá repetir una secuencia sonora y visual
- Generaremos una secuencia de colores aleatoria y el usuario deberá deducirla por las pistas qye le vayamos dando en 10 oportunidades
- Hacer un juego clásico de cajita de números con Canvas
- Utilizando el algoritmo de la cajita de números para hacer un rompecabezas tomando una imagen
- Crear un juego de Space Invaders con animaciones, disparos y detección de colisiones
- Mover un objeto con respecto al apuntador del ratón, mover objetos hacia el centro y hacer disparos angulados
Course content
- Preview03:45
- Preview05:45
- 05:13Verificación del canvas
- 04:18El contexto en canvas
- 08:21Crear rectángulos con Canvas
- 07:05Crear líneas en canvas
- 05:29Las propiedades de las líneas en Canvas HTML5
- 06:17Estados en canvas
- 06:30Hacer trazos con líneas con Canvas HTML5
- 06:26Crear arcos y círculos con Canvas HTML5
- 05:16Curvas Bézier cuadráticas en canvas HTML5
- 05:31Curvas Bézier cúbicas en Canvas HTML5
- 5 questionsQuiz: Introducción a Canvas
Requirements
- Tener conocimientos básicos de JavaScript y de HTML5
Description
El CANVAS de HTML5 es una poderosa herramienta que nos permitirá, entre otras cosas, procesar imágenes, crear filtros, manejar textos, dibujar, realizar animaciones, todo por medio del lenguaje JavaScript. Con el canvas de HTML5, tus aplicaciones se podrán visualizar en cualquier dispositivo móvil, incluso en el iPhone y iPad!
Aprenderemos desde hacer una etiqueta muy básica, hacer líneas, rectángulos y curvas Bézier, tanto cúbicas como cuadráticas, arcos y círculos. Revisaremos la forma de hacer gradientes lineales y radiales, cargar patrones de imágenes y hacer sombras.
Antes de hacer juegos, realizaremos una aplicación para dibujar en canvas y otra para cargar imágenes y aplicar filtros y efectos como el flip horizontal.
Who this course is for:
- Diseñadores y desarrolladores Web
Instructor
![Francisco Javier Arce Anguiano](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.5 Instructor Rating
- 7,509 Reviews
- 98,690 Students
- 62 Courses
Soy licenciado en Matemáticas Aplicadas y Computación por parte de la Universidad Nacional Autónoma de México, instructor certificado de Adobe desde 2002.
He trabajado para diferentes centros autorizados de Adobe en México y doy clases en universidades de la Ciudad de México. Asimismo, he publicados siete libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de México, asi como un libro de desarrollo de juegos con ActionScript con la misma editorial.
He desarrollado aplicaciones para Android y iPhone. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología.
También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.