Crea juegos en línea en html5 con canvas, svg, json y sql
4.6 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
758 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Crea juegos en línea en html5 con canvas, svg, json y sql to your Wishlist.

Add to Wishlist

Crea juegos en línea en html5 con canvas, svg, json y sql

Aprende a crear juegos en línea HTML5 con canvas, gráficos SVG con datos J-son, javascript con POO y bases de datos SQL
4.6 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
758 students enrolled
Last updated 8/2017
Spanish
Price: $100
30-Day Money-Back Guarantee
Includes:
  • 20.5 hours on-demand video
  • 2 Articles
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprenderás a hacer gráficos dinámicos a través de javascript y a utilizar javascript con programación orientada a objetos.
  • Aprenderás el uso de los gráficos SVG mezclados con CANVAS, y hacer colisiones físicas para tus juegos.
  • Aprenderás a construir un juego de plataforma al mejor estilo de Mario Bros (enemigos, colisiones, trampas, saltos, vidas, entre otros elementos que caracterizan los juegos de plataforma).
  • Aprenderás a utilizar el patrón Modelo-Vista-Controlador con PHP orientado a objetos para que nuestros juegos sean multi-usuarios, seguros y se pueda llevar registros de puntajes.
  • Aprenderás a construir tus propios juegos en línea con registro multi-usuario desde la red social de facebook para generar estrategias y campañas de masificación de tus juegos en la web. Además estos juegos que vas desarrollar en línea los podrán jugar desde diversas plataformas como laptop, tablet o móvil sin necesidad de instalar ninguna extensión.
View Curriculum
Requirements
  • Es recomendable que los estudiantes que tomen este curso estén familiarizados con JAVASCRIPT y PHP, más no es un requisito.
Description

¿DE QUÉ SE TRATA EL CURSO?

Hoy en día el desarrollo de vídeo juegos ha traspasado las barreras en plataformas, ahora puedes hacer tus juegos orientados a la web, con registro de usuarios e integración de redes sociales para estrategias de negocios o sólo para entretenimiento. 

En este curso vas a aprender a generar gráficos dinámicos por medio de javascript a través del elemento HTML5 llamado CANVAS. Un recurso que ha revolucionado los gráficos en la web gracias a sus contextos 2D y 3D. Además vamos a utilizar la ventaja de los vectores SVG para ser importados a través de datos JSON y así poder generar interacciones más enriquecidas en Javascript con programación orientada a objetos.

Finalmente incluiremos datos SQL con PHP utilizando el patrón Modelo-Vista-Controlador para hacer registro de usuarios a través de la red Social Facebook y así impulsar nuestros juegos en forma masiva. ¡Anímate a subir de nivel!

¿CÓMO ES EL CURSO?

El curso se divide en varias secciones. En una primera sección nos introduciremos en CANVAS, allí aprenderás a hacer gráficos dinámicos a través de javascript y a utilizar javascript con programación orientada a objetos.

Luego aprenderemos el uso de los gráficos SVG mezclados con CANVAS, allí aprenderás hacer colisiones físicas para tus juegos.

En las siguientes secciones construiremos un juego de plataforma al mejor estilo de Mario Bros (enemigos, colisiones, trampas, saltos, vidas, entre otros elementos que caracterizan los juegos de plataforma), utilizaremos el patrón Modelo-Vista-Controlador con PHP orientado a objetos para que nuestros juegos sean multi-usuarios, seguros y se pueda llevar registros de puntajes.

En la última sección subiremos nuestro juego a un hosting gratuito y conectaremos nuestro juego con los perfiles de Facebook para publicar puntajes y compartirlos de forma masiva.

¿CUÁNTO SE TARDA EN COMPLETAR EL CURSO?

Depende de ti. Estimo que menos de tres semanas puedes completar el curso, pero dependerá de tu ritmo de trabajo y de tu disponibilidad.

¿CUÁLES SON LOS REQUISITOS?

