Desarrolla juegos para dispositivos móviles

• Crear el archivo P12

• Crear el ID de la aplicación

• Identificar el dispositivo

• Crear el perfil provisional

• Instalar el perfil provisional

• Cargar el certificado a PhoneGap Build

Ya que tenemos nuestro certificado, debemos crear el certificado P12:

• Abrir el “Acceso a las llaves”

• Acceso a llaveros >  Asistente para certificados > Solicitar un certificado  a una autoridad de certificación

• El archivo ha sido creado en este caso  en el escritorio. Hay que subirlo de nuevo a la página.

• Hay que subir el archivo

• El archivo CSR ya fue creado

• Ya se tiene tu certificado CSR

• El certificado de desarrollo está listo

• Crear el archivo P12

Una vez generado el archivo P12, hay que subirlo a la página para generar el identificador de la aplicación.

Obtener el identificador del dispositivo o dispositivos que vamos a trabajar o device's unique device identifier o UDID.

Debemos ahora crear un identificador que liga nuestra aplicación con el dispositivo y almacenarla en el mismo.

Permitirá ejecutar la aplicación en modo prueba en el dispositivo.

Ahora tenemos el perfil provisional

Ahora debemos instalar el perfil provisional en el dispositivo por medio de iTunes.

El siguiente paso es subir el perfil a PhoneGap Build.

Entra la página de PhoneGap Build y registrate como ya hemos visto.

Entrar a Account Options y seleccionar Edit Profile

Para permitir bajar aplicaciones a su teléfono o tableta Android, sólo debe permitirlo en la configuración, que por omisión está apagada.

Vaya a “Settings application”

Seleccione “Security menu”

Active la opción de instalación por fuentes desconocidas o “Unknown sources”

El archivo config.xml es un archivo de texto plano en formato xml, bajo el estándar widget de la W3C.

Las preferencias son valores adicionales que las configuramos con los parejas “nombre” de la preferencia y su valor.

Las preferencias no son compatibles para todas las plataformas.

Para extender las funcionalidades de Phonegap/Cordova requerimos importar librerías externas o “plugins”.

Los plugins pueden ser “core”, de terceros o propios.

Utilizamos en el archivo config.xml la etiqueta <plugin>, por ejemplo:

Muy importante: La aplicación (por lo general index.html) debe tener una de las siguientes llamadas a phnegap.js o cordova.js.

Los iconos dependen de la plataforma que se desarrolle.

Existen dos formas de especificar la plataforma. Primero es como atributo:

El segundo modo (recomendado) es introducirlo en la etiqueta de la plataforma.

Phonegap soporta classic, retina, iPhone 5 y iPad displays.

Android maneja “calificadores” para sus iconos.

Puedes tener o no tener una pantalla de entrada. Debe ser un “png” y puedes contar con los atributos src, width, height o platform.

En este video estableceremos las etiquetas y los parámetros para manejar el CANVAS de HTML5

Un punto muy importante es verificar si el navegador soporta el HTML5 y por lo tanto el canvas, ya que no todos los navegadores, ni todas las versiones lo hacen.

El contexto es la variable con la que manipularemos al canvas. Puede ser 2d o 3d, aunque la especificación de esta última aún no existe.

Uno de los conceptos fundamentales cuando dibujamos en el CANVAS de HTML5 es el relleno (fill) y el contorno (Stroke), los cuales son muy similares a otros paquetes como Flash e Illustrator.

La forma más sencilla para dibujar es la línea. Tendremos que mover primero las coordenadas y luego indicarle al API de dibujo, en qué coordenada deseamos terminar la línea.

Las líneas dentro de Canvas de HTML5 tienen ciertas propiedades que nos pueden ser de utilidad, como lineCap y lineJoin

Podemos almacenar, al igual que las calculadoras muy sencillas, una memoria con los colores que estamos utilizando. Si llegamos a cambiarlos, podemos "restaurarlos" en forma muy sencilla, volviendolos a llamar.

Otra forma de dibujar en el canvas de HTML5, es por medio de los arcos y
de unir varias líneas, lo cual lo llamaremos un "camino" o path.

Al menos al crear este video, canvas no tiene una instrucción para crear círculos, pero podemos realizar arcos, y con él podremos hacer círculos.

Curvas Bézier cuadráticas en canvas HTML5

Las curvas bezier cúbicas constan de cuatro puntos: el inicial, el final y dos puntos de control, ancla o tangentes.

Por medio del canvas podemos hacer gradientes lineales y radiales de manera sencilla pero muy potente.

Para definir la dirección de un gradiente, definimos una linea, que nos brinda la magnitud y dirección del gradiente.

Los gradientes radiales se basan en definir dos circulos, los cuales pueden tener el mismo punto origen, o diferente.

En canvas podemos cargar una figura y utilizarla como patrón. Por lo general utilizamos pequeñas imágenes PNG para aprovechar la transparencia.

• Desde el canvas podemos utilizar los eventos de JavaScript como:

  • onmousemove()

  • onmousedown()

  • onmouseup()

