Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreDesarrolla juegos HTML5 con canvas
Desarrolla juegos HTML5 con canvas
Aprende a manejar imágenes, procesar texto y dibujar con el CANVAS de HTML5
Highest Rated
Created byFrancisco Javier Arce Anguiano
Last updated 5/2023
Spanish
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
Explore related topics
Course content
24 sections • 230 lectures • 30h 50m total length
- Bienvenida al curso3:45
Bienvenido al curso. Me puedes contactar en fj_arce@yahoo.com.mx
- Antes de empezar el curso10:44
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!
- Introducción al canvas9:57
En este video estableceremos las etiquetas y los parámetros para manejar el CANVAS de HTML5
- El relleno y el contorno en una figura del canvas7:30
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.
- Crear lineas en el canvas7:37
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.
- Propiedades de las líneas en canvas6:53
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.
- Estados del Canvas5:23
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.
- Dibuja trazos o paths en canvas6:38
Las líneas dentro de Canvas de HTML5 tienen ciertas propiedades que nos pueden ser de utilidad, como lineCap y lineJoin
- Dibujar arcos en Canvas7:12
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.
- Curvas Bezier Cuadráticas7:42
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.
- Curvas Bezier cúbicas5:38
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.
- Líneas en zigzag8:15
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.
- Líneas en espiral10:39
Las curvas bezier cúbicas constan de cuatro puntos: el inicial, el final y dos puntos de control, ancla o tangentes.
- Dibujar una estrella10:24
- Dibujar un engrane, primera parte9:17
- Dibujar un engrane, segunda parte8:43
- Crear un rectángulo con esquinas redondeadas utilizando cuevas bezier12:32
- Quiz: Introducción a Canvas
- Retroalimentacion a la sección 10:07
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Gradientes lineales7:16
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.
- Dirección de gradientes lineales5:33
Por medio del canvas podemos crear gradientes de diferentes direcciones, incluso en forma diagonal y calcular el tamaño que ocupará el gradiente.
- Gradientes radiales7:09
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.
- Manejo de patrones en canvas7:34
También podemos generar nuestros propios patrones y cargar ya sea el contorno o el relleno de una figura con ellos.
- Manejo de imágenes en Canvas4:50
- Aplicar un filtro a la imagen9:58
- Manejo de texto en Canvas6:21
- Manejo de eventos en Canvas15:36
Desde el canvas podemos utilizar los eventos de JavaScript como:
onmousemove()
onmousedown()
onmouseup()
- Dibujar una flor con curvas bezier13:54
- Dibujar una flor con mousedown9:43
- Dibujar con el ratón11:13
- Controles para los parámetros de dibujo9:18
- Retroalimentación seccion 20:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Gradientes, patrones e imágenes
- Creación de un grid12:45
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.
- Dibujar los dos ejes en el grid10:33
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 ejes en un grid, segunda parte12:39
En esta segunda parte finalizaremos los ejes.
- Finalizar los ejes y organizar el código12:54
En este video veremos como colocar los palitos de los ejer y reorganizaremos el código.
- Eventos del ratón dentro del canvas7:19
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.
- Ajustar las coordenadas del ratón en el canvas10:16
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.
- Dibujar una línea en forma dinámica con los eventos del ratón12:17
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 en forma continua con el apuntador del ratón6:18
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.
- Controles para el programa de dibujo11:20
Finalmente añadiremos los controles para el programa de dibujo seleccione colores, anchos de línea y que el usuario pueda limpiar el dibujo.
- Retroalimentación sección 30:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Cargar una imagen en el canvas14:00
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.
- Aplicar filtros a la imagen12:16
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.
- Hacer un flip de la imagen9:35
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 filtro de color11:31
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.
- Modificar el canal alfa8:10
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.
- Recortar una imagen11:03
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.
- Pixelado de una imagen13:38
Utilizaremos la función setInterval() para ejecutar cada n-milisegundos el proceso de pixelado.
Tomamos un pixel y lo replicamos en un cuadro nxn.
Repetimos el proceso hasta que n=1.
- Retroalimentación sección 40:06
- Manejo de texto9:11
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.
- Gradiente en textos y contornos6:22
Dentro de textos y contornos podemos añadir patrones regulares que podemos repetir, muy similar como lo hacemos en HTML tradicional.
- Patrones en textos y contornos7:34
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.
- Propiedades de los textos9:37
Los textos tienen muchoas proiedades, al igual que en HTML. En este video veremos las principales propiedades de los mismos.
- Alineación de texto9:18
Con el CANVAS podremos alinear el texto en una línea o curva que generemos, haciendo texto más vistoso.
- Texto alineado a un arco12:08
Por medio de un algoritmo muy sencillo, podemos hacer que un texto siga una línea curva.
- Revisar la animación final con Canvas4:23
Por medio del CANVAS de HTML5 podemos animar objetos, tal como lo hacemos con Flash (snif, snif), pero nosotros nos debemos encargar de borrar y volver a dibujar las figuras. No resulta tan complicado, como se verá en las siguientes vídeos.
- Animación de una pelotita con Canvas10:54
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 pelotita9:27
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.
- Detectar las colisiones en el eje X12:48
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.
- Terminar la animación básica con canvas7:37
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.
- Revisar el juego de memoria terminado4:59
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.
- Crear el objeto JavaScript para almacenar la información del juego10:45
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.
- Pintamos el tablero del juego8:17
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.
- Barajar las cartas del juego de memoria10:19
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.
- Ajustar las coordenadas del canvas8:31
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.
- Detectar la carta seleccionada con el apuntador del ratón9:40
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.
- Seleccionar la primer carta del juego de memoria12:53
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.
- Selecciona la segunda carta del juego de memoria8:26
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 memoria8:46
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”
- Crear un contador en el juego y finalizarlo12:02
Para terminar esta parte del juego, crearemos un contador de cartas pares encontradas, con lo cual sabremos cuando el juego ha terminado.
- Revisar el juego de memoria con imágenes4:12
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.
- Crear el arreglo múltiple de JavaScript para las imágenes14:07
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.
- Leer los datos de las cartas por medio del File API14:21
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.
- Modificar el código para adaptarlo a un arreglo de una dimensión10:31
Modificar el código para adaptarlo a un arreglo de una dimensión
- Revisar el juego de ahorcado terminado3:46
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.
- Las variables y objetos para el juego de ahorcado7:08
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.
- Crear el tablero QWERTY para el juego14: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.
- Desplegar la palabra letra por letra en el canvas8:11
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.
- Colocar el cadalso del ahorcado en el canvas11:04
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.
- Detectar la tecla seleccionada por el usuario8:03
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.
- Verificar le fin del juego: Game Over12:52
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.
- Revisar el juego del "gato" terminado5:45
Otro juego clásico es de jugar al "gato" (tiene nombres diferentes el juego, dependiendo el país) entre la computadora y un jugador.
- La lógica del juego8:58
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.
- La estructura de datos y las variables del juego9:09
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.
- Dibujar la grilla del juego y las fichas en el arreglo7:17
En este video crearemos la grilla para el juego del "gato" y los objetos para crear las fichas del mismo.
- Crear la función para escribir mensajes en el canvas6:57
En este video crearemos una función para poder mandar mensajes al programa dentro del canvas.
- Seleccionar la ficha por el usuario para iniciar la partida8:04
Seleccionar la ficha por el usuario para iniciar la partida
- Pintar la ficha que seleccionó el jugador en el tablero5:14
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.
- Iniciar la función que seleccionará la jugada de la máquina8:00
Iniciar la función que seleccionará la jugada de la máquina
- Hacer la función que verifica los pesos en los renglones6:53
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.
- Calcular el peso de las fichas para la jugada de la computadora7:27
En este video determinaremos el algoritmo para seleccionar la ficha con mayor peso y decidir la jugada de la computadora.
- Escribir las funciones de soporte al cálculo de los pesos5:04
En este video escribiremos las funciones necesarias para determinar el peso de cada una de las celdas.
- Verificar el peso por diagonales8:57
En este video verificaremos nuestro código por medio de sus salidas a la consola del navegador.
- Game Over: terminal el juego5:28
Ahora verificaremos las columnas de cada una de las casillas con el mismo criterio: encontrar la ficha con l¡mayor peso.
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