Descargar el material que se encuentra en los recursos de la primera clase de cada sección. Tener principios en HTML5 y CSS3, curso gratuito que puede realizar en UDEMY: "Aprende HTML5 y CSS3 desde cero". No es indispensable pero sería bueno para la construcción del juego y almacenamiento de datos tener bases en Javascript y PHP, además te recomiendo descargar el servidor local XAMPP para cualquier sistema operativo, con versión PHP mínimo 5.6.28, lo puedes descargar desde la página web directa de XAMPP.

¿A QUIÉN VA DIRIGIDO ESTE CURSO?

Este curso va dirigido a personas que deseen desarrollar juegos en línea con HTML5, personas que deseen subir de nivel en la programación y adquirir competencias en el desarrollo de video juegos orientado a plataformas web.

Who is the target audience?
  • Este curso de CANVAS va dirigido a las personas que deseen aprender a crear sus propios juegos en plataformas web de una forma nativa sin ayuda de plugins o extensiones
Students Who Viewed This Course Also Viewed
Curriculum For This Course
86 Lectures
20:37:13
+
Introducción a CANVAS
22 Lectures 04:06:21

Bienvenidos a este curso de "Crea juegos en línea en html5 con canvas, vectores svg, datos json y conexiones a base de datos SQL". No olvides descargar el material de apoyo de esta sección en esta primera clase, allí encotrarás todos los recursos de aprendizaje. 

Preview 10:50

Para introducirnos, te recomiendo el vídeo que está en los recursos disponibles de esta misma clase donde explico cómo puedes convertir sublime text 3 en una excelente herramienta de trabajo para el desarrollo de este curso. No es un requisito trabajar con este editor de código, pero muchos estudiantes me preguntan cuáles atajos son los que utilizo mientras voy dando las clases, y en este vídeo que está en mi canal de youtube los explico todos.

Antes de comenzar
01:14

CANVAS (o lienzo traducido al español) es un elemento HTML incorporado en HTML5 que
permite la generación de gráficos dinámicamente por medio del scripting. Entre otras cosas, permite la renderización interpretada dinámica de gráficos 2D y mapas de bits, así como animaciones con estos gráficos. 

CANVAS
02:28

Cuando graficamos con CANVAS lo hacemos a través de coordenadas numéricas, por eso en esta clase vamos a preparar nuestro lienzo de tal manera que se nos facilite la escritura de vectores.

Preparando nuestro lienzo - parte 1
15:12

Preparando nuestro lienzo - parte 2
10:49

Los primero pasos que debemos dar en el aprendizaje de CANVAS es graficar figuras geométricas, y de allí conocer los formas que se extienden a partir de ellas: recuadros, círculos, contornos rellenos, degradados, líneas y curvas, son todo lo que componen nuestros gráficos en dos dimensiones.

Dibujando figuras geométricas - parte 1
13:15

Dibujando figuras geométricas - parte 2
10:45

Dibujando figuras geométricas - parte 3
16:28

En este ejercicio pondremos en práctica lo aprendido con las figuras geométricas y realizaremos un paisaje a partir de ellas.

Creando nuestro primer dibujo en CANVAS - parte 1
12:52

Creando nuestro primer dibujo en CANVAS - parte 2
06:53

Además de escribir vectores, en CANVAS también podemos agregar MAPAS DE BITS, extensiones como JPG, PNG, GIF y SVG hacen parte del listado que soporta esta librería.

Utilizando gráficos Mapa de Bits en CANVAS - parte 1
08:45

Utilizando gráficos Mapa de Bits en CANVAS - parte 2
14:18

Los gráficos en CANVAS por sí solos no son tan provechosos, la ventaja de CANVAS es permitir aplicar métodos, propiedades y objetos de JAVASCRIPT para su dinamismo e interacción. En esta clase aprenderemos a utilizar los graficos de CANVAS dentro de un marco de tiempo a través de la función requestAnimationFrame.

Utilizando línea de tiempo en CANVAS - parte 1
15:09

Utilizando línea de tiempo en CANVAS - parte 2
07:33

Utilizando línea de tiempo en CANVAS - parte 3
02:47

Javascript es un lenguaje muy flexible, y presenta varias formas de usarlo, lo recomendado para trabajar con CANVAS es el paradigma de programación Orientado a Objetos. Este paradigma de programación permite la modularidad, el polimorfismo y el encapsulamiento de los objetos. Una forma más organizada de hacer código, a través de los objetos con sus respectivas propiedades y métodos.

