JQuery games

Buenas a todos!

Hace unos años cuando quería hacer juegos para que funcionaran en el navegador, la única opción atractiva tanto en rendimiento como en agilidad de desarrollo era Flash, pero requería que los usuarios se instalaran plugins <- Un palo enorme!

Y escribir aplicaciones con javascript implicaba pelearse horas para que funcionaran en todos los navegadores, entonces en 2006 apareció JQUERY! (gracias John Resig!!)

JQuery es un framework que funciona sobre javascript y que simplifica el trabajo sobre documentos html (manipulación del DOM, manejo de eventos, animaciones, AJAX, entre otros). La librería js que voy a mostraros es un plugin de JQuery especializado en el desarrollo de juegos, Gamequery.

Antes de empezar aquí tenéis los enlaces de las dos imágenes que empleo en el tutorial:

background_stars.jpg

bot.png

JQuery GAMES: incluir librería GameQuery

Para empezar tenemos que descargarnos de http://gamequery.onaluf.org/ el .js de la librería, y incluirlo en nuestro proyecto, en caso de que no queramos alojar directamente el .js en nuestro servidor, direccionaremos al que está en http://gamequery.onaluf.org/download/jquery.gamequery-0.5.1.js

Como este game engine es un plugin de JQuery, también tenemos que agregar el .js de Jquery:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

<script type='text/javascript' src="http://gamequery.onaluf.org/download/jquery.gamequery-0.5.0.js"></script>

Una vez incluidos los .js, ya podemos empezar a programar el juego!

JQuery GAMES: Playground

El "playground" es el espacio de la página donde se mostrará nuestro juego.

Mediante propiedades css, defino el ancho y el alto, que en el ejemplo será de 600x350:

No hace falta decir que esto va dentro del documento html!!

<div id="playground" style="position:relative; float:left; width: 600px; height: 350px; background: black;"></div>

JQuery GAMES: Main function

Todos los recursos (imágenes de fondo, sprites, sonidos, etc) y la declaración de las funciones del juego, serán cargadas al entrar en la página.

Para conseguir esto empleo la función de JQuery:

$(window).load(function(){...aquí la chicha!...});

Esta función se ejecuta cuando la página se ha cargado completamente, es decir, cuando se han cargado todos los frames, objetos e imágenes.

Y es dentro de esta función donde definiremos la Main Function del juego!

La estructura que voy a emplear para el ejemplo es la siguiente:

$(window).load(function(){




//DECLARACIÓN DE CONSTANTES

//DECLARACIÓN DE VARIABLES




//MAIN FUNCTION//

$(function(){

//CARGA DE IMÁGENES

//CONFIGURACION DEL PLAYGROUND

//INICIALIZACIÓN DE LAS CAPAS DEL PLAYGROUND

//DEFINICIÓN DE LAS CALLBACK FUNCTIONS

//INICIAR EL JUEGO : $.playground().startGame();

});

});

JQuery GAMES: Carga de imágenes y configuración del Playground

El playground se divide en capas, que en gameQuery se llaman "Groups".

En los groups es donde introduciremos los sprites.

Un group puede contener uno o más groups y estos a su vez pueden contener más groups.

De esta forma organizamos como se mostraran los sprites en la pantalla.

En este tutorial la estructura del playground será la siguiente:

En el apartado de declaración de constantes definimos el ancho y alto que tendrá el playground:

var PLAYGROUND_WIDTH = 600;

var PLAYGROUND_HEIGHT = 350;

Y justo debajo en el apartado de definición de variables definimos la variable que contendrá la imagen del background y la variable que contendrá el sprite del bot.

var background1;

var botAnimation = new Array();

¿Porqué un array para el sprite del bot?

La razón es porqué es probable que nuestro personaje tenga varios estados diferentes durante el juego, entonces almacenaremos las diferentes animaciones (sprites) en los distintos índices del array.

En este primer tutorial solamente emplearemos un sprite.

Una vez definidas las variables que almacenan las animaciones, las cargaremos al empezar la Main Function:

//CARGA DE IMÁGENES

background1 = new $.gameQuery.Animation({

imageURL: "background_stars.jpg"});




botAnimation["normal"] = new $.gameQuery.Animation({imageURL: "bot.png"});

Una vez cargadas las imágenes tenemos que configurar el escenario de Juego el Playground!!

