Desarrolla juegos HTML5 con canvas

Aprende a manejar imágenes, procesar texto y dibujar con el CANVAS de HTML5
4.6 (15 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.
257 students enrolled
$20
Take This Course
  • Lectures 171
  • Contents Video: 21.5 hours
    Other: 0 mins
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2013 Spanish

Course 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.

What are the requirements?

  • Tener conocimientos básicos de JavaScript y de HTML5

What am I going to get from this course?

  • Aprender a manejar el canvas de HTML5 a profundidad

What is the target audience?

  • Diseñadores y desarrolladores Web

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

03:45

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

Section 1: Introducción al canvas en HTML5: gráficos
05:45

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

05:13

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.

04:18

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.

08:21

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.

07:05

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.

05:29

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

06:17

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.

06:30

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.

06:26

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.

05:16

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.

05:31

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

Section 2: Crear gradientes y patrones de imágenes con canvas de HTML5
07:08

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.

08:24

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

07:46

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.

05:34

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

05:54

Con el canvas podremos crear sombras a objetos y textos.

Section 3: Crear una sencilla aplicación de dibujo con canvas
09:59

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.

09:37

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.

12:39

En esta segunda parte finalizaremos los ejes.

07:07

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

06:05

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.

10:39

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.

08:26

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

06:48

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.

09:58

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

Section 4: Manejo de imágenes con canvas HTML5
07: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.

09:03

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.

05:25

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.

05:58

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.

10:00

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.

09:34

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.

07:08

Haremos un combo box para seleccionar la imagen y procesarlo.

08:00

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

07:30

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.

09:22

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.

Section 5: Manejo de Texto con CANVAS HTML5
06:22

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.

05:26

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

07:06

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.

06:11

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

06:26

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

11:30

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

Section 6: Animación con CANVAS HTML5
01:46

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.

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.

06:38

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.

11:51

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.

07:35

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.

Section 7: CANVAS: crear un juego de memoria
03:09

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.

09:26

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.

11:27

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.

06:33

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.

07:44

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.

08:22

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.

11:21

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.

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”

08:36

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”

10:36

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

Section 8: Crear un juego de memoria con imágenes
01:45

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.

09:55

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.

09:54

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.

Section 9: Crear un juego de ahorcado
03:19

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.

09:38

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.

13:34

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.

09:02

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.

04:36

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.

09:59

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.

07:27

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.

08:28

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.

Section 10: Crear un juego de "gato" con el canvas de HTML5
03:13

Otro juego clásico es de jugar al "gato" (tiene nombres diferentes el juego, dependiendo el país) entre la computadora y un jugador.

07:20

Este juego tiene más código que los anteriores, por lo que necesitamos platicar la lógica, antes de aventurarnos a escribir el código.

08:39

Al igual que otros ejercicios que hemos desarrollado, utilizaremos un objeto de tipo JavaScript para las fichas, y un arreglo para contener todos los elementos del juego. Crearemos las variables globales antes de dibujar la grilla del gato.

09:12

En este video crearemos la grilla para el juego del "gato" y los objetos para crear las fichas del mismo.

05:02

En este video crearemos una función para poder mandar mensajes al programa dentro del canvas.

12:40

Seleccionar la ficha por el usuario para iniciar la partida

06:28

Una vez que sabemos la casilla que fue seleccionada en el tablero del “gato”, tenemos que pintar la “x” en ella y marcar su valor con el valor correspondiente.

09:10

Iniciar la función que seleccionará la jugada de la máquina

09:56

Dentro de nuestro algoritmo de pesos, verificaremos ahora los renglones de la cuadrícula del "gato" para irlo sumando a los pesos totales por cada casilla.

08:41

En este video determinaremos el algoritmo para seleccionar la ficha con mayor peso y decidir la jugada de la computadora.

05:50

En este video escribiremos las funciones necesarias para determinar el peso de cada una de las celdas.

07:20

En este video verificaremos nuestro código por medio de sus salidas a la consola del navegador.

07:04

Ahora verificaremos las columnas de cada una de las casillas con el mismo criterio: encontrar la ficha con l¡mayor peso.

09:36

En este video verificaremos las dos diagonales para tener ya los tres caminos: columnas, renglones y diagonales y determinar cuál es la mejor jugada para la máquina.

08:42

Una vez que recorrimos la grilla del "gato" en todas direcciones, nos será muy sencillo seleccionar cuál de las casillas debemos de seleccionar: la que tenga mayor peso.

Game Over: terminal el juego
02:30
Section 11: Crear un juego de minas con Canvas-HTML5
02:50

Un juego que podemos implementar con el Canvas es el clásico juego de Busca Minas que tanto se juega en las PC. Esta aplicación se caracteriza por usar funciones repulsivas, es decir, una función que se llama a si misma varias veces.

04:59

En este video veremos los principales puntos del desarrollo del juego de Busca Minas que serán cubiertos en los siguientes lecciones.

08:04

En este video escribiremos las variables que nos servirán para controlar el juego. Con mayúsculas escribiremos aquellas variables que nos servirán para suplir los "número básicos" y con la notación camelCase aquellas variables que nos servirán para controlar los datos del juego.

08:28

Los objetos del juego serán fundamentales , sobre todo aquel con el que controlamos las celdas. También utilizaremos un objeto como “botón”, aunque es perfectamente posible, como lo hemos hecho en otras aplicaciones, el de intercambiar la información del canvas con los botones de HTML.

07:54

Ya con las variables y objetos creados, nos será muy sencillo crear la cuadrícula para el juego. También poblaremos al arreglo que contendrá a todos los objetos de tipo celda y nos permitirá manipular fácilmente las jugadas del usuario.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, 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.

Ready to start learning?
Take This Course