Programación Orientada a Objetos en Javascript
04:19

En esta clase veremos con ejemplo práctico cómo podemos combinar la Programación Orientada a Objetos con CANVAS.

POO en CANVAS
14:01

Los eventos de teclado nos permiten interactuar con los elementos del DOM,en este caso vamos a interactuar con los gráficos de CANVAS, a partir de ellos comenzaremos este mundo de los juegos en línea.

Eventos de teclado en CANVAS
20:55

En esta clase aprenderemos acerca de un tema complejo para la programación de juegos, y son las colisiones entre objetos: personaje con plataforma, coche con carriles, bala con enemigo, entre otras colisiones existentes en los juegos. El éxito de ellas está en que sepas que lo que colisiona no son las formas en sí, sino las coordenadas que componen las formas. En pocas palabras, las colisiones ocurren cuando el valor numérico de la ubicación de una coordenada se cruza con el valor numérico de la ubicación de la coordenada del objeto a colisionar.

Preview 17:47

Colsiones - parte 2
10:37

Colsiones - parte 3
12:05

Para finalizar esta sección finalizaremos con un juego muy sencillo de laberinto para poner en práctica lo aprendido, además integraremos los vectores de los gráficos SVG para facilitar el desarrollo de los elementos geométricos en CANVAS.

Creando nuestro primer juego en CANVAS - Laberinto
17:19

En este examen encontrarás preguntas de respuesta múltiples donde sólo una es la correcta para cada pregunta. Ánimo y demuestra lo aprendido!

Pon en práctica lo aprendido
6 questions
+
PREPARANDO NUESTRO JUEGO DE PLATAFORMA
18 Lectures 04:56:11

Cualquier proyecto que realicemos y necesitemos interacción con usuarios es indispensable el almacenamiento de datos. Por eso nuestro juego va a permitir el registro de USUARIOS a través de la API de FACEBOOK y dicha información la almacenaremos en nuestra propia Base de Datos. Todo esto lo realizaremos con el lenguaje de programación PHP y el patrón Modelo-VIsta-Controlador para que nuestras aplicaciones queden seguras. Recuerda descargar el material de apoyo de esta Sección en esta clase y ubicarlo en la carpeta de tu servidor local (htdocs). Te recomiendo utilizar el servidor local XAMPP en la versión PHP mínimo 5.6.28, lo puedes descargar desde la página web directa de XAMPP.

Preview 09:56

Organizando el proyecto bajo el patrón MVC - parte 2
16:24

Organizando el proyecto bajo el patrón MVC - parte 3
14:45

Luego de organizar nuestras carpetas bajo el patrón Modelo-Vista-Controlador, comenzaremos a crear los respectivos archivos para recibir las variables que nos enviará Facebook a través de su API SDK, nos conectaremos a la base de datos a través de la clase PDO para hacer conexiones más seguras, y subiremos la información que nos facilitará Facebook para llevar el control de usuarios, niveles y puntajes.

Haciendo el registro de Usuarios - parte 1
24:50

Haciendo el registro de Usuarios - parte 2
20:55

Haciendo el registro de Usuarios - parte 3
20:06

Debemos verificar en nuestra Base de Datos la existencia de usuarios que en algún momento hayan hecho un registro en nuestro juego, para que no lo volvamos a registrar y borrar su historial de puntajes.

Revisar usuarios repetidos
10:03

Si estamos haciendo registro de usuarios es fundamental que las páginas de la aplicación sean protegidas por inicio de sesión. Con los inicio de Sesión privatizamos nuestras páginas y sólo permitimos el acceso a las personas que hayan hecho un registro adecuado.

Iniciar Sesión - parte 1
18:20

Iniciar Sesión - parte 2
11:41

También es importante que la aplicación permite el cierre de Sesión para que no queden credenciales abiertas, tanto en Facebook como en la aplicación. Como aún no estamos implementando la Api de Facebook porque es requisito que nuestra aplicación esté montada en un hosting, mientras tanto vamos a dar salida de sesión de nuestro sistema PHP.

Cerrar Sesión
04:37

