Programmming

Hola, hoy vamos a aprender a hacer un juego fácil para navegadores utilizando html y javascript. Se requieren unos conocimientos mínimos de js para poder entender el código y las funciones que se utilizan.

Para esto vamos a utilizar el framework phaser.io que podéis descargarlo desde la página oficial, donde también tenéis toda la documentación para futuras implementaciones o para entender bien este código.

Podéis descargar el framework en este link: http://www.phaser.io/download

Bueno, vamos a ello:

El primer paso es crear una carpeta donde alojaremos el proyecto, vamos a llamarle flappy-bird.

Dentro de esta carpeta crearemos otras tres carpetas: src, lib y img

Como podéis imaginar en src alojaremos los ficheros javascript, en lib alojaremos los frameworks que utilizaremos y en img las imágenes del juego.

Dentro de la carpeta flappy-bird también crearemos un index.html, dentro de este crearemos un div que será donde aparezca el juego y también donde cargaremos todos los ficheros javascript que compondrán el juego:

Index.html

Bueno, vamos a ir línea por línea:

Para los que no tenéis conocimientos de html atentos a esto porque es importante y os será de mucha utilidad en el futuro, los que entendáis el código podéis saltaros esto:

<!doctype html>: Esta es la forma que tenemos de decirle al navegador que vamos a utilizar html5.

Después se referencia a todos los archivos javascript y por último creamos el div del que ya os había hablado.

Hecho esto vamos a ponernos manos a la obra:

He creado un init.js a la altura del index.html, aquí le diremos al framework phaser io los archivos que tiene que precargar, serán las pantallas del juego (y un par de archivos de precarga) y por donde tiene que empezar.

Vamos a explicar un poco este archivo js:

Primero cogemos las medidas de la pantalla con $(window).width y height. Después creamos la variable juego pasándole las medidas que tomará, el nombre y phaser.CANVAS, podéis buscar en la documentación exactamento lo que hace.

Después añadimos al juego los estados por los que tiene que pasar con 'game.state.add' y por último le decimos a donde tiene que ir cuando acabe de añadir los estados. En este caso Preloader.

En la carpeta /src añadimos preloader.js:

En este estado vamos a precargar las imágenes que queremos mostrar en el juego, con this.load.image('nombre', 'url') y a continuación llamaremos al siguiente estado: Menu

Menu.js:

Bueno aquí es donde empieza la magia, para añadir el fondo de pantalla y que empiece cuando hagas click utilizamos add.button('posición x', 'posición y', imagen(nombre que le pusimos en el preloader), función cuando haces click, contexto)

Al poner 0,0 en posición le decimos que empiece ahi y que ocupe lo que necesite, tenemos una imagen que será el fondo y una función que, al hacer click en la imagen el juego pase al estado Game.

Fácil hasta ahora no?

Pues vamos a complicar un poco la cosa, vamos a hacer la lógica del juego. Creamos el game.js:

Vamos a ir paso por paso, empezamos con la definición de la función y el create, que se encarga de poner los elementos en su sitio añadir la física...

Bueno, paso a paso: Empezando declarando un par de variables, unas mas obvias que otras.

Pipe serán las tuberías, score será la puntuación, pipeheight nos dirá la altura de las tuberías...

Después añadimos el fondo de pantalla, y le pasaremos la función jump (la definiremos más tarde). De esta manera el pájaro saltará cada vez que hagas click.

Ahora vamos a hacer que el pájaro se caiga si no haces click, este framework nos lo pone muy fácil, tan solo tenemos que llamar a this.physics.startSystem(Phaser.Physics.ARCADE); y después this.physics.arcade.enable(bird); bird.body.gravity.y = 1000; lo que hacemos aquí es decirle al juego que el pez tiene peso y que la gravedad hace que caiga 1000px por segundo.

A partir de aquí se crean los grupos de pipes, hacemos que los pipes no se puedan atravesar con enable.body, con createMultiple definimos el número de pipes que se generarán por cada partida (80 es un número muy grande, y hará que el juego vaya un poco lento si vuestro ordenador no es lo suficientemente potente, por último con this.timer = this.time.events.loop(1600, this.addRowOfPipes , this); haremos que se genere una columna de pipes cada 1600ms y con add.text añadiremos la puntuación en la esquina superior izquierda.

Vamos ahora con las funciones(1):

Update : esta función se lanza en cada frame, en cada instante del juego

Primero comprobamos si el pez está dentro de la pantalla, en caso de que no esté llamaremos a la función restartGame que nos llevará a la pantalla de gameOver

Después comprovaremos la posición de la barrera, en caso de que esté por detrás del pájaro sumaremos 1 al contador.

Por último comprobaremos si el pez está chocando con las columnas, si está chocando entonces se lanzará la función restartGame

Jump: moverá el pájaro 350px hacia arriba.

RestartGame: nos llevará a la pantalla de gameover.

AddOnePipe: creará la cantidad de pipes que pusimos en el create (80 en este caso), si se va fuera de la pantalla la eliminamos y le damos una velocidad.

Funciones (II);

AddRowOfPipes: creará una columna y dejará un hueco en una posición aleatoria que será por donde tenga que pasar el pájaro.

GameOver.js

Con lo que hemos visto hasta ahora y si tenéis un mínimo de conocimientos de javascript no necesitaréis nisiquiera una explicación para el gameover.

El funcionamiento es el siguiente. Primero ponemos el fondo de pantalla y cuando haces click empieza el juego otra vez.

Ponemos la puntuación actual y la mejor que la tendremos guardad en una variable local para cada cliente.

Esto es todo, si curioseáis un poco podéis llegar a hacer cosas muy chulas y entretenidas como este juego que he desarrollado: https://play.google.com/store/apps/details?id=com.pumppysolutions.flappyFish

Si queréis más posts como este dadme 5 estrellitas en el juego y jugad mucho.

Webiñas

PD: Esto es una modificación del original, por motivos de tiempo no he podido probar este ejemplo, debería funcionar, cualquier fallo solo comentarlo y lo corregiré encantado

En esta entrada, empezaremos la construcción de un API que nos permita manejar listas con cierta facilidad en Erlang.
En esta primera iteración, implementaremos las funciones de:

Obtener el primer elemento de una lista en Erlang
Obtener la cola de la lista en Erlang
Obtener el tamaño de la lista en Erlang
Invertir una lista en Erlang
Obtener el i-ésimo elemento de una lista

Primero declaramos el módulo y las funciones:

Una vez echo esto, comenzaremos a implementar la función obtener primer elemento de la lista, que mostrará un mensaje de error en caso de que la lista sea la lista vacía.

De igual forma implementaremos obtener la cola de la lista:

Ahora procedemos a implementar la función que obtiene el tamaño de una lista, para ello, si recibimos la lista vacía, la longitud será 0, y en caso contrario la longitud será la longitud de la cola de la lista +1.

Para implementar la función de invertir una lista, recorreremos la lista e iremos concatenando el primer elemento de cada sublista en la cola, de forma que al recorrerla toda, nos quedará la lista invertida.

Por último implementaremos devolver el elemento que se encuentra en una posición determinada, donde el primer elementos se situará en la posición 0, y mostraremos un mensaje de error en caso de que el índice no sea correcto.