Por medio del CANVAS de HTML5 podemos animar objetos, tal como lo
hacemos con Flash (snif, snif), peo nosotros nos debemos encargar de
borrar y volver a dibujar las figuras. No resulta tan complicado, como
se verá en las siguientes vídeos.

Para que la pelota se mueva necesitamos un “motor”, el cual nos lo proporcionará JavaScript. Para ello utilizaremos la función setInterval, que es de uso general, pero nos servirá para hacer animaciones básicas.

Para que la pelota se mueva necesitamos un “motor”, el cual nos lo proporcionará JavaScript. Para ello utilizaremos la función setInterval, que es de uso general, pero nos servirá para hacer animaciones básicas.

Las colisiones son fundamentales para cualquier animación. Para ello utilizaremos un viejo truco que es primero calcular la nueva posición y luego la verificamos. También determinaremos los límites del movimiento izquierdo y derecho.

El proceso de animar en el eje de las “yes” es similar al de las “equis”. Calculamos los límites de arriba y abajo, calculamos la nueva dirección y ajustamos. Con ello tendríamos una animación sencilla por medio del canvas de HTML5.

Una vez que tenemos nuestra sencilla animación en formato fijo, la convertiremos en un formato flexible para que se adapte a los diferentes tamaños de pantalla, o viewport, de los dispositivos móviles.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivos móviles, procedemos a empaquetarla con Phonegap y a instalarla en un dispositivo móvil para su prueba.

Un juego muy pedagógico, y que tiene muchas variaciones es el de memoria. En esta unidad haremos una primera versión utilizando el CANVAS de HTML5.

Para almacenar la información de las cartas, utilizaremos un objeto de JavaScript. Ahi almacenaremos las coordenadas de la carta, el valor del número, así como una función muy sencilla para dibujar la misma.

Por medio del objeto carta, y algunas coordenadas iniciales, pintaremos en el canvas las cartas del juego, así como crear el arreglo donde almacenaremos la referencia de los objetos, con lo cual crearemos la  lógica del juego de Memoria.

Ahora que ya tenemos creadas las cartas en el tablero, tenemos que barajarlas ya que de momento, tienen el orden de origen, lo cual no es divertido como juego. Utilizaremos un algoritmo sencillo de intercambio de valores.

El único evento que podemos utilizar, ya que canvas no maneja objetos,  es cuando el usuario hace clic sobre el canvas. A estas coordanas necesitamos ajustarlas, ya que están consideradas como el punto origina, la esquina superior izquierda del navegados, no del canvas.

Ya con las coordenadas ajustadas, nos bastará con recorrer todas las cartas (que las tenemos en el arreglo) y determinar en cuál de ellas se encuentra el punto con una simple sentencia condicional. A partir de ahi, nuestro algoritmo es el mismo que utilizamos en otros paquetes, como Flash o jQuerys.

Una vez que ya sabemos la carta que fue seleccionada por el usuario, tenemos que proceder a “voltearla”, es decir, pintarla de un color diferente y dibujar el número en ella. Utilizaremos una variable booleana para determinar si es la primer selección del usuario.

El proceso de selección de la segunda carta es muy similar al de la primera, solo que después de seleccionar las cartas, debemos de “voltearlas” antes que decidir si las dos cartas son “iguales”

El proceso de selección de la segunda carta es muy similar al de la  primera, solo que después de seleccionar las cartas, debemos de  “voltearlas” antes que decidir si las dos cartas son “iguales”.

Para terminar esta parte del juego, crearemos un contador de cartas pares encontradas, con lo cual sabremos cuando el juego ha terminado.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivos móviles, procedemos a empaquetarla con Phonegap y a instalarla en un dispositivo móvil para su prueba.

Una vez que tenemos el juego de memoria con números nos será muy sencillo el hacer variaciones sobre el mismo tema... en este caso haremos un juego de memoria con imágenes.

Los últimos ajustes serán al momento de barajar las imágenes y de terminar el juego. Con esto damos por concluida la sección de crear juegos de memoria con CANVAS-HTML 5.

Para concluir el juego, debemos de modificar la información que intercambiamos al azar y verificar la fora en que concluimos el juego. Con ello damos por finalizado la sección de desarrollo de un juego de memoria con el canvas de HTML5.

Una vez que tenemos nuestra sencilla animación en formato fijo, la convertiremos en un formato flexible para que se adapte a los diferentes tamaños de pantalla, o viewport, de los dispositivos móviles.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivosmóviles, procedemos a empaquetarla con Phonegap y a instalarla en un dispositivo móvil para su prueba.

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.

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.

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.

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.

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.

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.

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.

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.

Una vez que tenemos nuestra sencilla animación en formato fijo, la convertiremos en un formato flexible para que se adapte a los diferentes tamaños de pantalla, o viewport, de los dispositivos móviles.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivosmóviles, procedemos a empaquetarlacon Phonegap y a instalarla en un dispositivo móvil para su prueba.

