Desarrolla juegos HTML5 con canvas
4.5 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
302 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Desarrolla juegos HTML5 con canvas to your Wishlist.

Add to Wishlist

Desarrolla juegos HTML5 con canvas

Aprende a manejar imágenes, procesar texto y dibujar con el CANVAS de HTML5
4.5 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
302 students enrolled
Last updated 11/2015
Spanish
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 21.5 hours on-demand video
  • 1 Article
  • 16 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Diseñadores y desarrolladores Web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
171 Lectures
21:15:29
+
Bienvenida al curso
1 Lecture 03:45

Bienvenido al curso. Me puedes contactar en fj_arce@yahoo.com.mx

Preview 03:45
+
Introducción al canvas en HTML5: gráficos
11 Lectures 01:06:11

En este video estableceremos las etiquetas y los parámetros para manejar el CANVAS de HTML5

Preview 05:45

Un punto muy importante es verificar si el navegador soporta el HTML5 y por lo tanto el canvas, ya que no todos los navegadores, ni todas las versiones lo hacen.

Verificación del canvas
05:13

Elcontexto es la variable con la que manipularemos al canvas. Puede ser 2d o 3d, aunque la especificación de esta última aún no existe.

El contexto en canvas
04:18

Uno de los conceptos fundamentales cuando dibujamos en el CANVAS de HTML5 es el relleno (fill) y el contorno (Stroke), los cuales son muy similares a otros paquetes como Flash e Illustrator.

Crear rectángulos con Canvas
08:21

La forma más sencilla para dibujar es la línea. Tendremos que mover primero las coordenadas y luego indicarle al API de dibujo, en qué coordenada deseamos terminar la línea.

Crear líneas en canvas
07:05

Las líneas dentro de Canvas de HTML5 tienen ciertas propiedades que nos pueden ser de utilidad, como lineCap y lineJoin

Las propiedades de las líneas en Canvas HTML5
05:29

Podemos almacenar, al igual que las calculadoras muy sencillas, una memoria con los colores que estamos utilizando. Si llegamos a cambiarlos, podemos "restaurarlos" en forma muy sencilla, volviendolos a llamar.

Estados en canvas
06:17

Otra forma de dibujar en el canvas de HTML5, es por medio de los arcos y de unir varias líneas, lo cual lo llamaremos un "camino" o path.

Hacer trazos con líneas con Canvas HTML5
06:30

Al menos al crear este video, canvas no tiene una instrucción para crear círculos, pero podemos realizar arcos, y con él podremos hacer círculos.

Crear arcos y círculos con Canvas HTML5
06:26

A parte de hacer arcos, podemos dibujar curvas bezier y curvas bezier cuadráticas, ya sean de tres puntos o de cuatro. En este video mostraremos cómo dibujar curvas a base de coordenadas.

Curvas Bézier cuadráticas en canvas HTML5
05:16

Las curvas bezier cúbicas constan de cuatro puntos: el inicial, el final y dos puntos de control, ancla o tangentes.

Curvas Bézier cúbicas en Canvas HTML5
05:31
+
Crear gradientes y patrones de imágenes con canvas de HTML5
5 Lectures 34:46

Un aspecto muy importante en el diseño con canvas será el manejo de sus gradientes, ya que podemos realizarlos con diferentes olores y direcciones, así como en forma lineal y radial.

Gradientes lineales
07:08

Por medio del canvas podemos crear gradientes de diferentes direcciones, incluso en forma diagonal y calcular el tamaño que ocupará el gradiente.

Dirección de gradientes lineales
08:24

El canvas de HTML5 nos permitirá realizar gradientes en forma radiales, ya sea de dos o ás colores y manejar la ubicación de los radios, asi como su amplitud, de tal manera que podremos realizar gradientes muy complejos.

Gradientes radiales
07:46

También podemos generar nuestros propios patrones y cargar ya sea el contorno o el relleno de una figura con ellos.

Manejo de patrones en canvas
05:34

Con el canvas podremos crear sombras a objetos y textos.