Con el archivo .htaccess aportamos otro grado de seguridad a nuestra aplicación, no permitiendo el ingreso a los directorios de la aplicación a través de la URL y facilitando el uso de Url´s  amigables.

Archivo HTACCESS y url's amigables
08:56

En esta clase aprenderemos a organizar nuestro juego por niveles y a mostrar los puntajes del usuario almacenados en la base de datos.

Llamando los niveles y puntajes
13:23

Una de las características que permite que un juego sea popular entre usuarios es la posibilidad de comparar los mejores puntajes y entrar en niveles de competencia. con esto podemos masificar nuestro juego y muchas personas se interesarían en practicarlo.

Llamando los mejores puntajes
19:59

Luego de pasar todo el proceso interactivo con PHP, comenzaremos a vincular los gráficos del juego. En esta clase explicaremos de dónde provienen los gráficos que vamos a usar, cómo se elaboraron y qué características deben cumplir para hacer de nuestro juego una plataforma escalable y modularizada, donde tendremos en cuenta el factor rendimiento y estética para que nuestros juegos sean ágiles en los navegadores y en los procesos de los sistemas operativos donde se ejecuten.

Graficando el CANVAS - parte 1
26:13

Graficando el CANVAS - parte 2
21:32

Graficando el CANVAS - parte 3
18:31

Una característica principal de para el rendimiento de nuestro juego es generar un "preload" (cargador de archivos previos) antes de que aparezca la aplicación, para que cuando el usuario interactue con ella todos los gráficos y recursos audiovisuales ya estén cargados en el navegador.

Haciendo un Preload
21:00

Finalizaremos esta sección agregando un Plus bastante importante para el desarrollo de vectores con gráficos SVG. Los datos JSON (acrónimo de JavaScript Object Notation), es un formato de texto ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript aunque hoy, debido a su amplia adopción como alternativa a XML, se considera un formato de lenguaje independiente. Con los datos JSON limpiaremos nuestro código Javascript liberándolo de textos pesados y extensos que se generan por el uso de vectores SVG.

Llamando datos JSON
15:00
+
TRABAJANDO CON LA LÍNEA DE TIEMPO
12 Lectures 03:32:18

En esta clase comenzaremos a darle vida a nuestro juego agregando la función RequestAnimationFrame de Javascript.

Preview 18:01

Moviendo el escenario con el teclado - parte 2
16:53

Es importante que nuestro escenario genere efectos de profundidad para el usuario, enriquece nuestro juego a nivel visual.

Generando efectos de profundidad
20:52

Es hora de que nuestro juego se conecte a la base de datos y lo primero que debemos hacer es poner los límites del juego, dónde termina cada nivel.

Habilitando niveles y actualizando puntajes
18:07

Al terminar cada nivel debemos subir a la base de datos la actualización del jugador, qué próximo nivel queda habilitado y cuál es el nuevo puntaje en la tabla de posiciones.

Subiendo nivel y puntajes a la base de datos
23:01

Para generar una experiencia más agradable a nuestros jugadores, vamos a agregar la acción que permita ampliar la pantalla y esconder los paneles que trae por defecto los navegadores.

Aplicando fullscreen al navegador
20:28

A partir de esta clase comenzaremos a agregar las físicas del juego: la caída del personaje atraído por la fuerza de gravedad y las colisiones con las plataformas.

Agregando la gravedad y las colisiones - parte 1
20:16

Agregando la gravedad y las colisiones - parte 2
08:01

Agregando la gravedad y las colisiones - parte 3
20:52

Luego de terminar las físicas del juego, nuestro personaje para poder desplazarse entre las plataformas debe tener la acción de saltar, en esta clase vamos a desarrollar esta situación.

Agregando el salto de nuestro jugador
12:45

En esta clase le agregaremos vida al personaje, incluiremos los sprites que le dan movimiento al personaje. 

Agregando los sprites al jugador
19:25

Para finalizar esta sección, haremos algunos ajustes en nuestro juego con respecto a las colisiones, por ejemplo, cuando nuestro personaje cae por un vacío, el contacto exacto con la plataforma, entre otros ajustes.