Otro juego clásico es de jugar al "gato" (tiene nombres diferentes el juego, dependiendo el país) entre la computadora y un jugador.

Este juego tiene más código que los anteriores, por lo que necesitamos platicar la lógica, antes de aventurarnos a escribir el código.

Al igual que otros ejercicios que hemos desarrollado, utilizaremos un objeto de tipo JavaScript para las fichas, y un arreglo para contener todos los elementos del juego. Crearemos las variables globales antes de dibujar la grilla del gato.

En este video crearemos la grilla para el juego del "gato" y los objetos para crear las fichas del mismo.

Una vez que sabemos la casilla que fue seleccionada en el tablero del “gato”, tenemos que pintar la “x” en ella y marcar su valor con el valor correspondiente.

Una vez que sabemos la casilla que fue seleccionada en el tablero del “gato”, tenemos que pintar la “x” en ella y marcar su valor con el valor correspondiente.

Iniciar la función que seleccionará la jugada de la máquina

Dentro de nuestro algoritmo de pesos, verificaremos ahora los renglones de la cuadrícula del "gato" para irlo sumando a los pesos totales por  cada casilla.

En este video determinaremos el algoritmo para seleccionar la ficha con mayor peso y decidir la jugada de la computadora.

En este video escribiremos las funciones necesarias para determinar el peso de cada una de las celdas.

En este video verificaremos nuestro código por medio de sus salidas a la consola del navegador.

Ahora verificaremos las columnas de cada una de las casillas con el mismo criterio: encontrar la ficha con l¡mayor peso.

En este video verificaremos las dos diagonales para tener ya los tres caminos: columnas, renglones y diagonales y determinar cuál es la mejor jugada para la máquina.

Una vez que recorrimos la grilla del "gato" en todas direcciones, nos será muy sencillo seleccionar cuál de las casillas debemos de seleccionar: la que tenga mayor peso.

En esta clase terminaremos de armar nuestro juego del gato, determinando si se gana, pierde o empata (gato).

Una vez que tenemos nuestra sencilla animación en formato fijo, la convertiremos en un formato flexible para que se adapte a los diferentes tamaños de pantalla, o viewport, de los dispositivos móviles.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivos móviles, procedemos a empaquetarla con Phonegap y a instalarla en un dispositivo móvil para su prueba.

Un juego que podemos implementar con el Canvas es el clásico juego de Busca Minas que tanto se juega en las PC. Esta aplicación se caracteriza por usar funciones repulsivas, es decir, una función que se llama a si misma varias veces.

En este video escribiremos las variables que nos servirán para controlar el juego. Con mayúsculas escribiremos aquellas variables que nos servirán para suplir los "número básicos" y con la notación "camelCase" aquellas variables que nos servirán para controlar los datos del juego.

Los objetos del juego serán fundamentales , sobre todo aquel con el que controlamos las celdas. También utilizaremos un objeto como “botón”, aunque es perfectamente posible, como lo hemos hecho en otras aplicaciones, el de intercambiar la información del canvas con los botones de HTML.

Ya con las variables y objetos creados, nos será muy sencillo crear la cuadrícula para el juego. También poblaremos al arreglo que contendrá a todos los objetos de tipo celda y nos permitirá manipular fácilmente las jugadas del usuario.

Una vez que contamos con nuestro tablero, el usuario podrá seleccionar cualquiera de las celdas pulsando con el apuntador del ratón. Al igual que los juegos anteriores, tendremos que ajustar las coordenadas y analizar si estas se encuentran dentro de una celda y guardar esta información dentro de variables.

Ahora generaremos, en forma aleatoria, las minas que le dan nombre al juego. Simplemente cambiaremos el valor de la propiedad “minas” y estaremos listos para generar el marcador del juego.

El marcador, aunque sencillo, es muy importante para el juego, y utilizaremos el objeto "bandera" par simular un botón.

Con esta rutina, contaremos las minas que son vecinas de cada celda. Con ello el usuario se guiará para deducir dónde se encuentran las minas.

Este video muestra la codificación de la rutina para "voltear" la celda seleccionada.

Una vez que tenemos la rutina de voltear la celda, tenemos que tomar varias decisiones, como si es una mina y se termina el juego o si sólo quiere marcar la celda el usuario.

Antes de pasar a la rutina "grande" que destapa las celdas en blanco, codificaremos el manejo de la bandera para marcar las celdas.

Para finalizar este juego clásicos, cuando el usuario ha utilizado todas sus marras o ha seleccionado por error una bomba, tenemos que abrir todas las celdas que aun permanezcan ocultas e indicar cuáles bombas marcadas correctamente y cuales bombas estallaron.

Una vez que tenemos nuestra sencilla animación en formato fijo, la convertiremos en un formato flexible para que se adapte a los diferentes tamaños de pantalla, o viewport, de los dispositivos móviles.

Ya que tenemos nuestra aplicación adaptada a los diferentes dispositivos móviles, procedemos a empaquetarla con Phonegap y a instalarla en un  dispositivo móvil para su prueba.