- Cursos
- Tecnología
- Desarrollo Web
- Como crear juegos con HTML5
Como crear juegos con HTML5
En este videocurso online vas a aprender a manejar imágenes, procesar texto y dibujar con el CANVAS de HTML5
Descripción del curso
Aprende en este curso online todo sobre CANVAS de HTML5.
Canvas 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
Contenido del curso
Introducción al canvas en HTML5: gráficos
01:58:03- Introducción al canvas05:45AVANCE
- Verificación del canvas09:34
- El contexto en canvas07:42
- El contexto y el contorno en canvas10:28
- Crear líneas en canvas10:35
- Estados en canvas07:04AVANCE
- Arcos y caminos12:26
- Curvas en canvas08:03
- Gradientes lineales09:06
- Dirección de gradientes lineales09:20
- Gradientes radiales11:24
- Manejo de patrones en canvas09:52
- Sombras en objetos y textos06:44
Manejo de líneas
01:21:18- Creación de un grid09:59
- Dibujar los dos ejes en el grid09:37
- Dibujar ejes en un grid12:39
- Finalizar los ejes y organizar el código07:07
- Eventos del ratón dentro del canvas06:05
- Ajustar las coordenadas del ratón en el canvas10:39
- Dibujar una línea en forma dinámica con los eventos del ratón08:26
- DIbujar en forma continua con el apuntador del ratón06:48
- Controles para el programa de dibujo09:58
Manejo de imágenes con canvas HTML5
01:18:45- Cargar una imagen en el canvas07:08
- Manipular los pixeles de una imagen09:03
- Aplicar el filtro Negativo05:25
- Aplicar filtros: blanco y negro y Alfa05:58
- Aplicar un Flip horizontal09:59
- Aplicar filtros de color09:34
- Seleccionar una imagen07:08
- Seleccionar un filtro07:08
- Seleccionar un filtro de color08:00
- Seleccionar el alfa y limpiar la foto09:22
Manejo de Texto con CANVAS HTML5
43:01- Manejo de texto06:22
- Gradiente en textos y contornos05:26
- Patrones en textos y contornos07:06
- Propiedades de los textos06:11
- Alineación de texto06:26
- Texto alineado a un arco11:30
Animación básica con CANVAS
35:47- Revisar la animación final con Canvas01:46
- Animación de una pelotita con Canvas07:58
- Borrar y re-dibujar la pelotita06:38
- Detectar las colisiones en el eje X11:51
- Terminar la animación básica con canvas07:34
Crear un juego de memoria con CANVAS-HTML 5
01:22:11- Crear un juego de memoria con CANVAS-HTML503:09
- Crear el objeto JavaScript para almacenar la información del juego09:26
- Pintamos el tablero del juego11:27
- Barajar las cartas del juego de memoria06:33
- Ajustar las coordenadas del canvas07:44
- Detectar la carta seleccionada con el apuntador del ratón08:22
- Seleccionar la primer carta del juego de memoria11:21
- Selecciona la segunda carta del juego de memoria04:57
- Comparar las cartas seleccionadas en la mano del juego de memoria08:36
- Dar los resultados y fin del juego10:36
Crear un juego de ahorcado
01:06:03- Revisar el juego terminado de ahorcado03:19
- Las variables y objetos para el juego de ahorcado09:38
- Crear el tablero QWERTY para el juego13:34
- Desplegar la palabra letra por letra en el canvas09:02
- Colocar el cadalso del ahorcado en el canvas04:36
- Detectar la tecla seleccionada por el usuario09:59
- Empatar la tecla seleccionada con la palabra07:27
- Verificar le fin del juego: Game Over08:28
Crea un juego de "gato" con Canvas-HTML5
02:01:23- Revisar el juego de "gato" terminado03:13
- La lógica del juego07:20
- Las variables y la estructura de datos08:39
- Dibujar las líneas del gato y crear las fichas09:12
- Crear la función para escribir mensajes en el canvas.05:02
- Seleccionar la ficha por el usuario para iniciar la partida.12:40
- Pintar la ficha que seleccionó el jugador en el tablero.06:28
- Iniciar la función que seleccionará la jugada de la máquina09:10
- Hacer la función que verifica los pesos en los renglones09:56
- Calcular el peso de las fichas para la jugada de la computadora08:41
- Escribir las funciones de soporte al cálculo de los pesos 05:50
- Verificar el código con console.log()07:20
- Verificar el peso de las fichas en las columnas07:04
- Verificar el peso de las fichas en las diagonales09:36
- Seleccionar la mejor jugada08:42
- Game Over: terminal el juego02:30
Crear el juego de Busca Minas
02:06:44- Crear un juego de Busca Minas02:50
- Introducción al desarrollo del juego de Busca Minas04:59
- Escribir las variables y constantes del juego08:04
- Los objetos del juego y sus métodos08:28
- Dibujar el tablero del juego Busca Minas07:54
- Detectar la celda seleccionada por el usuario con el ratón10:34
- Generar las minas en la celda del tablero05:57
- Crear el marcador del juego Busca Minas11:45
- Calcula las minas vecinas de todas las celdas12:02
- Calcula los índices de los vecinos de la celda12:56
- Voltea la celda08:02
- Varias opciones antes de voltear la celda seleccionada04:33
- Activar y desactivar la bandera para marcar minas06:15
- La rutina para marcar la celda06:31
- Encontrar los blancos: la función recursiva09:55
- El fin de juego: destapar todas las celdas05:59
Crear una juego de memoria de sonido con CANVAS y HTML5
01:03:43- Revisar el juego de memoria de sonidos con canvas-html 503:01
- El manejo del sonido en HTML5 y llamarlo desde JavaScript06:16
- Escribir las variables para el juego de memoria de sonidos04:54
- Escribir los objetos y sus funciones06:21
- Dibujar los cuadritos en el canvas04:59
- Escribir la rutina para detectar el objeto seleccionado por el jugador08:13
- Hacer que la nota se escuche, y que el cuadro crezca04:36
- La función para escribir mensajes03:53
- El inicio de la secuencia de la computadora08:59
- Permitir que el usuario repita la secuencia03:25
- Añadir una nota a la secuencia del usuario y repetirlo todo04:31
- Game Over: hasta la vista, baby04:35
Hacer un juego de cajita de números con HTML5-Canvas
48:28- Hacer un juego de cajita de números con HTML5-Canvas01:41
- Crear las variables y los objetos del juego10:23
- La función principal del juego03:34
- Dibujar el tablero06:01
- Mueve las fichas en forma aleatoria para iniciar el juego09:53
- Cambia las fichas de lugar09:19
- Seleccionar la ficha e inicia el juego…07:37
Crear un rompecabezas simple con el CANVAS de HTML5
46:03- Revisar el juego de rompecabezas con CANVAS02:03
- Crear los objetos y las variables del juego de rompecabezas09:46
- Crea las fichas del juego y parte la imagen08:16
- Dibujar el tablero en el canvas con las fichas con imagenes05:43
- Mover las fichas de lugar, para iniciar el juego08:02
- Cambiar el orden de las fichas12:13
Crear un juego de naves espaciales: invaders
02:06:05- Seleccionar la ficha que vamos a mover07:56
- La función requestAnimationFrame09:05
- Ejemplo de una animación con requestAnimationFrame10:15
- Escribir las variables y los objetos del juego12:37
- Detectar los eventos del teclado y mover el cañón del jugador08:37
- Disparos: usar la barra espaciadora12:00
- Crear a los enemigos en el CANVAS08:39
- Mover a los enemigos: simular el juego clásico09:02
- Uso del spritesheet para simular movimiento de los enemigos07:11
- Detectar colisiones: matar alienígenas12:57
- Revisar el juego de Space-Invaders con HTML5 y JavaScript02:42
- Disparos enemigos: nos atacan los marcianos, primera parte09:24
- Disparos enemigos: nos atacan los marcianos, segunda parte05:49
- Verifica las colisiones de las balas enemigas contra nuestro valeroso jugador05:35
- Crea un marcador para el juego04:16
Valoraciones
5.0/5
3 Valoraciones
- 5 ESTRELLAS100%
- 4 ESTRELLAS0%
- 3 ESTRELLAS0%
- 2 ESTRELLAS0%
- 1 ESTRELLAS0%
DavidMerinoIncluir valoración media (en números)
AbrahamcayetanoIncluir valoración media (en números)
Ivan PaúlMárquez SandovalIncluir valoración media (en números)Practico y fácil!. Si te gusta la creación de Games, empiezo con lo básico, aquí te explican como crear un juego clásico!
¿Por qué pagar por un curso cuando puedes tenerlos todos?
Prueba la Suscripción ahoraO quiero saber más