Indicándole el alto y ancho que tendrá, para ello usaremos las constantes definidas anteriormente:

//CONFIGURACION DEL PLAYGROUND

$("#playground").playground({

height: PLAYGROUND_HEIGHT,

width: PLAYGROUND_WIDTH,

keyTracker: true});

Hecho esto, todo está preparado para que organicemos la escena en groups y añadamos cada sprite correspondiente al group que le toca:

//INICIALIZACION DE LAS CAPAS DEL PLAYGROUND

$.playground()

.addGroup("background", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

.addSprite("background1", {animation: background1, width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

.end()

.addGroup("botLayer", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT}) .addGroup("bot",{posx: 270, posy: 130, width: 53, height: 62})

.addSprite("botNormal", {animation: botAnimation["normal"], posx: 0, posy: 0, width: 53, height: 62});

Al añadir un grupo indicamos el nombre del grupo y sus dimensiones:

addGroup("background", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

Seguidamente o bien añadimos nuevos grupos dentro de este, o bien añadimos un sprite, en este caso se añade el sprite que corresponde con la imagen de background:

.addSprite("background1", {animation: background1, width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

En el campo "animation" indicamos la variable que contiene la imagen que hemos cargado previamente.

La función .end() indica que hemos acabado de insertar grupos o sprites dentro de un grupo determinado, y podemos añadir seguidamente otro grupo al mismo nivel que el anterior.

Los grupos que añadimos seguidamente, se verán en la escena encima de los anteriores.

Por ejemplo:

groupA.groupA1.end.groupA2.end.end.groupB.groupB1

Una secuencia de este tipo mostrará primero lo que contenga el grupo B sobre lo que contenga el grupo A. Y del grupo A, primero se mostrará lo que contenga el grupo A2 sobre el grupo A1.

JQuery GAMES: Start Game!!

Con las imágenes cargadas y el playground configurado, ya podemos mostrar algo por pantalla!! wuahha!

Solamente tenemos que llamar dentro del Main Function a la función startGame(), de la siguiente forma:

$.playground().startGame();

Ahora solamente veríamos:

Falta un poco de movimiento no?

JQuery GAMES: Añadiendo movimiento a la escena, las Callback functions

Para controlar el gameplay, la lógica de juego, tenemos que procesar información y realizar operaciones antes de mostrar cada nuevo fotograma del juego.

Lo primero que tenemos que decidir es el REFRESH_RATE, es decir, los fotogramas por segundo. En nuestro caso emplearemos 30fps.

Así que añadimos una nueva constante:

var REFRESH_RATE = 30;

Una vez declarada, vamos a incluir al playground una Callback function, esta función es la que se ejecutará 30 veces por segundo. Y se incluirá en el apartado //CALLBACK FUNCTIONS de la Main Function.

Su sintaxis es la siguiente:

$.playground().registerCallback(function(){

.... código que se ejecutará 30 veces por segundo ....
}, REFRESH_RATE);

Ahora vamos a mover al bot!

Como quiero que vaya de un lado para otro, he añadido una variable en el apartado de declaración de variables, llamado direction, si es uno va hacia la izquierda, si es 0 hacia la derecha:

var direction = 1;

Ahora en la callback function añadimos el siguiente código:

$.playground().registerCallback(function(){

var pos = parseInt($("#bot").css("left"));

if(direction == 1){

var nextpos = pos-8;

if(nextpos>50){

$("#bot").css("left", ""+nextpos+"px");

}else{

direction = 0;

}

}else if(direction == 0){

var nextpos = pos+8;

if(nextpos<500){

$("#bot").css("left", ""+nextpos+"px");

}else{

direction = 1;

}

}

}, REFRESH_RATE);

Como podemos ver, el movimiento lo hacemos simplemente alterando la propiedad css left, del group "bot", que a su vez contiene el sprite "botNormal". Así pues desplazamos todo el grupo con su contenido.

Esto es todo, espero que os sea útil!

En este enlace podéis ver el ejemplo:

http://iwokloco-appweb.blogspot.com/p/jquery-games-example-1.html

En el siguiente tutorial explicaré:

- Añadir sprites dinámicamente a un group.

- Capturar eventos del mouse con Jquery.

- Mover todos los sprites de una misma clase css.

- Detectar colisiones entre sprites.

- Eliminar sprites de un group.