01 Bienvenida al curso 03:45 02 Introduccin al canvas 08:41 Avance 03 Verificacin del canvas 09:34 04 El contexto en canvas 07:42 05 El relleno y el contorno en canvas 10:28 06 Crear lneas en canvas 10:35 07 Estados en canvas 07:04 08 Arcos y caminos 12:26 09 Curvas en canvas 08:03 10 Gradientes lineales 09:06 11 Direccin de gradientes lineales 09:20 12 Gradientes radiales 11:24 13 Manejo de patrones en canvas 09:52 14 Sombras en objetos y textos 06:44 Avance Link: http://sh.st/wTnyx SECCIN 2: CREAR UNA SENCILLA APLICACIN DE DIBUJO CON CANVAS 15 Creacin de un grid 09:59 Avance 16 Dibujar los dos ejes en el grid 09:37 17 Dibujar ejes en un grid, segunda parte 12:39 18 Finalizar los ejes y organizar el cdigo 07:07 19 Eventos del ratn dentro del canvas 06:05 20 Ajustar las coordenadas del ratn en el canvas 10:39 21 Dibujar una lnea en forma dinmica con los eventos del ratn 08:26 22 DIbujar en forma continua con el apuntador del ratn 06:48 23 Controles para el programa de dibujo 09:58 Link: http://sh.st/wTny6 SECCIN 3: MANEJO DE IMGENES CON CANVAS HTML5 24 Cargar una imagen en el canvas 07:08 25 Manipular los pixeles de una imagen 09:03 26 Aplicar el filtro Negativo 05:25 27 Aplicar filtros: blanco y negro y Alfa 05:58 28 Aplicar un Flip horizontal 10:00 29 Aplicar filtros de color 09:34 30 Seleccionar una imagen 07:08 31 Seleccionar un filtro 08:00 32 Seleccionar un filtro de color 07:30 33 Seleccionar el alfa y limpiar la foto 09:22 Link : http://sh.st/wTnif SECCIN 4: MANEJO DE TEXTO CON CANVAS HTML5 34 Manejo de texto 06:22 35 Gradiente en textos y contornos 05:26 36 Patrones en textos y contornos 07:06 37 Propiedades de los textos 06:11 38 Alineacin de texto 06:26 39 Texto alineado a un arco 11:30 Link: http://sh.st/wTniV SECCIN 5: ANIMACIN CON CANVAS HTML5 40 Revisar la animacin final con Canvas 01:46 Avance 41 Animacin de una pelotita con Canvas 07:58 42 Borrar y re-dibujar la pelotita 06:38 43 Detectar las colisiones en el eje X 11:51 44 Terminar la animacin bsica con canvas 07:35 Link: http://sh.st/wTnoJ SECCIN 6: CANVAS: CREAR UN JUEGO DE MEMORIA 45 Revisar el juego de memoria terminado 03:09 46 Crear el objeto JavaScript para almacenar la informacin del juego 09:26 47 Pintamos el tablero del juego 11:27 48 Barajar las cartas del juego de memoria 06:33 49 Ajustar las coordenadas del canvas 07:44 50 Detectar la carta seleccionada con el apuntador del ratn 08:22 51 Seleccionar la primer carta del juego de memoria 11:21 52 Selecciona la segunda carta del juego de memoria 04:57 53 Comparar las cartas seleccionadas en la mano del juego de memoria 08:36 54 Crear un contador en el juego y finalizarlo 10:36 Link: http://sh.st/wTnpE SECCIN 7: CREAR UN JUEGO DE MEMORIA CON IMGENES 55 Revisar el juego de memoria con imgenes 01:45 56 Crear el arreglo mltiple de JavaScript para las imgenes 09:55 57 Concluir el juego de memoria con imgenes 09:54 Link: http://sh.st/wTna5 SECCIN 8: CREAR UN JUEGO DE AHORCADO 58 Revisar el juego de ahorcado terminado 03:19 59 Las variables y objetos para el juego de ahorcado 09:38 60 Crear el tablero QWERTY para el juego 13:34 61 Desplegar la palabra letra por letra en el canvas 09:02 62 Colocar el cadalso del ahorcado en el canvas 04:36 63 Detectar la tecla seleccionada por el usuario 09:59 64 Empatar la tecla seleccionada con la palabra 07:27 65 Verificar le fin del juego: Game Over 08:28 Link: http://sh.st/wTnsS SECCIN 9: CREAR UN JUEGO DE "GATO" CON EL CANVAS DE HTML5 66 Revisar el juego del "gato" terminado 03:13 67 La lgica del juego 07:20 68 La estructura de datos y las variables del juego 08:39 69 Dibujar la grilla del juego y las fichas en el arreglo 09:12 70 Crear la funcin para escribir mensajes en el canvas 05:02 71 Seleccionar la ficha por el usuario para iniciar la partida 12:40 72 Pintar la ficha que seleccion el jugador en el tablero 06:28 73 Iniciar la funcin que seleccionar la jugada de la mquina 09:10 74 Hacer la funcin que verifica los pesos en los renglones 09:56 75 Calcular el peso de las fichas para la jugada de la computadora 08:41 76 Escribir las funciones de soporte al clculo de los pesos 05:50 77 Verificar el cdigo con console.log() 07:20 78 Verificar el peso de las fichas en las columnas 07:04 79 Verificar el peso de las fichas en las diagonales 09:36 80 Seleccionar la mejor jugada 08:42 81 Game Over: terminal el juego 02:30 Link: http://sh.st/wTndz SECCIN 10: CREAR UN JUEGO DE MINAS CON CANVAS-HTML5 82 Revisar el juego de Minas terminado 02:50 83 Introduccin al desarrollo del juego de Busca Minas 04:59 84 Escribir las variables y constantes del juego 08:04 85 Los objetos del juego y sus mtodos 08:28 86 Dibujar el tablero del juego Busca Minas 07:54 87 Detectar la celda seleccionada por el usuario con el ratn 10:34 88 Generar las minas en la celda del tablero 05:57 89 Crear el marcador del juego Busca Minas 11:45 90 Calcula las minas vecinas de todas las celdas 12:02 91 Calcula los ndices de los vecinos de la celda 12:56 92 Voltea la celda 08:02 93 Varias opciones antes de voltear la celda seleccionada 04:33 94 Activar y desactivar la bandera para marcar minas 06:15 95 La rutina para marcar la celda 06:32 96 Encontrar los blancos: la funcin recursiva 09:55 97 El fin de juego: destapar todas las celdas 05:59 Link: http://sh.st/wTnf0 SECCIN 11: CREAR UN JUEGO DE DEDUCCIN DE COLORES CON CANVAS-HTML5 98 Revisar el juego de deducciones de colores en Canvas HTML5 04:31 99 Escribir las variables y estructuras de datos del juego 10:44 100 Escribir las funciones para dibujar las bolitas y el botn del juego 07:58 101 La rutina principal del juego: la creacin de la primer jugada 06:11 102 Escribir la rutina para seleccionar el objeto dentro del canvas. 09:59 103 Detectar la pulsacin del usuario sobre el botn de prueba 05:10 104 Verificar la jugada del usuario vs. la jugada de la mquina 09:08 105 Limpiar los arreglos para determinar los colores 08:37 106 Determinar si es Fin del juego 11:31 Link: http://sh.st/wTnfH SECCIN 12: CREAR UN JUEGO DE MEMORIA DE SONIDOS 107 Revisar el juego de memoria de sonidos con canvas-html5 03:01 108 El manejo del sonido en HTML5 y llamarlo desde JavaScript 06:16 109 Escribir las variables para el juego de memoria de sonidos con canvas 04:54 110 Escribir los objetos y sus funciones 06:21 111 Dibujar los cuadritos en el canvas 04:59 112 Escribir la rutina para detectar el objeto seleccionado por el jugador 08:14 113 Hacer que la nota se escuche, y que el cuadro crezca 04:36 114 La funcin para escribir mensajes 03:53 115 El inicio de la secuencia de la computadora 08:59 116 Permitir que el usuario repita la secuencia 03:25 117 Aadir una nota a la secuencia del usuario y repetirlo todo 04:31 118 Game Over: hasta la vista, baby 04:35 Link: http://sh.st/wTngh SECCIN 13: HACER UN JUEGO DE CAJITA DE NMEROS CON HTML5-CANVAS 119 Revisar el juego de cajita de nmeros con canvas 01:41 120 Crear las variables y los objetos del juego 10:23 121 La funcin principal del juego 03:34 122 Dibujar el tablero 05:54 123 Mueve las fichas en forma aleatoria para iniciar el juego 09:53 124 Cambia las fichas de lugar 09:19 125 Seleccionar la ficha e inicia el juego 07:37 Link: http://sh.st/wTngV SECCIN 14: CREAR UN ROMPECABEZAS SIMPLE CON EL CANVAS DE HTML 5 126 Revisar el juego de rompecabezas con CANVAS 02:03 127 Crear los objetos y las variables del juego de rompecabezas 09:46 128 Crea las fichas del juego y parte la imagen 08:16 129 Dibujar el tablero en el canvas con las fichas con imagenes 05:43 130 Mover las fichas de lugar, para iniciar el juego 08:02 131 Cambiar el orden de las fichas 12:13 132 Seleccionar la ficha que vamos a mover 07:56 Link: http://sh.st/wTnhl SECCIN 15: CREAR UN JUEGO DE NAVES ESPACIALES: INVADERS 133 Revisar el juego de Space-Invaders desarrollado con HTML5 02:42 134 La funcin requestAnimationFrame 09:05 Avance 135 Ejemplo de una animacin con requestAnimationFrame 10:15 136 Escribir las variables y los objetos del juego 12:37 137 Detectar los eventos del teclado y mover el can del jugador 08:37 138 Disparos: usar la barra espaciadora 12:00 139 Crear a los enemigos en el CANVAS 08:39 140 Mover a los enemigos: simular el juego clsico 09:02 141 Uso del spritesheet para simular movimiento de los enemigos 07:11 142 Detectar colisiones: matar aliengenas 12:57 143 Disparos de los aliens: primera parte 09:24 144 Disparos de los aliens: segunda parte 05:49 145 Verifica las colisiones de las balas enemigas contra nuestro valeroso jugado r 05:35 146 Crea un marcador para el juego 04:16 147 Fin del juego: se acab 08:30 148 Ahora si, los sonidos para los Invaders 11:26 Link: http://sh.st/wTnjy SECCIN 16: CREAR UN JUEGO CON MOVIMIENTOS ANGULADOS: DISPAROS DE UN TANQUE 149 Revisar el juego del tanque terminado 02:37 150 Cuatro puntos importantes antes de iniciar el juego 06:17 151 Las variables globales, constantes y objetos del juego 09:22 152 Los objetos del juego: el tanque, los enemigos y las balas 12:14 153 Cargar los sonidos para el juego de tanques 08:10 154 Cargar la imagen del tanque 06:22 155 Obtener el ngulo a partir de dos puntos en el canvas 07:13 156 Escribir el listener para obtener el ngulo en radianes 06:28 157 Girar el tanque con respecto al cursor del ratn 06:23 158 Detectar el teclado y crear la bala de can 10:07 159 Mover las balas en el ngulo generado por el can 11:11 160 Crear los enemigos y sus coordenadas fuera del CANVAS 12:03 161 Mover a los enemigos desde un punto aleatoria hacia el centro del CANVAS 09: 13 162 Detectar las colisiones entre balas y enemigos 06:16 163 Colisiones de enemigos vs. el tanque: restar vidas 05:20 164 Crear un marcador para el juego del Tanque 04:20 165 Escribir una rutina de mensajes para el inicio y fin del juego 05:12 166 Fin del juego: hasta la vista, baby! 04:45 Link: http://sh.st/wTnka SECCIN 17: A FORMA DE CONCLUSIN Link: https://mega.co.nz/#F!5JFxVQDD!KJzXEXIHQedjdz2xDl83eA 167 A manera de conclusin 01:56 Bases: https://mega.co.nz/#!kRk30bbC!LP0miWINEbkV4zfIVQQ8YlddpFdueU9GP2ptC1uXVe4 Contrasea: https://www.facebook.com/groups/ebooksforjava/ Se utilizo winrar5 para su compresion. Links winrar5 arquitectura x86 o 32 bits https://mega.co.nz/#!INEFjQ5S!F_qBry_-1ATKTSfxAY3TCztZ1X11giOooXQRUVhLEI8 Link winrar x64 https://mega.co.nz/#!wY0zVbKR!S-f_QEQghewJ4079pRIA-1is-fYTurhCV0iyia1puJk Saludos.