Desarrolla juegos HTML5 con canvas

Virtual

Precio a consultar
  • Tipología

    Curso

  • Metodología

    Virtual

  • Duración

    Flexible

  • Inicio

    Fechas a escoger

Descripción

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.

Instalaciones y fechas

Ubicación

Inicio

Virtual

Inicio

Fechas a escogerMatrícula abierta

A tener en cuenta

Una vez que solicites información por medio del catálogo de Emagister.com el centro se pondrá en contacto contigo para informarte del proceso de matriculación.

Preguntas & Respuestas

Plantea tus dudas y otros usuarios podrán responderte

¿Quién quieres que te responda?

Sólo publicaremos tu nombre y pregunta

¿Qué aprendes en este curso?

  • Javascript
  • Juegos
  • Verificación del canvas
  • Estados en canvas
  • Curvas Bézier cuadráticas en canvas HTML5
  • Gradientes radiales
  • Dibujar los dos ejes en el grid
  • Eventos del ratón dentro del canvas
  • Aplicar el filtro Negativo
  • Patrones en textos y contornos

Profesores

Francisco Javier  Arce Anguiano

Francisco Javier Arce Anguiano

Profesor

Programa académico

Introducción al canvas en HTML5: gráficos

  • Previsualización Introducción al canvas
  • Verificación del canvas
  • El contexto en canvas
  • Crear rectángulos con Canvas
  • Crear líneas en canvas
  • Las propiedades de las líneas en Canvas HTML5
  • Estados en canvas
  • Hacer trazos con líneas con Canvas HTML5
  • Crear arcos y círculos con Canvas HTML5
  • Curvas Bézier cuadráticas en canvas HTML5
  • Curvas Bézier cúbicas en Canvas HTML5

Crear gradientes y patrones de imágenes con canvas de HTML5

  • Gradientes lineales
  • Dirección de gradientes lineales
  • Gradientes radiales
  • Manejo de patrones en canvas
  • Sombras en objetos y textos

Crear una sencilla aplicación de dibujo con canvas

  • Previsualización Creación de un grid
  • Dibujar los dos ejes en el grid
  • Dibujar ejes en un grid, segunda parte
  • Finalizar los ejes y organizar el código
  • Eventos del ratón dentro del canvas
  • Ajustar las coordenadas del ratón en el canvas
  • Dibujar una línea en forma dinámica con los eventos del ratón
  • Dibujar en forma continua con el apuntador del ratón
  • Controles para el programa de dibujo

Manejo de imágenes con canvas HTML5

  • Previsualización Cargar una imagen en el canvas
  • Manipular los pixeles de una imagen
  • Aplicar el filtro Negativo
  • Aplicar filtros: blanco y negro y Alfa
  • Aplicar un Flip horizontal
  • Aplicar filtros de color
  • Seleccionar una imagen
  • Seleccionar un filtro
  • Seleccionar un filtro de color
  • Seleccionar el alfa y limpiar la foto

Manejo de Texto con CANVAS HTML5

  • Previsualización Manejo de texto
  • Gradiente en textos y contornos
  • Patrones en textos y contornos
  • Propiedades de los textos
  • Alineación de texto
  • Texto alineado a un arco

Animación con CANVAS HTML5

  • Previsualización Revisar la animación final con Canvas
  • Animación de una pelotita con Canvas
  • Borrar y re-dibujar la pelotita
  • Detectar las colisiones en el eje X
  • Terminar la animación básica con canvas

CANVAS: crear un juego de memoria

  • Previsualización Revisar el juego de memoria terminado
  • Crear el objeto JavaScript para almacenar la información del juego
  • Pintamos el tablero del juego
  • Barajar las cartas del juego de memoria
  • Ajustar las coordenadas del canvas
  • Detectar la carta seleccionada con el apuntador del ratón
  • Seleccionar la primer carta del juego de memoria
  • Selecciona la segunda carta del juego de memoria
  • Comparar las cartas seleccionadas en la mano del juego de memoria
  • Crear un contador en el juego y finalizarlo

Crear un juego de memoria con imágenes

  • Previsualización Revisar el juego de memoria con imágenes
  • Crear el arreglo múltiple de JavaScript para las imágenes
  • Concluir el juego de memoria con imágenes

Crear un juego de ahorcado

  • Previsualización Revisar el juego de ahorcado terminado
  • Las variables y objetos para el juego de ahorcado
  • Crear el tablero QWERTY para el juego
  • Desplegar la palabra letra por letra en el canvas
  • Colocar el cadalso del ahorcado en el canvas
  • Detectar la tecla seleccionada por el usuario
  • Empatar la tecla seleccionada con la palabra
  • Verificar el fin del juego: Game Over

Crear un juego de "gato" con el canvas de HTML5

  • Previsualización Revisar el juego del "gato" terminado
  • La lógica del juego
  • La estructura de datos y las variables del juego
  • Dibujar la grilla del juego y las fichas en el arreglo
  • Crear la función para escribir mensajes en el canvas
  • Seleccionar la ficha por el usuario para la partida
  • Pintar la ficha que seleccionó el jugador en el tablero
  • La función que seleccionará la jugada de la máquina
  • Hacer la función que verifica los pesos en los renglones
  • Calcular el peso de las fichas para la jugada de la computadora
  • Escribir las funciones de soporte al cálculo de los pesos
  • Verificar el código con console.log()
  • Verificar el peso de las fichas en las columnas
  • Verificar el peso de las fichas en las diagonales
  • Seleccionar la mejor jugada
  • Game Over: terminal el juego