Preview 05:54
+
Crear una sencilla aplicación de dibujo con canvas
9 Lectures 01:21:18

Un grid es una cuadrícula que nos permitirá dibujar de forma más precisa y que nuestro susario visualice los objetos de forma más precisa, por ejemplo, en una gráfica.

Preview 09:59

Una vez que tenemos nuestros grid, por lo general deberemos añadir un par de ejes, sobretodo si queremos dibujar una gráfica o alguna otra información numérica.

Dibujar los dos ejes en el grid
09:37

En esta segunda parte finalizaremos los ejes.

Dibujar ejes en un grid, segunda parte
12:39

En este video veremos como colocar los palitos de los ejer y reorganizaremos el código.

Finalizar los ejes y organizar el código
07:07

El manejo de eventos es fundamental para cualquier aplicación. Aqui veremos cómo detectar los eventos del ratón y utilizarlos para dibujar en el canvas.

Eventos del ratón dentro del canvas
06:05

Como veremos en este video, las coordenadas que nos da el navegador para el ratón son coordenadas absolutas y no relativas al Canvas, or lo que es necesario ajustarlas... bueno, nada es perfecto, pero solucionarlo es verdaderamente sencillo.

Ajustar las coordenadas del ratón en el canvas
10:39

Una vez que tenemos las coordenadas adecuadas de los eventos del ratón, dibujar una línea en el CANVAS nos será muy sencillo.

Dibujar una línea en forma dinámica con los eventos del ratón
08:26

Una vez que tenemos una línea, tendremos que dibujar, constantemente una línea. para que se dibuje el trazo. Finalmente un trazo no es mas que una secuencia de pequeñas líneas.

DIbujar en forma continua con el apuntador del ratón
06:48

Finalmente añadiremos los controles para el programa de dibujo seleccione colores, anchos de línea y que el usuario pueda limpiar el dibujo.

Controles para el programa de dibujo
09:58
+
Manejo de imágenes con canvas HTML5
10 Lectures 01:19:08

Otra de las peculiaridades del canvas de HTML5 es que podemos vaciar imágnes de archivos externos, como jpg, gif o png y tratarlas pixel por pixel para hacer muchas funciones como filtros, alfas, distorsiones, etc.

Preview 07:08

Uno de los filtros más utilizados es el de aclarar y oscurecer una imagen. Una vez que cargamos toda la imagen en un arreglo, manipularla resultará muy sencillo.

Manipular los pixeles de una imagen
09:03

En este video veremos un filtro clásico de convertir una imagen a su negativo manipulando cada uno de los cuatro canales de cada uno de los pixeles.

Aplicar el filtro Negativo
05:25

Para realizar un filtro en tonos grises, mejor conocido como Blanco y Negro, deberemos sacar un promedio de los tres canales de color y asignarle el promedio... eso nos dará un tono de gris.

Aplicar filtros: blanco y negro y Alfa
05:58

Otra modificación mul utilizada en los programas de manipulación de imágenes es darle un "flip", es decir, invertirla. En este video haremos un flip horizontal con un poco de matemáticas.

Aplicar un Flip horizontal
10:00

Igual que en las cámaras fotográficas, podemos aplicar filtros de color a nuestras fotografías. Bastará con manipular los tres canales de color: Rojo, verde y azul, y tendremos una nueva imagen.

Aplicar filtros de color
09:34

Haremos un combo box para seleccionar la imagen y procesarlo.

Seleccionar una imagen
07:08

Para poder seleccionar un color de filtro, haremos un combo box con los nombres de los diferentes filtros vistos en la sección.

Seleccionar un filtro
08:00

Igualmente utilizaremos un combo box para que el usuario pueda seleccionar entre diversos colores de filtro, y los aplicaremos con nuestro algoritmo, ejecutándolo con un poco de JavaScript.

Seleccionar un filtro de color
07:30

Para terminar nuestra pequeña aplicación añadiremos un combo para manejar las cantidades fijas del alfa y un botón que nos servirá para limpiar el canvas y volver a comenzar.

