Desarrolla juegos HTML5 con canvas

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!