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.
<meta
charset='utf-8'>: Aquí le decimos la codificación de caracteres
que vamos a utilizar en el html
<meta
name="viewport"........> Esta línea es muy importante
para el desarrollo de cualquier tipo de página web, hace que la
página se adapte al tamaño del dispositivo desde el que se está
navegando. OJO no es una línea mágica que hace la página
responsive, simplemente adapta la página al tamaño del dispositivo.
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.
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
No hay comentarios:
Publicar un comentario