Crea sistemas de juegos en línea con canvas y PHP 7

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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

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.

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.

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

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

Continuamos con la utilería agregando los enemigos.

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

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.

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

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.

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.

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.