Juego Plataformas de Cdigo Facilito con HTML5.

Qu aprender?
1. Aprenders a crear un juego de plataformas. Muy famosos en el mercado y tambin muy
entretenidos.
2. Aprenders a disear con POO en javascript.
3. Aprenders a manejar colisiones de manera avanzada.
4. Aprenders a utliza Sprites en un juego con HTML5.
5. Estudiaremos cmo reaccionar a diferentes tpos de colisiones.
6. Te ensearemos a crear escenarios y a navegar entre ellos.
7. Aprenders cmo lograr objetvos, administrar puntaje y mucho ms.
8. Veremos el funcionamiento de la librera ms famosa para Canvas, Kinetc.js
9. Aprenders a trabajar con assets.
10. Veremos conceptos de fsica como la gravedad.
11. Y mucho, mucho ms.
Cmo lo aprender?
A travs de distntos bloques de tutoriales diseados por el tutor para que saques mayor provecho
del aprendizaje del curso, no slo te mostramos el cdigo para hacerlo, si no tambin te explicamos
por qu el cdigo es as y cmo llegamos a esa conclusin, de modo que al terminar el curso t seas
capaz de integrar este conocimiento en juegos nuevos.
Qu necesito?
Hemos diseado el curso para que sin conocimientos previos, ms all de cmo funciona la web,
puedas seguir el curso. Con el funcionamiento, nos referimos a que sepas que todas las pginas
tenen HTML, que el estlo se coloca con CSS y que la programacin del juego se har con JavaScript.
El editor que utlizaremos en el curso se llama Sublime Text 2, y puedes descargarlo en:
htp://sublimetext.com/2 existe en versiones para OS, Windows y distribuciones Linux.
Utlizaremos 2 libreras (te iremos explicando el por qu durante el curso):
1. La primera es Kinetc.js y puedes ver la pgina ofcial aqu : htp://kinetcjs.com/
2. Y la segunda es PreloadJS que es parte de la suite CreateJS, aunque no usaremos nada ms
que la parte del Preloader: htp://www.createjs.com/#!/PreloadJS
Ambas libreras podrs encontrarlas en el pack de descarga, en el curso te ensearemos cmo
colocarlas.
Adems necesitars un servidor local, no olvides ver el vdeo correspondiente para saber por qu y
cmo instalarlo. Aqu te dejamos algunas recomendaciones para que las instales:
XAMPP: htp://www.apachefriends.org/es/xampp.html
WampServer: htp://www.wampserver.com/en/
AppServ: htp://www.appservnetwork.com/index.php?newlang=spanish
El tutor del curso estar usando XAMPP coriendo sobre Windows 8, pero no tendrs problema sin
importar el Sistema Operatvo que tengas.
Por ltmo, necesitars un navegador moderno, Safari, Chrome, Firefox, Opera e Internet Explorer
10 son buenas opciones, el tutor estar utlizando Chrome 24.

Temario Completo (Duracin Total: 230 minutos)

Bloque 1: Preparar el entorno
1. Instalar XAMPP.
2. Crear el proyecto y colocar las libreras correspondientes.
3. Sublime Text 2, cmo usarlo.
Bloque 2: Construyendo la base del juego
1. Creacin del script principal y del Stage.
2. Creando las clases para el Hroe, los Enemigos y las Plataformas.
3. POO en javascript, enfoque especial a la herencia.
4. Colocando los listeners para los controles.
5. Defniendo el algoritmo de colisin a usar.
6. Colocando el loop del juego.
Bloque 3: Juego con figuras primitivas
1. Dibujando el Hroe con un rectngulo.
2. Moviendo nuestro Hroe con los controles.
3. Aplicando gravedad.
4. Mtodo saltar del Hroe.
5. Jerarqua de KinetcJS, el Stage, los Layers, los Assets y ms.
6. Agregando los primeros enemigos.
7. Defnir el movimiento de los enemigos.
Bloque 4: Colisin con plataformas
1. Dibujar las plataformas con rectngulos.
2. Colisin bsica.
3. Colisin entre Hroe y Plataforma.
Bloque 5: Sobre los enemigos
1. Eliminar elementos en colisin y mandar mensaje en caso de fn del juego.
2. Crear el objeto para el juego.
3. Agregar el puntaje.
Bloque 6: Assets
1. Agregar monedas y aumentar puntaje.
2. Agregar la puerta que dar fn al primer nivel.
Bloque 7: Imgenes.
1. Cargar imgenes con PreloadJS.
2. Construir objetos imgenes para enlazar con los personajes.
3. Modifcar los objetos para dibujar imgenes.




Bloque 8: Sprites y movimiento del Hroe
1. Teora, qu son y cmo funcionan los Sprites.
2. Genera tu propio Sprite.
3. Agregar el Sprite al juego.
4. Manipular distntas animaciones.
5. Mtodo aferFrame y ms manipulacin de animaciones.
6. Voltear el personaje.
7. Reescribir drawFunc de Kinetc.
Bloque 9: El Fondo
1. Colocar la imagen de fondo.
2. Mover el fondo con el personaje.
Bloque 10: Nivel Dos
1. Cambiar de nivel.
2. Agregar el objeto de la llave.
Bloque 11: Indicadores
1. Interaccin con el DOM.
2. Ganaste/Perdiste actvar mensajes.