Corrigiendo algunos detalles de colisión
13:37
+
AGREGANDO LA UTILERÍA DE NUESTRO JUEGO
18 Lectures 04:47:23

En esta clase comenzaremos a agregar la utilería de nuestro juego. Comenzando por las monedas, aprenderemos a distribuirlas en el escenario y a colisionar con ellas. Recuerda descargar el material de apoyo de esta sección (03.AGREGANDO-UTILERIA.zip) en esta misma clase.

Agregando las monedas - parte 1
17:29

Agregando las monedas - parte 2
13:55

Colisionando con las monedas
08:26

Luego de agregar las monedas y colisionar con ellas, continuamos con las trampas.

Agregando las trampas
18:30

En esta clase aprenderemos a dar animación independiente a cada elemento dentro de la línea de tiempo.

Agregando movimiento a las trampas
13:56

Continuamos con la utilería agregando los enemigos.

Agregando los enemigos
15:15

Agregando disparos de los enemigos
20:09

Colisionando con las balas del enemigo
09:13

En esta clase activaremos otra función del teclado para que puedan salir disparos del jugador.

Agregar disparos del jugador
22:43

Colisiones entre disparo jugador y disparo enemigo
19:04

Es importante tener control visual de cada una de las acciones que realizamos con la utilería, por ejemplo, llevar cuentas de las monedas, de la energía perdida, de la cantidad de vidas disponibles, entre otras funciones del juego. Por eso, en esta clase vamos a agregar con html5 y css3 la zona del tablero del juego.

Maquetando el tablero del juego
22:14

Activando nuestro tablero - parte 1
18:41

Activando nuestro tablero - parte 2
11:48

En esta clase comenzaremos a agregar los sonidos de nuestro juego, y te mostraré dónde podrás adquirir más sonidos.

Agregando los sonidos - parte 1
15:39

Agregando los sonidos - parte 2
23:27

En esta clase agregaremos el panel donde muestra el puntaje recolectado por el jugador luego de atravesar el nivel completo. Allí se hará un promedio de puntos para sacar un balance final y así hacer de nuestro juego algo más competitivo.

Agregando el panel final - parte 1
06:15

Agregando el panel final - parte 2
17:30

Para finalizar esta sección, nos queda faltando organizar el volumen de los sonidos de nuestro juego, es importante que el usuario pueda controlar el sonido para bajar el volumen o silenciarlo completamente.

Habilitando los controles del sonido
13:09
+
FINALIZANDO NUESTRO JUEGO
16 Lectures 03:15:19

En esta clase comenzaremos todo el proceso de optimización de nuestro juego. Comenzando por los sonidos y luego por las imágenes. Recuerda descargar el material de apoyo de esta sección (04.FINALIZANDO-NUESTRO-JUEGO.zip) en esta misma clase.


Optimizando los sonidos
09:52

Optimizando las imágenes
07:31

Agregar todos los gráficos a la precarga
20:40

Adquiriendo un hosting para nuestro juego
13:33

Inicio de Sesión con Facebook - parte 1
21:32

Inicio de Sesión con Facebook - parte 2
14:24

Cerrar Sesión de Facebook
07:34

Compartir puntajes con Facebook
20:23

Agregando nuestro juego al escritorio de los dispositivos touch
22:18

Creando inicio de Sesión desde dispositivos touch
14:54

Creando los controles para dispositivos touch
14:50

Cambiar etiqueta <meter> por etiqueta <progress>
03:52

Subiendo nuestro juego al servidor remoto
17:49

Probando nuestro juego desde un IPAD
02:29

Despedida
02:41

Clase extra!
00:57
About the Instructor
Juan Fernando Urrego
4.5 Average rating
3,616 Reviews
15,575 Students
8 Courses
Diseñador Visual y Desarrollador Web

Mi nombre es Juan Fernando Urrego, soy profesional en Diseño Visual y Especialista en Administración de la Informática Educativa. Dedicado tiempo completo a la docencia en Desarrollo Web, Diseño Interactivo, Animación 3D e Ilustración. Fundador del portal de cursos Tutoriales a tu Alcance. Soy un convencido de que la internet es la oportunidad del conocimiento, la educación y los empleos del futuro.