Crear un juego de minas con Canvas-HTML5

  • Previsualización Revisar el juego de Minas terminado
  • Introducción al desarrollo del juego de Busca Minas
  • Escribir las variables y constantes del juego
  • Los objetos del juego y sus métodos
  • Dibujar el tablero del juego Busca Minas
  • Detectar la celda seleccionada por el usuario con el ratón
  • Generar las minas en la celda del tablero
  • Crear el marcador del juego Busca Minas
  • Calcula las minas vecinas de todas las celdas
  • Calcula los índices de los vecinos de la celda
  • Voltea la celda
  • Varias opciones antes de voltear la celda seleccionada
  • Activar y desactivar la bandera para marcar minas
  • La rutina para marcar la celda
  • Encontrar los blancos: la función recursiva
  • El fin de juego: destapar todas las celdas

Crear un juego de deducción de colores con Canvas-HTML5

  • Previsualización Revisar el juego de deducciones de colores en Canvas HTML5
  • Escribir las variables y estructuras de datos del juego
  • Escribir las funciones para dibujar las bolitas y el botón del juego
  • La rutina principal del juego: la creación de la primer jugada
  • Escribir la rutina para seleccionar el objeto dentro del canvas.
  • Detectar la pulsación del usuario sobre el botón de prueba
  • Verificar la jugada del usuario vs. la jugada de la máquina
  • Limpiar los arreglos para determinar los colores
  • Determinar si es “Fin del juego”

Crear un juego de memoria de sonidos

  • Previsualización Revisar el juego de memoria de sonidos con canvas-html5
  • El manejo del sonido en HTML5 y llamarlo desde JavaScript
  • Escribir las variables para el juego de memoria de sonidos con canvas
  • Escribir los objetos y sus funciones
  • Dibujar los cuadritos en el canvas
  • Escribir la rutina para detectar el objeto seleccionado por el jugador
  • Hacer que la nota se escuche, y que el cuadro crezca
  • La función para escribir mensajes
  • El inicio de la secuencia de la computadora
  • Permitir que el usuario repita la secuencia
  • Añadir una nota a la secuencia del usuario y repetirlo todo
  • Game Over: hasta la vista, baby

Hacer un juego de cajita de números con HTML5-Canvas

  • Previsualización Revisar el juego de cajita de números con canvas
  • Crear las variables y los objetos del juego
  • La función principal del juego
  • Dibujar el tablero
  • Mueve las fichas en forma aleatoria para el juego
  • Cambia las fichas de lugar
  • Seleccionar la ficha e inicia el juego…

Crear un rompecabezas simple con el CANVAS de HTML 5

  • Previsualización Revisar el juego de rompecabezas con CANVAS
  • Crear los objetos y las variables del juego de rompecabezas
  • Crea las fichas del juego y parte la imagen
  • Dibujar el tablero en el canvas con las fichas con imagenes
  • Mover las fichas de lugar, para el juego
  • Cambiar el orden de las fichas
  • Seleccionar la ficha que vamos a mover

Crear un juego de naves espaciales: invaders

  • Previsualización Revisar el juego de Space-Invaders desarrollado con HTML5
  • La función requestAnimationFrame
  • Ejemplo de una animación con requestAnimationFrame
  • Escribir las variables y los objetos del juego
  • Detectar los eventos del teclado y mover el cañón del jugador
  • Disparos: usar la barra espaciadora
  • Crear a los enemigos en el CANVAS
  • Mover a los enemigos: simular el juego clásico
  • Uso del spritesheet para simular movimiento de los enemigos
  • Detectar colisiones: matar alienígenas
  • Disparos de los aliens: primera parte
  • Disparos de los aliens: segunda parte
  • Verifica las colisiones de las balas enemigas contra nuestro valeroso jugador
  • Crea un marcador para el juego
  • Fin del juego: se acabó
  • Ahora si, los sonidos para los Invaders

Crear un juego con movimientos angulados: disparos de un tanque

  • Previsualización Revisar el juego del tanque terminado
  • Cuatro puntos importantes antes de el juego
  • Las variables globales, constantes y objetos del juego
  • Los objetos del juego: el tanque, los enemigos y las balas
  • Cargar los sonidos para el juego de tanques
  • Cargar la imagen del tanque
  • Obtener el ángulo a partir de dos puntos en el canvas
  • Escribir el listener para obtener el ángulo en radianes
  • Girar el tanque con respecto al cursor del ratón
  • Detectar el teclado y crear la bala de cañón
  • Mover las balas en el ángulo generado por el cañón
  • Crear los enemigos y sus coordenadas fuera del CANVAS
  • Mover a los enemigos desde un punto aleatoria hacia el centro del CANVAS
  • Detectar las colisiones entre balas y enemigos
  • Colisiones de enemigos vs. el tanque: restar vidas
  • Crear un marcador para el juego del Tanque
  • Escribir una rutina de mensajes para el inicio y fin del juego
  • Fin del juego: hasta la vista, baby!
Precio a consultar