Preview 09:22
+
Manejo de Texto con CANVAS HTML5
6 Lectures 43:01

Otra característica muy importante del CANVAS en HTML5 es que podemos escribir en él, pero las letras serán mapas de bits que se mezclan con los diferentes elementos del CANVAS.

Preview 06:22

Dentro de textos y contornos podemos añadir patrones regulares que podemos repetir, muy similar como lo hacemos en HTML tradicional.

Gradiente en textos y contornos
05:26

Dentro del texto y de los contornos de los objetos, podemos añadir patrones que importemos de archivos, muy similar a lo qu hacemos en HTML tradicional.

Patrones en textos y contornos
07:06

Los textos tienen muchoas proiedades, al igual que en HTML. En este video veremos las principales propiedades de los mismos.

Propiedades de los textos
06:11

Con el CANVAS podremos alinear el texto en una línea o curva que generemos, haciendo texto más vistoso.

Alineación de texto
06:26

Por medio de un algoritmo muy sencillo, podemos hacer que un texto siga una línea curva.

Texto alineado a un arco
11:30
+
Animación con CANVAS HTML5
5 Lectures 35:48

Por medio del CANVAS de HTML5 podemos animar objetos, tal como lo hacemos con Flash (snif, snif), peo nosotros nos debemos encargar de borrar y volver a dibujar las figuras. No resulta tan complicado, como se verá en las siguientes vídeos.

Preview 01:46

Para que la pelota se mueva necesitamos un “motor”, el cual nos lo proporcionará JavaScript. Para ello utilizaremos la función setInterval, que es de uso general, pero nos servirá para hacer animaciones básicas.

Animación de una pelotita con Canvas
07:58

Para que la pelota se mueva necesitamos un “motor”, el cual nos lo proporcionará JavaScript. Para ello utilizaremos la función setInterval, que es de uso general, pero nos servirá para hacer animaciones básicas.

Borrar y re-dibujar la pelotita
06:38

Las colisiones son fundamentales para cualquier animación. Para ello utilizaremos un viejo truco que es primero calcular la nueva posición y luego la verificamos. También determinaremos los límites del movimiento izquierdo y derecho.

Detectar las colisiones en el eje X
11:51

El proceso de animar en el eje de las “yes” es similar al de las “equis”. Calculamos los límites de arriba y abajo, calculamos la nueva dirección y ajustamos. Con ello tendríamos una animación sencilla por medio del canvas de HTML5.

Terminar la animación básica con canvas
07:35
+
CANVAS: crear un juego de memoria
10 Lectures 01:22:11

Un juego muy pedagógico, y que tiene muchas variaciones es el de memoria. En esta unidad haremos una primera versión utilizando el CANVAS de HTML5.

Preview 03:09

Para almacenar la información de las cartas, utilizaremos un objeto de JavaScript. Ahi almacenaremos las coordenadas de la carta, el valor del número, así como una función muy sencilla para dibujar la misma.

Crear el objeto JavaScript para almacenar la información del juego
09:26

Por medio del objeto carta, y algunas coordenadas iniciales, pintaremos en el canvas las cartas del juego, así como crear el arreglo donde almacenaremos la referencia de los objetos, con lo cual crearemos la lógica del juego de Memoria.

Pintamos el tablero del juego
11:27

Ahora que ya tenemos creadas las cartas en el tablero, tenemos que barajarlas ya que de momento, tienen el orden de origen, lo cual no es divertido como juego. Utilizaremos un algoritmo sencillo de intercambio de valores.

Barajar las cartas del juego de memoria
06:33

El único evento que podemos utilizar, ya que canvas no maneja objetos, es cuando el usuario hace clic sobre el canvas. A estas coordanas necesitamos ajustarlas, ya que están consideradas como el punto origina, la esquina superior izquierda del navegados, no del canvas.

Ajustar las coordenadas del canvas
07:44

Ya con las coordenadas ajustadas, nos bastará con recorrer todas las cartas (que las tenemos en el arreglo) y determinar en cuál de ellas se encuentra el punto con una simple sentencia condicional. A partir de ahi, nuestro algoritmo es el mismo que utilizamos en otros paquetes, como Flash o jQuerys.

