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

Temario (17 horas 22 minutos)

  • Introducción al canvas en HTML5: gráficos
  • 1. Introducción al canvas 08:41 Video
  • 2. Verificación del canvas 09:34 Video
  • 3. El contexto en canvas 07:42 Video
  • 4. El contexto y el contorno en canvas 10:28 Video
  • 5. Crear líneas en canvas 10:35 Video
  • 6. Estados en canvas 07:04 Video
  • 7. Arcos y caminos 12:26 Video
  • 8. Curvas en canvas 08:03 Video
  • 9. Gradientes lineales 09:06 Video
  • 10. Dirección de gradientes lineales 09:20 Video
  • 11. Gradientes radiales 11:24 Video
  • 12. Manejo de patrones en canvas 09:52 Video
  • 13. Sombras en objetos y textos 06:44 Video
  • Manejo de líneas
  • 14. Creación de un grid 09:59 Video
  • 15. Dibujar los dos ejes en el grid 09:37 Video
  • 16. Dibujar ejes en un grid 12:39 Video
  • 17. Finalizar los ejes y organizar el código 07:07 Video
  • 18. Eventos del ratón dentro del canvas 06:05 Video
  • 19. Ajustar las coordenadas del ratón en el canvas 10:39 Video
  • 20. Dibujar una línea en forma dinámica con los eventos del ratón 08:26 Video
  • 21. DIbujar en forma continua con el apuntador del ratón 06:48 Video
  • 22. Controles para el programa de dibujo 09:58 Video
  • Manejo de imágenes con canvas HTML5
  • 23. Cargar una imagen en el canvas 07:08 Video
  • 24. Manipular los pixeles de una imagen 09:03 Video
  • 25. Aplicar el filtro Negativo 05:25 Video
  • 26. Aplicar filtros: blanco y negro y Alfa 05:58 Video
  • 27. Aplicar un Flip horizontal 09:59 Video
  • 28. Aplicar filtros de color 09:34 Video
  • 29. Seleccionar una imagen 09:34 Video
  • 30. Seleccionar un filtro 07:08 Video
  • 31. Seleccionar un filtro de color 08:00 Video
  • 32. Seleccionar el alfa y limpiar la foto 09:22 Video
  • Manejo de Texto con CANVAS HTML5
  • 33. Manejo de texto 06:22 Video
  • 34. Gradiente en textos y contornos 05:26 Video
  • 35. Patrones en textos y contornos 07:06 Video
  • 36. Propiedades de los textos 06:11 Video
  • 37. Alineación de texto 06:26 Video
  • 38. Texto alineado a un arco 11:30 Video
  • Animación básica con CANVAS
  • 39. Revisar la animación final con Canvas 01:46 Video
  • 40. Animación de una pelotita con Canvas 07:58 Video
  • 41. Borrar y re-dibujar la pelotita 06:38 Video
  • 42. Detectar las colisiones en el eje X 11:51 Video
  • 43. Terminar la animación básica con canvas 07:34 Video
  • Crear un juego de memoria con CANVAS-HTML 5
  • 44. Crear un juego de memoria con CANVAS-HTML5 03:09 Video
  • 45. Crear el objeto JavaScript para almacenar la información del juego 09:26 Video
  • 46. Pintamos el tablero del juego 11:27 Video
  • 47. Barajar las cartas del juego de memoria 06:33 Video
  • 48. Ajustar las coordenadas del canvas 07:44 Video
  • 49. Detectar la carta seleccionada con el apuntador del ratón 08:22 Video
  • 50. Seleccionar la primer carta del juego de memoria 11:21 Video
  • 51. Selecciona la segunda carta del juego de memoria 04:57 Video
  • 52. Comparar las cartas seleccionadas en la mano del juego de memoria 08:36 Video
  • 53. Dar los resultados y fin del juego 10:36 Video
  • Crear un juego de ahorcado
  • 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.

    54. Revisar el juego terminado de ahorcado 03:19 Video
  • 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.

    55. Las variables y objetos para el juego de ahorcado 09:38 Video
  • 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.

    56. Crear el tablero QWERTY para el juego 13:34 Video
  • 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.

    57. Desplegar la palabra letra por letra en el canvas 09:02 Video
  • 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.

     

    58. Colocar el cadalso del ahorcado en el canvas 04:36 Video
  • 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.

    59. Detectar la tecla seleccionada por el usuario 09:59 Video
  • 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.

    60. Empatar la tecla seleccionada con la palabra 07:27 Video
  • 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.

    61. Verificar le fin del juego: Game Over 08:28 Video
  • Crea un juego de "gato" con Canvas-HTML5
  • 62. Revisar el juego de "gato" terminado 03:13 Video
  • 63. La lógica del juego 07:20 Video
  • 64. Las variables y la estructura de datos 08:39 Video
  • 65. Dibujar las líneas del gato y crear las fichas 09:12 Video
  • En este video crearemos una función para poder mandar mensajes al programa dentro del canvas.

    66. Crear la función para escribir mensajes en el canvas. 05:02 Video
  • 67. Seleccionar la ficha por el usuario para iniciar la partida. 12:40 Video
  • 68. Pintar la ficha que seleccionó el jugador en el tablero. 06:28 Video
  • 69. Iniciar la función que seleccionará la jugada de la máquina 09:10 Video
  • Haremos la primer función para evaluar las tiradas por renglones, Por medio de dos ciclos, revisaremos las tiradas tanto del jugador (“Xs”) como de la máquina (“Os”)

     

    70. Hacer la función que verifica los pesos en los renglones 09:56 Video
  • En este video verificaremos el peso de la celda o ficha, depende si jugamos para ganar, jugamos para no perder, hacer una jugada o cualquier otra tirada.

    71. Calcular el peso de las fichas para la jugada de la computadora 08:41 Video
  • 72. Escribir las funciones de soporte al cálculo de los pesos 05:50 Video
  • 73. Verificar el código con console.log() 07:20 Video
  • 74. Verificar el peso de las fichas en las columnas 07:04 Video
  • 75. Verificar el peso de las fichas en las diagonales 09:36 Video
  • 76. Seleccionar la mejor jugada 08:42 Video
  • 77. Game Over: terminal el juego 02:30 Video
  • Crear el juego de Busca Minas
  • 78. Crear un juego de Busca Minas 02:50 Video
  • 79. Introducción al desarrollo del juego de Busca Minas 04:59 Video
  • 80. Escribir las variables y constantes del juego 08:04 Video
  • 81. Los objetos del juego y sus métodos 08:28 Video
  • 82. Dibujar el tablero del juego Busca Minas 07:54 Video
  • 83. Detectar la celda seleccionada por el usuario con el ratón 10:34 Video
  • 84. Generar las minas en la celda del tablero 05:57 Video
  • 85. Crear el marcador del juego Busca Minas 11:45 Video
  • 86. Calcula las minas vecinas de todas las celdas 12:02 Video
  • 87. Calcula los índices de los vecinos de la celda 12:56 Video
  • 88. Voltea la celda 08:02 Video
  • 89. Varias opciones antes de voltear la celda seleccionada 04:33 Video
  • 90. Activar y desactivar la bandera para marcar minas 06:15 Video
  • 91. La rutina para marcar la celda 06:31 Video
  • 92. Encontrar los blancos: la función recursiva 09:55 Video
  • 93. El fin de juego: destapar todas las celdas 05:59 Video
  • Crear una juego de memoria de sonido con CANVAS y HTML5
  • En este juego clásico, utilizaremos la etiqueta <audio> de HTML 5 para reproducir sonido, y el comando play() de javascript para reproducirlo.

    94. Revisar el juego de memoria de sonidos con canvas-html 5 03:01 Video
  • 95. El manejo del sonido en HTML5 y llamarlo desde JavaScript 06:16 Video
  • 96. Escribir las variables para el juego de memoria de sonidos 04:54 Video
  • Este juego tendrá pocos objetos, sólo el cuadrito y dos funcione: una para dibujarlo y otra para hacer un cuadro ligeramente más grande, con lo cual simularemos movimiento cuando se reproduzca el sonido.

     

    97. Escribir los objetos y sus funciones 06:21 Video
  • Dibujaremos los cuadros en el canvas por medio de las variables y objetos que hemos definido ayudados de un ciclo for.

     

    98. Dibujar los cuadritos en el canvas 04:59 Video
  • Al igual que lo hemos hecho en otros juegos, obtendremos las coordenadas del apuntador del ratón y las ajustaremos en el canvas para detectar si coinciden con alguno de los objetos del mismo.

     

    99. Escribir la rutina para detectar el objeto seleccionado por el jugador 08:13 Video
  • 100. Hacer que la nota se escuche, y que el cuadro crezca 04:36 Video
  • 101. La función para escribir mensajes 03:53 Video
  • 102. El inicio de la secuencia de la computadora 08:59 Video
  • 103. Permitir que el usuario repita la secuencia 03:25 Video
  • 104. Añadir una nota a la secuencia del usuario y repetirlo todo 04:31 Video
  • 105. Game Over: hasta la vista, baby 04:35 Video
  • Hacer un juego de cajita de números con HTML5-Canvas
  • Este juego clásico moveremos las piezas con números para ponerlos en orden. Utilizaremos algunas de las funciones que hemos visto en otros juegos para crear este nuevo.

    106. Hacer un juego de cajita de números con HTML5-Canvas 01:41 Video
  • 107. Crear las variables y los objetos del juego 10:23 Video
  • 108. La función principal del juego 03:34 Video
  • 109. Dibujar el tablero 06:01 Video
  • 110. Mueve las fichas en forma aleatoria para iniciar el juego 09:53 Video
  • 111. Cambia las fichas de lugar 09:19 Video
  • 112. Seleccionar la ficha e inicia el juego… 07:37 Video
  • Crear un rompecabezas simple con el CANVAS de HTML5
  • Armar un rompecabezas deslizable es un juego clásico en internet. Era relativamente sencillo hacerlo en Flash, y ahora lo podemos realizar con el CANVAS de HTML5 cambiando un poco la lógica, pues aquí no tenemos objetos, sólo una área para dibujar.

    113. Revisar el juego de rompecabezas con CANVAS 02:03 Video
  • Este juego será ligeramente diferente, pues la carga de las imágenes necesita de ser sincronizada, de lo contrario, tendremos errores en la programación. Para ello utilizaremos el evento “onload”.

    114. Crear los objetos y las variables del juego de rompecabezas 09:46 Video
  • Una vez cargada la imagen, podemos partirla en cada una de las piezas del rompecabezas, en este caso, de 150x150 pixeles. Usaremos el método drawImage con nuevos parámetros.

    115. Crea las fichas del juego y parte la imagen 08:16 Video
  • 116. Dibujar el tablero en el canvas con las fichas con imagenes 05:43 Video
  • El centro del juego será mover las coordenadas de la imagen dentro de las fichas y volver a pintar todo el tablero. Esta función es fundamental para barajar las fichas, ya que no lo podemos hacer en un proceso completamente aleatorio, pues el juego no tendría solución.

    117. Mover las fichas de lugar, para iniciar el juego 08:02 Video
  • En este juego, sólo podremos mover la ficha en cuatro direcciones, como si tuviéramos el juego en la vida real, y sólo se podrá mover hacia el cuadro blanco. Intercambiando las coordenadas dentro de las fichas, podemos simular estos movimientos.

    118. Cambiar el orden de las fichas 12:13 Video
  • Crear un juego de naves espaciales: invaders
  • Por último, el usuario selecciona la ficha que desea mover, y también solo podrá hacerlo al espacio en blanco, con lo cual inicia el juego hasta que el usuario acomoda todo los cudros para volver a armar la imagen.

    119. Seleccionar la ficha que vamos a mover 07:56 Video
  • 120. La función requestAnimationFrame 09:05 Video
  • 121. Ejemplo de una animación con requestAnimationFrame 10:15 Video
  • 122. Escribir las variables y los objetos del juego 12:37 Video
  • 123. Detectar los eventos del teclado y mover el cañón del jugador 08:37 Video
  • 124. Disparos: usar la barra espaciadora 12:00 Video
  • 125. Crear a los enemigos en el CANVAS 08:39 Video
  • 126. Mover a los enemigos: simular el juego clásico 09:02 Video
  • 127. Uso del spritesheet para simular movimiento de los enemigos 07:11 Video
  • 128. Detectar colisiones: matar alienígenas 12:57 Video
  • 129. Revisar el juego de Space-Invaders con HTML5 y JavaScript 02:42 Video
  • 130. Disparos enemigos: nos atacan los marcianos, primera parte 09:24 Video
  • 131. Disparos enemigos: nos atacan los marcianos, segunda parte 05:49 Video
  • 132. Verifica las colisiones de las balas enemigas contra nuestro valeroso jugador 05:35 Video
  • 133. Crea un marcador para el juego 04:16 Video

Valoraciones (1)

  • 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!

    Ivan Paúl Márquez Sandoval

Miembro desde marzo 2013
908 seguidores 48.924 visitas

¿Qué ventajas tiene un curso de pago?

  • 4,5/5
    Valoración promedio
  • 75%
    Finalizado en 30 días
  • 16x
    Uso de servicios
  • Contacto con el Profesor
  • Obtención de Certificado
  • Documentación adicional
+ Info

Confianza y seguridad

Descubre cómo garantizamos que el contenido y las transacciones sean de absoluta confianza.

  • Pago 100% seguro
  • Garantía devolución 30 días
  • Acceso ilimitado
+ Info