Detectar la carta seleccionada con el apuntador del ratón
08:22

Una vez que ya sabemos la carta que fue seleccionada por el usuario, tenemos que proceder a “voltearla”, es decir, pintarla de un color diferente y dibujar el número en ella. Utilizaremos una variable booleana para determinar si es la primer selección del usuario.

Seleccionar la primer carta del juego de memoria
11:21

El proceso de selección de la segunda carta es muy similar al de la primera, solo que después de seleccionar las cartas, debemos de “voltearlas” antes que decidir si las dos cartas son “iguales”

Selecciona la segunda carta del juego de memoria
04:57

El proceso de selección de la segunda carta es muy similar al de la primera, solo que después de seleccionar las cartas, debemos de “voltearlas” antes que decidir si las dos cartas son “iguales”

Comparar las cartas seleccionadas en la mano del juego de memoria
08:36

Para terminar esta parte del juego, crearemos un contador de cartas pares encontradas, con lo cual sabremos cuando el juego ha terminado.

Crear un contador en el juego y finalizarlo
10:36
+
Crear un juego de memoria con imágenes
3 Lectures 21:34

Una vez que tenemos el juego de memoria con números nos será muy sencillo el hacer variaciones sobre el mismo tema... en este caso haremos un juego de memoria con imágenes.

Preview 01:45

Los últimos ajustes serán al momento de barajar las imágenes y de terminar el juego. Con esto damos por concluida la sección de crear juegos de memoria con CANVAS-HTML 5.

Crear el arreglo múltiple de JavaScript para las imágenes
09:55

Para concluir el juego, debemos de modificar la información que intercambiamos al azar y verificar la fora en que concluimos el juego. Con ello damos por finalizado la sección de desarrollo de un juego de memoria con el canvas de HTML5.

Concluir el juego de memoria con imágenes
09:54
+
Crear un juego de ahorcado
8 Lectures 01:06:03

Una vez que sabemos los “objetos” que se seleccionan el el canvas, nos será muy fácil hacer otros juegos, como el clásico juego de ahorcados.

Preview 03:19

Para realizar este juego, utilizaremos dos objetos: uno para la tecla y otra para la letra de la palabra. Para cada uno de los objetos necesitamos un arreglo y un arreglo para las palabras que se buscarán en el juego.

Las variables y objetos para el juego de ahorcado
09:38

En este video crearemos un pequeño teclado del tipo QWERTY con el cual el usuario podrá seleccionar la tecla por medio del apuntador del ratón.

Crear el tablero QWERTY para el juego
13:34

Tomando el mismo esquema que en videos anteriores, haremos objetos para cada una de las letras de la palabra a encontrar y la desplegaremos en el canvas. Posteriormente, al ser encontrada la letra, la desplegaremos en la misma.

Desplegar la palabra letra por letra en el canvas
09:02

El cadalso, y las diferentes partes del ahorcado son piezas fundamentales en el juego. En este caso, haremos la carga de imágenes png con transparencia para simplificar su manejo.

Colocar el cadalso del ahorcado en el canvas
04:36

Utilizando el método de los objetos, y de sus coordenadas, determinaremos si el punto pulsado sobre el canvas se encuentra dentro del mismo, ya que como tal, no contamos con “objetos”, como en otros paquetes como Flash.

Detectar la tecla seleccionada por el usuario
09:59

Ya una vez que sabemos la letra seleccionada por el usuario tendremos que analizar la palabra letra por letra, y de coincidir, dibujamos la letra. Si la palabra no contiene la letra, incrementaremos la variable de errores y aumentaremos una pieza al ahorcado.

Empatar la tecla seleccionada con la palabra
07:27

Por último, borraremos la tecla seleccionada y verificaremos si el jugador completó la palabra o si completó al ahorcado. De ser asi, lo mandaremos a la función gameOver para finalizar´el juego.

Verificar le fin del juego: Game Over
08:28
9 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
977 Reviews
12,840 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. 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.