AJAX, fundamentos y aplicaciones

Captulo 6:
El poder de AJAX: Documentacin
6.1 Descripcin del captulo
El captulo actual recoge y explica simplificadamente los diferentes problemas que surgieron en el diseo y la implementacin de El Poder de AJAX, antes de leerlo sera bueno que jugaras un poco. Aqu tienes un guin de las cosas que vamos a aprender sobre el juego, que nos introducir en toda la problemtica de programar entornos interactivos con unas necesidades extremas ya que se hacen una gran cantidad de peticiones asncronas adems de cargar al navegador con una intensidad de clculos y tratamiento dinmico que para l no es normal. Se ha intentado que el orden en que se ven las cosas permita un aprendizaje lo ms natural posible, se evitar a toda costa intentar ensear las ideas con el cdigo, para eso est ya el juego de ejemplo muy comentado pero complejo, lo mas recomendable sera leer cada seccin y luego la parte de cdigo asociado si es que al lector le interesa (se comentar el archivo donde se encuentra y el nombre de las funciones), ya que ser en ese momento cuando lo ver ms fcil, aun as no desesperes si te cuesta comprenderlo, los juegos son muy complejos, usan una gran cantidad de ideas que no son tuyas, hace falta estudiarlos con tranquilidad durante algn tiempo para entenderlos, adems, este, est hecho por un novato que ha resuelto todos estos problemas por su cuenta, porque quera hacerlo y disfrutaba con ello. Parte offline del juego Introduccin. Los juegos ms interactivos son solo bucles y banderas (Flags). Representacin grfica en HTML, la necesidad de generar y destruir cdigo. Paso de parmetros en Javascript, la necesidad de emplear variables globales. Los eventos y el DOM, debemos conocer algunos. Leer del teclado para hacer los controles. Algoritmos de control. Algoritmos de colisiones basados en hojas de estilo y optimizarlos. Propiedades que deben cumplir los grficos para el juego. Precarga de imgenes. Precarga de sonido. Cuadros de informacin: vida, objetos, mapa y consola. Sistema de batalla y golpes. Parte online del juego Disear la base de datos dependiendo de las necesidades del juego. La I.A. de los enemigos, los debe mover el servidor para evitar trampas. Los objetos deben ser asignados por el servidor para evitar trampas. El dao de un jugador a otro debe de ser notificado por el que se ve golpeado. El cambio de pantalla debe ser notificado y aceptado antes de realizarlo. Actualizar la posicin del jugador. Actualizar objetos al cogerlos (Asncronamnete). A fondo El archivo servidor.jsp. El archivo calculosColisiones.js. Requisitos del sistema y conexin Gran consumo de memoria y CPU por parte de los navegadores. Necesidades de conexin.

- 99 -

AJAX, fundamentos y aplicaciones

6.2 Parte offline del juego

Se ha separado en dos partes las diferentes cosas que se van a ensear por dos motivos, el primero es que para hacer un juego en un entorno Web no necesita necesariamente que sea multijugador o Online. El segundo motivo fue que el juego de ejemplo en principio fue diseado offline y la parte online se aadi cuando se llevaban partes de su desarrollo, realmente la parte de diseo online no estaba completada cuando se comenz a programar pero se pens en un diseo lo suficientemente escalable como para que no hubiera demasiados problemas, y no los hubo. El juego comenz siendo offline para probar la capacidad del entorno Web actual de los navegadores ms punteros y ver si era realizable en una cantidad de tiempo viable, unas 120-130 horas. Mientras que hablemos de la parte offline del juego nos sumergiremos en los problemas propios de querer representar las cosas en una pgina Web, haciendo uso de las hojas de estilo, tambin veremos lo bonito que es Javascript, algunas veces lo adoraremos, muchas veces lo odiaremos, y por supuesto no olvidaremos que buscamos una compatibilidad muy alta entre navegadores, a da de hoy el juego funciona perfectamente en Mozilla 1.5, 2.0 y I.E.7, no se han probado mas navegadores durante la parte de desarrollo para no alargarla mas.

6.2.1

Los juegos ms interactivos son solo bucles y banderas (Flags)

Existen muchos tipos de juegos, si los encapsulamos en 2 grandes grupos tenemos los que se juegan por turnos (los de tablero) y los que se juegan en tiempo real, normalmente los que se juegan en tiempo real son ms complejos, como es el caso que nos ocupa, y tienen unos requerimientos de tiempo de respuesta alto en contrapartida a los de tablero en los que esperas a que mueva el otro jugador o la mquina. Los de tablero no son ningn problema en un entorno Web y el hacerlos multijugador ahora con AJAX tampoco, en cambio los de tiempo real son un problema GORDO. En nuestro caso tenemos un problema GORDO, pero no importa, en cualquier caso los juegos son bucles, unos ms complejos que otros, pero bucles: Ejemplo(bucle principal de broma): while(jugando) { moverJugador(); calcularColisiones(); } Primero se mueve el jugador y luego se calculan las colisiones, las restricciones de movimiento y de las colisiones se deciden mediante Banderas (flags). Lo que aade de complejo un juego como el que vamos a disear son las banderas, vamos a tener unas cuantas, por no decir muchas, normalmente se utilizan para evitar rebotes. Definicin rebote o repeticin: Una accin que debera ocurrir una vez, pero se repite indefinidamente al no haber cortado la posibilidad de que ocurra otra vez mientras ocurre. Ejemplo: Un enemigo me golpea, mientras que dure la animacin del golpe el enemigo no puede volver a golpear al jugador, en otro caso este morira instantneamente ya que habran repeticiones, esto se arregla rpidamente de la siguiente manera, miramos el seudo cdigo. if(colision(jugador,enemigo01) && !jugadorGolpeado) { jugadorGolpeado = true; //Cuando comienza la accin se activa. jugador.vida--; animacionGolpeado(jugador); }

- 100 -

AJAX, fundamentos y aplicaciones

animacionGolpeado(objeto) { cambiarAnimacion(jugador,golpe); moverGolpe(jugador); esperar(500); //En milisegundos jugadorGolpeado=false; //Cuando termina la accin se desactiva. } En este caso jugadorGolpeado es una bandera, bueno si estamos haciendo un juego como el que nos ocupa, vamos a tener muchas, para muchas cosas, no son ms que variables booleanas globales, esta idea es sencilla. Un esquema del funcionamiento del bucle principal es el siguiente:

- 101 -

AJAX, fundamentos y aplicaciones

BUCLE PRINCIPAL

NO SI JUGAR

SI

SI MOVIMIENTO_JUGA_PERMITIDO Y !JUGADOR_MUERTO

NO

SI

MOVIMIENTO JUGADOR

SI !JUGADOR_MUERTO Y !JUGADOR_GOLPEADO

NO

SI

CLCULO COLISIONES OBJETOS TOCABLES

ESPERAR "X" SEGUNDOS

FLAGS USADOS(VARIABLES BOOLEANAS GLOBALES QUE ACTIVAN Y DESACTIVAN ACCIONES POSIBLES): JUGANDO:ACTIVADO CUANDO DEBE GIRAR EL BUCLE, CUANDO NO ES ESTA CAMBIAND DE PANTALLA, ETC... MOVIMIENTO JUGADOR PERMITIDO: ACTIVADO SI EL JUGADOR PUEDE MOVERSE, NO ESTA SIENDO GOLPEADO, ETC... JUGADOR MUERTO: ACTIVADO CUANDO EL JUGADOR MUERE JUGADOR GOLPEADO: ACTIVADO MIENTRAS DURA UN GOLPE, PARA EVITAR REBOTES.

Figura 6.1 Bucle principal

6.2.2

Representacin grfica en HTML, la necesidad de generar y destruir cdigo

Creo que no hace falta explicar que cuando hacemos una pgina Web, si queremos mostrar un dibujo, debemos emplear la etiqueta correspondiente, pero cmo lo quitamos sobre la marcha?, cmo lo volvemos a poner?

- 102 -

AJAX, fundamentos y aplicaciones

Tenemos 2 opciones, la propiedad innerHTML que tienen etiquetas como la div, o podemos utilizar las funciones del DOM. Veamos lo bueno y lo malo de cada una para esto: innerHTML : Es fcil, basta con hacer algo como innerHTML = innerHTML + nuevo, en contrapartida realmente estamos sobrescribiendo completamente lo anterior y aunque parezca una tontera no lo es, ya que se cambia el rbol en memoria podemos decir adis a los punteros que hayamos creado y deberemos recalcularlos, si solo tenemos un par y solo cambian bajo ciertas condiciones es una buena opcin ya que volver a buscar un par de elementos por etiqueta de vez en cuando no es costoso, pero si pretendemos realizar 1600 bsquedas por segundo olvidmoslo. DOM : Tenemos que saber hacer buen uso de las funciones lo que lo hace mas complejo, pero no es tan difcil, realmente se puede llegar a utilizar de forma bastante mecnica y es la mejor opcin para destruir una etiqueta y con ello el pedazo de cdigo que contenga, este pedazo de cdigo puede ser perfectamente una imagen o cualquier elemento html al que le podamos poner un id. Justamente en el juego de ejemplo se utiliza mucho el innerHTML para crear y el DOM para destruir, cuando se crea o destruye un objeto, algo que no es muy usual, el puntero que apunta al jugador se recalcula, podramos crear las cosas haciendo uso de las funciones del DOM y que no fuera necesario esto? , la respuesta es tal vez, seguramente NO, si vamos a insertar pedazos de cdigo de 4 o 5 lneas ya es MUY ENGORROSO usar las funciones del DOM, por lo cual insertaremos mucho cdigo A SACO y que el navegador se preocupe de crear el rbol de objetos. Ejemplo destruir usando el DOM de la divisin pantalla: function borrarObjetoPantalla(nombreID) { var borrarNodo = document.getElementById(nombreID); var PadreNodo = document.getElementById("pantalla"); PadreNodo.removeChild(borrarNodo); } Como vemos es muy simple, no tenemos ms que coger el objeto que debe tener un identificador, coger al padre con otro identificador, y decirle al padre que borre al hijo. Ejemplo de crear (solo parte del cdigo); document.getElementById("pantalla").innerHTML= document.getElementById("pantalla").innerHTML + "<table id=\""+nombre+"\" class=\""+tipoObjeto+"\" style=\"border: none ; position: absolute; left: "+posicionLeft+"px; top: "+posicionTop+"px; width: "+ancho+"px; height: "+alto+"px;\">"+ "<tr><td id=\"cajon"+nombre+"\" class=\"cajonObjetoCogible\"></td></tr>"+ "</table>"; Es muy difcil leerlo en un libro, mejor mira los archivos constructorObjetos.js ya que todos ellos insertan cdigo y no te desesperes si no lo entiendes todo ya que no ests preparado, pero se ve que estamos aadiendo cdigo que rellena los valores de las propiedades usando variables, te imaginas crear eso usando el DOM, si fuera mas rpido merecera la pena, pero si creamos un objeto de vez en cuando no es realmente necesario, no hace falta decir que cada objeto que tengamos debe tener un identificador nico, si no, no tenemos forma de buscarlo luego.

6.2.3

Paso de parmetros en Javascript, la necesidad de emplear variables globales

Entre las cosas graciosas que tiene Javascript el paso de parmetros es de las mejores, las variables solo se pasan por valor y los objetos solo por referencia, tenlo en cuenta a la hora de disear las funciones, la verdad es que podras crear un objeto y meterlo dentro una cadena, pero muchas veces es una tontera ya

- 103 -

AJAX, fundamentos y aplicaciones

que si la variable va a ser reutilizada reiteradamente 20000 por segundo en un par de funciones lo mejor es hacerla global ya que el objeto lo sera tambin. Otra cosa importante a tener en cuenta es que si son globales, ni se crean ni tampoco se destruyen, simplemente existen, de manera que ganamos mucha eficiencia si las creamos al empezar y las dejamos esperando a que sean necesarias. Esto es especialmente recomendable en las funciones de clculo de colisiones ya que estas operaciones son crticas y se deben realizar una cantidad aceptable de veces por segundo de forma rpida, de manera que no se crearan nuevas variables dentro de estas funciones, se usarn las que ya hay. Este problema no existe con los objetos ya que se pasan por referencia, algn listillo puede pensar que crear y destruir un objeto es una operacin mas costosa que una variable, pero como ya hemos dicho, los objetos se crean y destruyen de vez en cuando, en cambio las variables que se usan en los clculos de colisiones lo hacen 8variables*60iteraciones*3pixelesPorIteracion*numObjetos=1440*numObjetos por segundo, creo que con 5 objetos en la pantalla, ya sera bastante pesado, en cambio crear 5 objetos NO!! .

6.2.4

Los eventos y el DOM, debemos de conocer algunos

Como en cualquier cosa, cuanto ms conocimiento tengas de ello, ms fcilmente hars exactamente lo que deseas. No hace falta tener un conocimiento extremadamente alto del rbol del DOM realmente, pero el suficiente para que las operaciones que hagas sean compatibles con la mayora de los navegadores, por ejemplo, si queremos coger un dato de un documento XML lo suyo sera llegar hasta un nodo hoja y coger el valor de nodevalue que es ms estndar, si lo cogemos de nodetext no funcionar en Internet Explorer que no genera esa propiedad, etc. Sobre los eventos, realmente en el juego se hace un uso justo de ellos, para leer el teclado y para saber cundo est cargado el juego, porque no querrs que el jugador intente ponerse a jugar cuando el navegador todava est cargando y empiece a generar errores.

6.2.5

Leer del teclado para hacer los controles

sta es a da de hoy, tal vez, la incompatibilidad entre navegadores ms grande, ya que entre los dos ms usados Mozilla Firefox e Internet Explorer se hace de forma totalmente diferente. Esto es un juego, as que queremos coger todas las pulsaciones de teclas, las que sean tiles harn algo, las que no simplemente se desestimarn, pero necesitamos un manejador que las coja todas porque as funciona Javascript, eso lo hacemos con el siguiente pedazo de cdigo: document.onkeydown = jugadorPulsaTecla; document.onkeyup = jugadorDesPulsaTecla; Lo que asignamos es el nombre de la funcin a la que se llamar, y la funcin debe ser algo as: var arriba = 38; //FLECHA ARRIBA var abajo = 40; //FLECHA ABAJO var izquierda = 37; //FLECHA IZQUIERDA var derecha = 39; //FLECHA DERECHA var ataque = 65; //TECLA "A" function jugadorPulsaTecla(evento) { if(!evento) { var tecla=window.event.keyCode; //Internet Explorer } else { var tecla=evento.which; //Mozilla Firefox

- 104 -

AJAX, fundamentos y aplicaciones

} switch(tecla) { case arriba: teclaArribaPulsada = true; break; . . . } } Como puedes ver Mozilla Firefox mete por defecto en esta funcin el objeto event que contiene los datos del evento, en cambio Internet Explorer no, y hay que mirarlo en su DOM que contiene el objeto pero que no tiene Mozilla Firefox. Del ejemplo se han quitado las banderas, s, hasta esta funcin las tiene, para evitar que se cojan eventos de movimiento cuando por ejemplo, el juego no ha terminado de cargar y para algunas cosas del sistema de batalla. Si quieres saber mas consulta el archivo controladoresEventos.js de las libreras del juego, por ltimo recordar que leeremos las teclas solamente si la ventana del navegador es la activa en ese momento, si tenemos el navegador en segundo plano esto no ocurrir como es normal, ya que estamos programando sobre el.

6.2.6

Algoritmos de control

Este puede ser muy sencillo o muy complejo dependiendo de las necesidades que tenemos, cuntas ms cosas haga nuestro personaje, ms animado este, etc., pues nos dar ms problemas. Como pauta bsica la funcin que controle el movimiento no se debe hallar introducida en los controladores de eventos de teclado, primero porque son cosas diferentes y si enguarramos los eventos tendremos problemas ms tarde, segundo porque no conseguiremos un control tan fluido y nos dar problemas. Los controladores de eventos de teclado dependen de las interrupciones, si nuestro PC repite las teclas porque lo tenemos configurado para ello, es decir, dejo pulsadoooooooooooooo la tecla o y escribe un montn, entonces con mantener pulsada una tecla de movimiento el efecto sera el mismo, en cambio si solo escribe una, el personaje dara un paso y se quedara en el sitio, nuestro control no debe depender de esto. Para no depender de esto si se pulsa la tecla arriba debe haber una bandera que ponga teclaArribaPulsada = true y si se despulsa la tecla se pondr a false, esto se hace en los manejadores pero mover el personaje NO!! Ahora haremos otra funcin que mover el jugador en una direccin u otra dependiendo de las banderas, en el juego el control es en 8 direcciones, es decir, se permiten las diagonales, esto es posible precisamente gracias a las banderas ya que puede haber ms de una true, en cambio los eventos de teclado son 1 por tecla y no se podra hacer. Las diagonales que son 2 teclas se miran primero, antes de las teclas por separado si no nunca llegaras a moverte en diagonal, el orden tambin es importante, como ves hay que echarle mucha imaginacin, esto es un problema de los videojuegos pero nos vendr bien la experiencia para tener ideas en el futuro. Ahora si te interesa podras echarle un vistazo al archivo movimientoJugador.js, es muy complejo ahora mismo todava, veras un montn de banderas desconocidas pero con nombres muy obvios, como son las de los muros, por ms que quieras moverte a la derecha, si hay un muro en ese lado no se entrar en el bucle, adems aqu dentro es donde se cambia la animacin ya que sta depende del movimiento del personaje en nuestro caso y hay una funcin para ello, un esquema de lo que se hace en el archivo algo simplificado es el siguiente:

- 105 -

AJAX, fundamentos y aplicaciones

BUCLE DE MOVIMIENTO GENRICO DEL JUGADOR

NOTA:PRIMERO SE MIRAN LAS DIAGONALES PARA EVITAR REBOTES. NO TIENE EL JUGADOR PULSADA "X" DIRECCIN/ES?

SI INFO: LAS VARIABLES DE MURO SON GLOBALES Y SE RECALCULAN SIEMPRE QUE EL PERSONAJE SE MUEVE YA SEA POR MANDATO DEL JUGADOR O POR ALGN AGENTE EXTERNO. NOTA:SE CALCULAN EN LAS COLISIONES. SI HAY UN MURO?

NO I= 0

NOTA:SE CALCULAN LOS MUROS CADA VEZ QUE TE MUEVES 1 PIXEL PARA QUE NO LOS ATRAVIESES. MOVER 1 PIXEL MIENTRAS "I"< NUMPIXELES Y !MURO_EN_ESA_DIRECCIN NO SI CALCULAR COLISIN MUROS

I++

FIN

COSAS QUE AADIR AL ALGORITMO ANTERIOR QUE TIENE EL FINAL: 1.PUNTO DE VISTA DEL PERSONAJE, CAMBIARLO Y BLOQUEARLO BAJO CIERTAS CIRCUNSTANCIAS. 2.SE ENTRE FORZADAMENTE CON EL PERSONAJE PARADO PARA REFRESCAR LA IMAGEN DEBIDO A CIERTAS CIRCUNSANCIAS QUE LO NECESITARAN. PUNTOS FUERTES: 1.SOLO ES PESADO SI EL PERSONAJE SE MUEVE. 2.MOVIMIENTO EN 8 DIRECCIONES, SI EL MOVIMIENTO SE DISPARARA POR UNA INTERRUPCIN NO SERA POSIBLE. 3.EL MOVIMIENTO ES SUAVE Y EL JUGADOR SE MUEVE AL RITMO DEL JUEGO. PUNTOS DBILES: 1. ES COMPLEJO.

Figura 6.2 Bucle de movimiento

6.2.7 Algoritmos de colisiones basados en hojas de estilo y optimizarlos

Justamente aqu comenz el juego, echndole un vistazo a las propiedades de estilo que puede tener un objeto encontramos lo siguiente.

- 106 -

AJAX, fundamentos y aplicaciones

Objeto padre. top

Objeto hijo. left height width

Figura 6.3 Propiedades de estilo de las tablas El hijo tiene 4 propiedades muy interesantes, left, top, width, height: left: Desplazamiento absoluto por la izquierda respecto al padre(que ser la pantalla). top: Desplazamiento absoluto por arriba respecto al padre(que ser la pantalla). width: Anchura absoluta del objeto. height; Altura absoluta del objeto. Podramos decir que las 4 esquinas son, (left,top), (left+width,top), (left,top+height) y (left+width,top+height), si tenemos esto tenemos los cuatro lados y si algn objeto rectangular ha metido una de sus esquinas dentro de otro objeto rectangular (ya sea el primer objeto o el segundo como veremos), ha colisionado con l, no hay truco posible ni falla en ello. Esta idea es simple, pero nos va a obligar a que todos los objetos que tiene nuestro juego estn contenidos en rectngulos, con el alto y ancho que nos apetezca, por supuesto lo que hagamos intentaremos que quede lo mas apretado posible, de esta manera el aspecto quedar muy natural y no se notar.

Figura 6.4 Frames de animacin del juego Esto se lleva haciendo mucho tiempo en los Game Makers 2D, de esta manera se ahorra mucho trabajo ya que la gente puede compartir sus recursos. En estos entornos, los scripts suelen ser tambin interpretados y los grficos contenidos en archivos de poco peso como es el caso de javascript y los entornos Web. Nosotros tambin podremos aprovechar algunos recursos, tendremos que adaptarlos a lo que estamos haciendo pero ya no tendremos que pintar nada, tenemos muchos escenarios y personajes de libre distribucin, hechos por fans y que podremos usar sin infringir ningn copyright. En el juego de ejemplo se han dividido las colisiones en 3 tipos diferentes: El jugador con la pantalla: sta no se puede atravesar y se comprueba cada vez que el jugador se mueve 1 pxel. El jugador contra los muros: Estos no se pueden atravesar y se comprueba cada vez que el jugador se mueve 1 pxel. El jugador contra los objetos: Estos se pueden atravesar un poco ya que disparan una accin, se comprobarn 1 vez por iteracin del bucle principal, en una iteracin el jugador se puede mover como mximo 3 pxeles que es el paso por defecto.

- 107 -

AJAX, fundamentos y aplicaciones

La pantalla podran ser 4 muros la verdad, pero es mas rpido tratarla como tal, es una colisin de dentro de un objeto la pantalla hacia fuera, ya que intentamos salirnos de ella.

De dentro hacia fuera es imposible colisionar con otro lado que no sea el mismo, si son 2 rectangulos

Figura 6.5 Colisin interna de rectngulos

Posibles Colisiones: Lado de arriba del jugador con el lado de arriba de la pantalla. Lado izquierdo del jugador con el lado izquierdo de la pantalla. Lado derecho del jugador con el lado derecho de la pantalla. Lado abajo del jugador con el lado de abajo de la pantalla. No tiene sentido comprobar otras, porque no ocurrirn, como el jugador nunca va a salir de la pantalla no puede colisionar su lado derecho con el lado izquierdo de sta, etc. Los muros, son objetos rectangulares que podemos pintar cuando estemos haciendo el juego pero que luego dejaremos invisibles y colocaremos un dibujo de fondo con los arbolitos, la mazmorra o lo que sea de lo que vaya el juego, en nuestro juego tenemos bosque, cueva y un castillo.

Siempre colisionaremos con el lado contrario si son colisiones externas entre 2 rectngulos.

Figura 6.6 Colisin externa de rectngulos Posibles colisiones: Lado de arriba del jugador con el lado de abajo del muro. Lado de abajo del jugador con el lado de arriba del muro. Lado izquierdo del jugador con el lado derecho el muro. Lado derecho del jugador con el lado izquierdo del muro. Con los objetos es exactamente igual, solo que como es un desperdicio de recursos comprobar unas colisiones que no generan ninguna bandera de muro, ya que normalmente los objetos nada ms tocarlos se cogen, el que los atravesemos un par de pxeles no importa, con esto dicho solo comprobaremos sus

- 108 -

AJAX, fundamentos y aplicaciones

colisiones 1 vez por iteracin del bucle principal, pero solo comprobaremos si colisionan, no como los muros que adems de comprobarlo tenemos que saber qu lado colision para activar la bandera de muro correspondiente; esto con los objetos da igual y en caso de que el objeto no se deba atravesar, por ejemplo un cofre o una puerta, el objeto contendr un muro, pero una moneda que se coge o un corazn no necesita esto, debemos recordar que los objetos y los muros son cosas diferentes, pero que un objeto puede contener un muro. Preparando los objetos para el algoritmo Llegado este punto debemos recordar que tenemos objetos mviles e inmviles, destruibles e inmortales, tenemos que decidir la estructura que tendrn los objetos para poder acceder a los datos con nuestro algoritmo de colisiones. Clasificacin 1: Mviles: Jugador, enemigos. Inmviles: Pantalla, muros, objetos (monedas, cofres, puertas, etc...). Clasificacin 2: Destruibles: enemigos y objetos (monedas, cofres, puertas, etc...). Inmortales: jugador, muros y pantalla. En el juego de ejemplo se decidi que como las colisiones dependen de si el objeto era la pantalla, muro u otro objeto habra 2 arrays y 2 objetos globales que existen siempre, de una pantalla a otra pueden variar los muros pero no el jugador y la pantalla. Arrays Globales de objetos que cambian en cada pantalla: ArrayMuros: Los objetos inmviles e Inmortales. (Solo muros). ArrayObjetos: Los objetos destruibles. (Enemigos, monedas, puertas, etc.) Objetos que existen siempre: Jugador: Como nunca cambia tiene un puntero que apunta a su objeto DOM (optimizacin), esta optimizacin ayuda muchsimo a la hora de actualizar sus datos porque es un objeto mvil, los enemigos no lo tienen ya que si cambia el rbol del DOM debido a que insertamos cdigo y hay que coger otra vez los punteros seria un poco ms complejo, no mucho pero con las optimizaciones que hacemos ya funciona correctamente, se puede optimizar ms pero con un coste de tiempo que en este caso no es aceptable ya que apenas mejora el rendimiento. Pantalla: Como nunca cambia hay 4 variables, una por cada lado, que contienen su posicin aunque se podran poner como constantes. Ya sabemos que tenemos estos 2 arrays y 2 objetos, qu estructura tienen, depende de sus necesidades y acciones que pueden realizar pero para calcular las colisiones hay 4 propiedades que van a tener siempre y que son las 4 para calcular sus esquinas o lados (LA MEJOR OPTIMIZACIN), queda prohibido buscar DOM para mirar sus propiedades, solo para realizar cambios. En el caso de los muros que nunca cambian de posicin y del resto de objetos inmviles, como nunca tenemos que buscar en el DOM dividimos entre 6 y 8 el tiempo necesario para realizar las operaciones; es decir, si antes conseguamos dar 10 vueltas al bucle principal en 1 segundo, ahora conseguimos dar 60, con el consiguiente aumento de rendimiento y por fin es posible realizar nuestro juego en javascript y que funcione en un ordenador medio. En el caso del objeto jugador miramos sus propiedades y solo accedemos al DOM con un puntero para hacer cambios, pero nunca para leer, ya que cuando hacemos un cambio en el DOM, tambin lo hacemos en sus propiedades. En el caso de los enemigos miramos sus propiedades y slo accedemos al DOM para hacer cambios, buscando el enemigo por nombre (la operacin ms costosa que utilizamos). El algoritmo: Slo se calculan las colisiones del jugador con el resto de objetos, los otros jugadores hacen lo mismo, y no hace falta calcular las colisiones de los enemigos con los muros ya que su movimiento se volvera mas

- 109 -

AJAX, fundamentos y aplicaciones

complejo y con que corran hacia el jugador es suficiente en nuestro juego ya que el que no tengan otros clculos de colisiones en la inmensa mayora de las ocasiones ni se notar (si el jugador no atraviesa muros y los enemigos siguen al jugador, los enemigos no atravesarn muros tampoco en la mayora de ocasiones). Tenemos 3 algoritmos y 2 manejadores de algoritmos que los llaman: Un manejador que se encarga de la pantalla y los muros: 1. Accede a la funcin de colisiones para la pantalla. 2. Recorre el array de muros y los mete uno por uno en la funcin de colisiones para los muros junto con el jugador. Un manejador que se encarga de los objetos creables y destruibles: 1. Recorre el array de objetos y los mete uno por uno en la funcin de colisiones para los objetos con el jugador (la segunda funcin ms difcil de leer del juego). Todo lo anterior se encuentra en el archivo calculosColisiones.js.

6.2.8

Propiedades que deben cumplir los grficos para el juego

Sobre los grficos de los objetos Todos los elementos grficos del juego con los que se detectan colisiones deben tener un tamao estable, es decir, desde que se crean hasta que se destruyen el rectngulo (tabla HTML) que los encierra debe tener el mismo tamao, todo esto lo hacemos con las hojas de estilo, incluso si el jugador o un enemigo utiliza imgenes un par de pxeles ms grande en alguna ocasin para algn movimiento, la tabla no cambia de tamao y corta las imgenes si es necesario; si esto no ocurriera as, si dejramos que el tamao fuera variable, los clculos de colisiones que hay hechos podran fallar y habra algn truco mediante el cual el jugador podra atravesar los muros, se ha comprobado y ocurre as. Este problema se podra solucionar?, despus de cambiar una imagen de tamao, habra que ver si ha atravesado un muro y moverla en sentido opuesto hasta que no lo atravesara, solucionado esto se devolvera el control al jugador, esto se tarda en hacer un par de milisegundos pero es engorroso, la solucin ms sencilla y prctica es dejar las imgenes de tamao fijo, igual que los rpg makers, con la salvedad de que el tamao de nuestros objetos es fijo pero pueden ser todo lo grandes o pequeos que queramos mientras que en los rpg makers el tamao es fijo y su ancho y altura es igual para todos los personajes mviles, aunque esto se solucion en la ultima versin de uno de estos programas, ahora te deja elegir entre al menos dos tamaos (risas), nosotros tenemos muchas mas opciones en este sentido. Para el formato de las imgenes la nica opcin viable eran las imgenes gif, las nicas que nos permitan crear animaciones y dejar un color transparente, adems de tener un tamao pequeo. Sobre los fondos Para hacer los fondos del juego se han seguido los siguientes pasos: 1. Los fondos estn hechos con rpg maker, despus a stos se le sac un screenshot, las imgenes originales eran de 320x240. 2. Se estiraron con un programa de retoque fotogrfico a 640x480 y se index la paleta para que tuviera 256 colores pero fueran los colores que usaba la imagen. 3. Si el fondo necesitaba de una animacin como es el fondo del lago con la cascada, se sacaron los frames necesarios para crear la animacin. 4. Una vez preparadas correctamente las imgenes se us un programa para crear los gif a partir de estas imgenes, ya sean animados o sin animar. Como puedes leer, para hacer el juego se ha aprovechado todo lo que sea ha podido el trabajo hecho por otra gente, si quisiramos generar los fondos por tiles y que stas tuvieran cada una sus propiedades

- 110 -

AJAX, fundamentos y aplicaciones

cargaramos mucho el navegador, sin contar el trabajo de programacin que sera, haciendo los fondos como imgenes gif y poniendo muros invisibles hemos ahorrado muchsimo trabajo.

6.2.9

Precarga de imgenes

Cuando llegamos a una pgina Web nuestro navegador empieza a cargar los elementos que est empleando, en un juego o entorno muy cambiante estara pidiendo informacin continuamente al servidor, es ms, muchas veces antes de que le llegara esa informacin sera ya atrasada y estara pidiendo nueva, con lo cual nunca terminara de cargar nada y no llegara a mostrarlo, el resultado es que el entorno Web se visualizara mal. Lo anterior en un juego es todava mas crtico, no deberamos de pedir nada grfico al servidor ya que estos archivos pesan mucho y no van a llegar a tiempo casi nunca, lo ideal es que antes de comenzar el juego se cargaran en memoria todos los archivos de grficos que vamos a emplear. Para hacer esto hay una serie de rdenes en Javascript que meteremos en la cabecera del documento, mientras que no lleguen los grficos no debera seguir cargando, pero en cualquier caso mientras que no termine la pgina entera de cargar no dejaremos que el jugador comience a jugar. Si leemos el archivo precargaImagenes.js que es muy sencillo podemos leer lneas como las siguientes: var fondos = new Array(); fondos[0]=new Image(); fondos[0].src ="escenarios/A4.gif"; fondos[1]=new Image(); fondos[1].src ="escenarios/B3.gif"; En el juego de ejemplo para un mayor orden se ha introducido las imgenes en arrays con un nombre que indique a que pertenecen, en cualquier caso, no vamos a coger las imgenes de los arrays. Esto es solo para obligar a la pgina Web a cargarlas por primera vez, ahora que las imgenes estn en cach, con volver a pedirlas al servidor nuestro navegador por arte de magia sabr que esas imgenes las tiene y nos las devolver instantneamente, al menos as es en IE 7 y Mozilla Firefox 1.5 y 2.0 .

6.2.10 Precarga de sonido

Este apartado dio muchos quebraderos de cabeza, iniciar la reproduccin de un sonido que no se tuviera ya cargado deja al navegador bloqueado al menos un par de segundos, da igual el tamao del archivo, lo que le cuesta ms al navegador es cargar el reproductor e iniciarlo. Otro pequeo gran problema es que Mozilla Firefox solo deja reproducir sonido si esta incrustado con la etiqueta embed y an as necesita una extensin que se instala con el programa Quick Time para poder reproducir, en cambio Internet Explorer no necesita extensiones ninguna y deja reproducir sonido con un par de etiquetas mas. Sabiendo esto, tenemos que mirar directamente las posibilidades que tenemos con la etiqueta embed, adems de que Mozilla Firefox va a necesitar de la extensin que le da Quick Time. La solucin que se encontr al problema fue la siguiente: <embed id="musicaTitulo" name="musicaTitulo" src="musica/titulo.mid" width="0" height="0" autostart="false" loop="true" enablejavascript="true"> Las msicas deben estar en el cuerpo del documento, si no, no funcionar lo que pretendemos hacer correctamente, les pondremos tanto la propiedad id como name para ilustrar dos formas de reproducirlo, diremos que el ancho y alto del reproductor son 0 pxeles para que no se muestre, nosotros elegiremos cundo reproducir la msica, no el usuario, autostart ser falso para que cuando se carguen las msicas al cargar la pgina web no comience ninguna, como ya hemos dicho controlaremos la reproduccin mediante Javascript, por ltimo las msicas se repetirn, es decir, loop=true mientras que los efectos de sonido no, loop=false. Dicho lo anterior, todas las msicas y efectos de sonido al igual que los grficos se cargan cuando se inicie la pgina, en este caso se han elegido midis de pocos ks y como el juego intenta ser un clon del Zelda se han cogido msicas hechas por fans de varios juegos de la saga.

- 111 -

AJAX, fundamentos y aplicaciones

Para reproducir la msica cuando queramos, si miramos el archivo sonido.js, lo nico que hacemos es coger la etiqueta ya sea por id o name dependiendo si es msica o sonido (podramos haberlo hecho igual) y tocarlo y pararlo con las propiedades play y stop, se ha dejado ilustradas las dos maneras porque el resultado es idntico y slo cambia una lnea de cdigo.

6.2.11 Cuadros de informacin: vida, objetos, mapa y consola

Todos los cuadros de informacin, incluso la pantalla, son tablas. Se ha utilizado hojas de estilo para dividirlos y se le han dado clases a sus celdas. Cuando cogemos los objetos lo nico que ocurre es que le cambiamos la clase a la celda y las hojas de estilo hacen el resto, la vida y el mapa funcionan exactamente igual; por supuesto al mismo tiempo que realizamos los cambios grficos, se realizan tambin en el objeto jugador, asignndole los objetos y se enva la informacin al servidor para mantener la consistencia. Objetos 1. Tenemos un fondo que hemos dividido de la misma forma que esta hecha la tabla.

Figura 6.7 Cuadro de objetos

2. Tenemos una tabla, con clases en sus celdas en el archivo mochila.js. "<table id=\"mochilaReal\" class=\"mochilaReal\" style=\"border: none; position: absolute; left:0px; top:0px; \">"+ "<tr class=\"mochilaRealFila\">"+ "<td id=\"objeto01\" class=\"cajonMochilaInactivo\"></td>" + "<td id=\"objeto02\" class=\"cajonMochilaInactivo\"></td>" + 3. Tenemos en la hoja de estilo, las clases que asignan los dibujitos de fondo de las celdas, si miras el archivo interface.css a la seccin de Mochila, vers que se han asignado a cada clase un fondo y unas propiedades. Vida y mapa

Figura 6.8 Cuadro de vida y mapa

- 112 -

AJAX, fundamentos y aplicaciones

Funcionan exactamente igual, lo nico que hacemos es encender y apagar las casillas haciendo uso de las clases de las hojas de estilo. Para cambiarle la clase a un objeto de forma sencilla debemos de asignarle un identificador, por eso todas las celdas de toda la interfaz tienen uno. Donde se ve ms fcilmente es en el mapa, si echamos un vistazo al archivo mapa.js, veremos que siempre apagamos una celda y encendemos otra haciendo uso de las clases, haciendo uso de la funcin siguiente. function cambiarCajonActivo(cajonActualNombre,cajonNuevoNombre) { var cajonActual = document.getElementById(cajonActualNombre); var cajonNuevo = document.getElementById(cajonNuevoNombre); if(cajonActual != null) { cajonActual.className = "cajonMapaEspera"; } cajonNuevo.className = "cajonMapaActivo"; cajonActualID = cajonNuevoNombre; } Hay 3 tipos de clases para los cajones en el mapa, Inactivo (no visitado), Espera (ha sido visitado pero no estamos actualmente), Activo (donde estamos). Si al principio todo el mapa esta inactivo, solo con esta funcin se harn todos los cambios de forma natural, siempre que cambiamos de pantalla dejamos el cajn actual en espera si es que existe (la primera vez que entramos al juego no ha habido un cajn anterior) y ponemos el nuevo como activo. El cajn actual se guarda en una variable global y esta funcin como se llama al cambiar de pantalla est en los scripts que pintan las pantallas. En la carpeta escenarios. El cuadro de la vida funciona exactamente igual, o no hay un corazn, o lo hay, o lo hay pero est negro porque no tenemos el mximo de vida. Tanto la tabla como las funciones que suman y restan vida se encuentran en estadoJugador.js. Consola

Figura 6.9 Consola de informacin

sta indica con un mensaje cuando coges un objeto, no es ms que una tabla vaca con un dibujo de fondo que est puesto haciendo uso de la hoja de estilo, para escribir y borrar de la tabla hay dos funciones que se utilizan en el archivo accionesObjetosCogibles.js y son mas que sencillas: escriben en el innerHTML de la tabla y lo borran entero dado una cantidad de tiempo, para que no se llene la tabla, esto se podra haber mejorado y hacer una especie de log que tenga desplazamiento, pero para el uso que tiene actualmente es suficiente.

6.2.12 Sistema de batalla y golpes

Para que un juego de accin resulte adictivo, ste es tal vez el punto ms importante, incluso ms que los grficos, pero ms difcil de programar, teniendo en mente que nuestros clculos de colisiones son con rectngulos y que intentamos simular un Zelda de Super Nintendo tenemos que pensar en las siguientes ideas: En el juego original de consola, cuando sacabas la espada, est te haca a la vez tambin de escudo ante otras armas blancas ya que chocaban y quedaba gracioso, adems te movas ms lento porque al ponerte en posicin de combate no puedes ir corriendo, pero te podas mover dejando el punto de vista fijo, es decir se supone que si sacas la espada es porque hay un enemigo y no quieres darle la espada, as que si estas mirando a la izquierda mientras tengas el botn de ataque pulsado te quedas mirando hacia la izquierda, por ltimo cuando sacas el arma haba una animacin, para nuestra suerte todo es posible, lo

- 113 -

AJAX, fundamentos y aplicaciones

nico eliminado es la animacin de sacar la espada ya que no tenemos unos grficos originales disponibles que se adecuen al personaje que se ha elegido. Movimiento Si aprietas el botn de ataque (El botn A por defecto), en el archivo controladoresEventos.js, el controlador de evento de teclado de pulsar la tecla A se pone la bandera teclaAtaquePulsada = true y jugador.atacando = true;, realmente es la misma bandera, se termin utilizando la que pertenece al objeto jugador, se cambia la animacin del personaje y se fija el punto de vista con la bandera puntoVistaBloqueado = true, como ves hasta aqu ningn problema, por ltimo para que el personaje valla mas lento se cambia la variable numeroMovimientosPaso de 3 a 1, cuando despulsas la tecla en el manejador de despulsar la tecla del mismo archivo se deshacen todos estos cambios, como ves el movimiento ha sido relativamente sencillo. Las banderas puntoVistaBloqueado y numeroMovimientosPaso se utilizan en el movimiento del jugador en el archivo movimientoJugador.js mientras que la bandera jugador.atacando se utiliza en el archivo calculosColisiones.js. Colisiones entre enemigos stas estn calculadas en el archivo calculosColisiones.js, pero hay una serie de puntos a tener en cuenda, tanto el jugador como el enemigo son objetos en la pantalla, con 3 propiedades importantes que definen como termina la situacin. Propiedad 1: Punto de vista, para atacar satisfactoriamente el jugador tiene que golpear al enemigo mirndole en cambio al enemigo esto le da igual si tomas contacto con el te golpea. Propiedad 2: bandera de ataque, el jugador no slo tiene que dar contra el enemigo de frente sino con la espada fuera, el cambio el enemigo siempre esta en ataque. Propiedad 3: Tienen que estar alineados, de manera que la espada toque al enemigo, vemoslo con el siguiente ejemplo:
Ataque del jugador satisfactorio.

Punto de vista: El jugador lleva las de ganar. Bandera de ataque: El jugador puede golpear. Alineacin: correcta, la cabeza del jugador no sobrepasa la del enemigo.

Ataque del jugador no satisfactorio.

Punto de vista: El jugador lleva las de ganar. Bandera de ataque: El jugador puede golpear. Alineacin: incorrecta, el final del cuerpo del jugador donde mira sobrepasa al del enemigo.

Figura 6.10 Cuadro de objetos Esta ltima propiedad es tal vez la mas compleja, por ltimo cuando dos soldados (objeto de tipo jugador o enemigo con espada) se enfrentan, si se golpean los 2 mirndose a la cara el ataque les rebota a los 2.

- 114 -

AJAX, fundamentos y aplicaciones

Todo lo comentado tanto la colisin del jugador con un enemigo como el jugador con otro jugador estn en el archivo calculosColisiones.js, en los clculos de objeto tocables, puede parecer algo complejo pero son estas ideas plasmadas en cdigo, no hay ms. Golpe al jugador Hay para el personaje jugador una animacin de golpe para cada lado pero se ha copiado la misma para ahorrar tiempo pintando, puedes mirarlo en el directorio personajes y ver las del jugador principal, stas se reproducen solo para nuestro personaje, no para los jugadores enemigos. Si miramos la funcin de clculo de colisiones de objetos tocables dentro del archivo calculosColisiones.js, se llama a la funcin iniciarGolpe() dentro del archivo golpeJugador.js. Esta funcin depende de un par de variables globales que se encuentran en el mismo archivo, tiempoGolpe y pixelesGolpe, de manera que se pueda modificar si es necesario dependiendo del enemigo, en el juego no ha sido necesario, durante un golpe se activa la bandera jugadorGolpeado y se bloquea el punto de vista con su bandera puntoVistaBloqueado para que el jugador se quede mirando donde estaba, cada vez que se mueve un pxel (se hace con las funciones hechas como interfaz, no directamente), se comprueban los muros para no atravesarlos y por ltimo para simplificar (y hacer un guio al Zelda 2 de NES) no importa por qu lado nos golpeen, el jugador saldr disparado en la direccin contraria de donde est mirando, divertido verdad, es muy frustrante para quien juega, lo llegar a odiar. Todo esto se hace con 2 funciones una que inicia el golpe y otra que se llama luego recursivamente hasta finalizarlo, iniciarGolpe() y golpeJugador().

6.3 Parte online del juego

Llegado a este punto te habrs dado cuenta de que la verdadera dificultad de crear esta pequea demo radica en parte en las ideas que hay que tener para hacerlo y en tener conocimiento suficiente del entorno Web que nos manejamos, CSS+Javascript+DOM, ya que en verdad el uso de un entorno Web facilita mucho el trabajo, ya que no hay que hacer ningn proceso complejo para pintar en pantalla, ni tampoco para el sonido, ni los controles ya que podemos crear manejadores fcilmente, etc. Ahora llegado el momento de hacerlo online vamos a utilizar una pequea base de datos SQL y realizaremos operaciones con ella enviado parmetros a una pgina JSP que nos va ha devolver las respuestas de la base de datos. Tenemos que tener muy claro que cualquier cosa que se haga en el entorno cliente, es decir, el navegador, est expuesto a ataques, para hacer el juego mas ligero no vamos a hacer una seguridad de hierro, pero al menos nos vamos a molestar en cifrar la conexin, que sea el servidor quien autorice al jugador tener objetos y mover los enemigos tambin con el servidor, pero claro, es el jugador quien notifica que un enemigo le ha golpeado, si te preguntas por qu no hacemos esto en el servidor es simple: hara falta un mejor tiempo de respuesta y este es el gran problema que tiene el juego, por ms que queramos estamos trabajando sobre el protocolo http, las conexiones se abren, se enva lo que se tiene que enviar y se cierran, no hay ningn canal abierto que mantenga la conexin y solo tenemos un puerto, el gran reto hoy en da para este tipo de entornos interactivos es precisamente conseguir una interactividad inmediata cliente/servidor sobre http.

6.3.1

Disear la base de datos dependiendo de las necesidades del juego

Esta parte ser la culpable en parte del rendimiento online, cuanto menos bsquedas y mas rpidas sean, mejor ser el rendimiento. Cada objeto en la parte servidor tiene que tener un objeto en la parte cliente y si el objeto se cogi el servidor nos dir que esta inactivo y este debe estar vaci en el cliente, para que las bsquedas de estos fueran directas no importa el tipo de operaciones que se quiera realizar, se hizo que ya que precisamente los objetos que se crean y destruyen tienen un array en la parte cliente y dentro de l tienen una posicin, el servidor debera de adecuarse a esto y debera de tener estos mismos objetos en tablas y la idea fue que sera una tabla por pantalla y que esta tendra los objetos ordenados por un ID numrico nico que sera su posicin en el array de la parte cliente, de esta forma al tener la misma posicin(mas o menos 1 ya que

- 115 -

AJAX, fundamentos y aplicaciones

los arrays en Javascript empiezan en 0 y la tabla SQL en 1) las bsquedas serian lo mas rpido que pueden ser.
Forma de localizar los objetos: Cliente Variable global: pantallaActual=a4 Array Objetos: indice=1 Servidor JSP Servidor SQL Jugadores a4 b4 ndice+1 tablas ID 1 2 Nombre ... ... Etc...

Figura 6.11 Diseo de la base de datos

Ya hemos visto una parte grande del funcionamiento del juego, para que tengamos algo de idea de que manera los diferentes bloques interactan entre ellos aqu tenemos un esquema, en l se han excluido algunas pequeas cosas para facilitar su comprensin:
PARTE OFFLINE LEYENDA VARIABLES GLOBALES BUCLES PARTE ONLINE

BUCLE PRINCIPAL BASE DATOS BASE DATOS DE JUGADORES Y OBJETOS EN LAS PANTALLAS

VARIABLES

MOVIMIENTO DEL JUGADOR DEPENDIENTE INTERRUPCIONES

OTRAS FUNCIONES

BUCLE PETICIN INFORMACIN SERVIDOR (ENVIA Y RECIBE INFORMACIN CADA X TIEMPO)

OBJETO JUGADOR

ARRAY OBJETOS TOCABLES MARCADOS: 1- EXISTIR 2-CREARSE 3-DESTRUIRSE NUCLEO DE CLCULO COLISIONES

BUCLE DE ACTUALIZAR POSICIN DE LOS ENEMIGOS (ENVIA INFORMACIN BAJO CIERTAS CONDICIONES)

ARRAY MUROS

ENVIA INFORMACIN SERVIDOR DE OBJETOS TOCADOS

INTERFACE CREAR O ELIMINAR UN OBJETO

DISPARA ACCIN OBJETOS TOCADOS BUCLE DE MOVIMIENTO DE LOS ENEMIGOS

CONSTRUCTORES DE OBJETOS

Figura 6.12 Esquema general de interaccin entre los diferentes componentes de la aplicacin

6.3.2

La I.A. de los enemigos, los debe mover el servidor para evitar trampas

Si estamos jugando a un juego online multijugador necesitamos cierta consistencia, tanto con los objetos como con los enemigos, es decir si yo golpeo un enemigo, lo he golpeado yo, si yo he cogido un objeto, lo he cogido yo, no otro jugador que estaba a mi lado y lo ha hecho casi al mismo tiempo que yo, adems debemos ver las cosas igual. La I.A de los enemigos es bastante simple, si el jugador est cerca de ellos, con un radio de 250 pxeles, el enemigo se lanza hacia el jugador. El servidor le dice al enemigo la nueva posicin del jugador una vez que ste ha llegado al destino anterior ya que si el enemigo no se para un momento nunca (si no hay latencia en la decisin de un nuevo movimiento) el jugador no puede librarse de l de ninguna manera y

- 116 -

AJAX, fundamentos y aplicaciones

el juego tendra poca jugabilidad. No hay otro tipo de I.A en nuestro juego debido a que solo hay soldados y este tipo de I.A. se adecua muy bien. Como estamos utilizando AJAX para la conexin con el servidor la nueva posicin la pide el cliente cada vez que el enemigo ha llegado a su posicin anterior, esto se hace dentro del archivo bucleMovimientoEnemigos.js en la segunda funcin, refrescoPuntoMovimientoEnemigos(), que sigue el siguiente diagrama:
BUCLE ACTUALIZAR POSICIN DEL ENEMIGO

NO SI JUGANDO Y MOVIMIENTO ENEMIGOS PERMITIDO SI i=0

NO i < NUMERO_OBJETOS

SI

SI ARRAY_OBJETOS[i].TIPO == ENEMIGO Y !ACTUALIZANDO_ENEMIGO

NO

SI

NO EST EN SU POSICIN FINAL

SI

ENVIAR PETICIN AL SERVIDOR PARA QUE LO MUEVA

i++

ESPERAR "X" SEGUNDOS

COSAS QUE FALTA AADIR AL DIAGRAMA: 1.LOS JUGADORES TAMBIEN SE ACTUALIZAN, SE PONEN MIRANDO A LA POSICIN QUE DEBEN YA QUE AL MOVERLOS SE PIERDE. COSAS MALAS: 1.NO SE ACTUALIZA MAS DE UN ENEMIGO A LA VEZ PARA NO SOBRECARGAR EL CLIENTE/SERVIDOR CON PETICIONES, POR LO QUE PUEDE QUE SI HAY MUCHOS ENEMIGOS A LOS LTIMOS NO LES LLEGUE NUNCA TURNO. COSAS BUENAS: 1.LO ANTERIOR SE PUEDE ARREGLAR SIN PERDER RENDIMIENTO METIENDO ESTAS ACCIONES EN LAS DE REFRESCO GENERAL ONLINE, LO MALO ES QUE COMPLICARA EL MODELO AUN MAS, DE ESTA MANERA ES MAS FCIL HACER CAMBIOS.

Figura 6.13 Esquema del bucle de actualizar la posicin de los enemigos

- 117 -

AJAX, fundamentos y aplicaciones

Para que el movimiento entre su posicin actual y la nueva sea suave hay otra funcin que mueve los enemigos por el camino ms corto, dentro del archivo bucleMovimientoEnemigos.js, la funcin MovimientoEnemigos(), su esquema es el siguiente:
BUCLE MOVIMIENTO ENEMIGOS

NO SI JUGANDO Y MOVIMIENTO ENEMIGOS PERMITIDO SI i=0

NO i < NUMERO_OBJETOS

SI

SI ARRAY_OBJETOS[i].TIPO == ENEMIGO ARRAY_OBJETOS[i].TIPO == OTROJUGADOR

NO

SI

SI EST EN SU POSICIN FINAL

NO

MOVER POR EL CAMINO MAS CORTO

i++

ESPERAR "X" SEGUNDOS

Figura 6.14 Esquema del bucle de movimiento de los enemigos

- 118 -

AJAX, fundamentos y aplicaciones

6.3.3

Los objetos deben ser asignados por el servidor para evitar trampas

Como en otros tantos juegos online en los que el jugador puede coger algo del suelo, que ocurre si dos jugador cogen al mismo tiempo un objeto, pues que gana la primera peticin que llega al servidor, en otro caso podra haber truco y eso no es aceptable. Por ello los objetos tienen una marca, que dice si existen y entonces el navegador Web los muestra o si se han cogido y hay que esperar a que reaparezcan (si es que reaparecen). En este juego todos los objetos reaparecen, es decir todos los objetos del array de objetos creables/destruibles, que es el punto de conexin en el diagrama general entre la parte offline y online del juego. Como ya se habl en la parte de construccin de la base de datos, los objetos se guardan en el mismo sitio para agilizar las bsquedas aparte de que gracias a ello tambin se enva muy poca informacin. Peticiones Sncronas En principio por decisiones de diseo hay un mximo de 20 objetos por pantalla, la razn principal es que hay que enviar en cada peticin AJAX unas 15 lneas de datos XML por objeto desde el servidor, sin contar que luego el navegador Web del cliente tiene que recorrer el documento XML, extraer la informacin y refrescar el estado de los objetos en pantalla, se han hecho pruebas con un Pentium M a 1.6GHz y 512Mb RAM a 400MHz y las pruebas han sido satisfactorias con las latencias 1300, 700 y 350 milisegundos, no se ha intentado bajar ms la latencia ya que enviando la informacin 3 veces por segundo en principio sera suficiente si llegara suficientemente rpido, habra que mejorar el procesamiento del documento XML en la parte cliente para agilizar un poco mas el recorrido evitando utilizar la funcin getElementsByTagName que es considerada lenta, como cualquier funcin de bsqueda, durante todo el desarrollo del juego se ha intentado no emplearlas en puntos crticos y este es un punto donde no deberan estar, todo esto que est aqu redactado es bucle online que est en el archivo bucle online.ddd, un esquema de su funcionamiento es el siguiente, representa los sucesos que ocurren en la funcin bucleOnline(),refrescoServidor(), enviarMiEstadoYpedirEstadoObjetos() y actualizarEstadoObjetos(datos):

- 119 -

AJAX, fundamentos y aplicaciones

BUCLE DE PETICIN DE INFORMACIN AL SERVIDOR NOTA: EL SERVIDOR NO ES MAS QUE UN ARCHIVO JSP Y UNA B.D. SQL PEDIRLE AL SERVIDOR QUE ACTUALICE LA BASE DE DATOS. (PARA QUE REAPAREZCAN LOS OBJETOS SI PASO EL TIEMPO SUFICIENTE)

ENVIAR POSICIN ACTUAL DEL JUGADOR

NOTA: EL SERVIDOR ENVIA UN XML CON LA INFORMACIN FORMATEADA. RECIBIR ESTADO DE LOS OBJETOS

SI EL ESTADO ES IGUAL AL ACTUAL?

NO NOTA: CREAR Y DESTRUIR SE HACE DENTRO DEL NUCLEO DE COLISIONES. DEPENDIENDO DE LAS NECESIDADES DEL OBJETO: -MARCARLO PARA CREAR (HA REAPARECIDO). -MARCARLO PARA DESTRUIR (SE COGIO O MURIO). -ACTUALIZAR POSICIN DEL ENEMIGO.

ESPERAR "X" SEGUNDOS

NOTA: SE HAN QUITADO LAS BANDERAS PARA FACILITAR LA COMPRENSIN.

Figura 6.15 Bucle que actualiza la informacin del servidor y la del jugador en el servidor

Peticiones Asncronas Si no fuera suficiente por todo lo anterior, cada vez que coges un objeto, se abre una puerta o cofre que tambin son objetos o golpeas un enemigo, todos objetos del array de objetos creables/destruibles, se realiza una peticin asncrona que le enva el suceso al servidor para que actualice la base de datos SQL, de esta manera, instantneamente todo es consistente otra vez y se actualiza en las pantallas del resto de jugadores. Si hacemos 3 peticiones por segundo para el refresco general de los objetos no sera mas fcil incluir esto tambin en ello?, seguramente s pero complicara tambin la programacin de las funciones y habra que realizar todava mas operaciones en ellas, la peor consecuencia de esto es que el cdigo sera mas difcil de mantener y modificar.

- 120 -

AJAX, fundamentos y aplicaciones

Cundo se lanzan las peticiones asncronas?: Usando la funcin decirleServidorCogidoObjeto(indiceTablaObjetosSQL) que se encuentra en el archivo bucleOnline.js desde colisionesObjetosTocables() dentro del archivo calculosColisiones.js. Cundo se crean o destruyen los objetos?: Desde colisionesObjetosTocables() dentro del archivo calculosColisiones.js, debido a una peticin sncrona que lo marc o a que hemos cogido el objeto y hemos hecho una peticin asncrona. Cundo se marcan para crear o destruir los objetos?: Usando la funcin actualizarEstadoObjetos(datos) que se encuentra en el archivo bucleOnline.js, si el refresco es por una peticin sncrona. Otros Objetos Todo lo dicho anteriormente tambin es vlido para los otros jugadores y los enemigos, los otros jugadores son objetos especiales que se encuentran en el array entre la posicin 20 y xx, tambin se ha restringido esto para resolver un problema de consistencia, si el jugador cambiaba de una pantalla a otra como haba desaparecido de la que estabas no se borraba debido al esquema de funcionamiento planteado, ya que si el objeto no existe ya en la pantalla no nos llega la informacin que dice que lo borremos. Es posible arreglar esto sin que exista esta restriccin?, S que lo es, pero es ms complejo y ms lento. NOTA: La nueva funcin de actualizacin resuelve este problema, esta parte est obsoleta. 1 solucin: Crear un array de objetos nuevo con cada peticin XML ya que esos son los objetos que hay en la pantalla, y borrar todo lo dems, esta solucin es abominable y llevarla a la prctica por la carga que requerira no es muy recomendable. 2 solucin: Los objetos con que llegan con un ID mayor que 20 son jugadores, creamos un array con el nombre de estos ID (el de los jugadores no se puede repetir), recorremos nuestro array de objetos y comprobamos que cada objeto mayor que 20 tenga su nombre en este array que hemos creado. Es decir, realizar una bsqueda, esto es un poco lento.

6.3.4

El dao de un jugador a otro debe ser notificado por el que se ve golpeado

Est claro que un enemigo no est en ningn lado para decir si le han matado o no y tenemos que confiar en que el navegador Web que le dice al servidor que ha sido golpeado no esta mintiendo, con los jugadores esta decisin no es tan fcil. Si golpeas otro jugador quien le dice al servidor quien ha sido golpeado, tenemos 3 posibilidades: Lo dicen los dos para confirmar: Esta opcin tal vez sea la mejor PERO es muy complicado hacerlo ya que habra que guardar los datos en algn sitio por en medio ya que primero llega el dato de un jugador y luego el del otro. Lo dice el jugador que golpea: Esto no es nada justo ya que si el jugador tiene una mala conexin el jugador al que golpea estar mas quieto que movindose y no es justo, adems puede que ya ni siquiera est en la pantalla cuando le golpea. Lo dice el jugador que es golpeado: Si, es la nica opcin fcil que nos queda, adems, es el quien tiene su posicin ms actualizada y es justo que lo diga l y adems si mintiera en el peor de los casos sera inmortal, si miente dando los datos de los golpes a otros jugadores ira matando a todo el mundo, aunque ser inmortal se lo pone ms fcil, no los matar directamente, por supuesto todo lo anterior son suposiciones que ocurriran si se hackeara al juego. Bueno dicho lo anterior, todo esto se hace como no en la ya famosa funcin de clculo de colisiones de objetos tocables del archivo calculosColisiones.js.

6.3.5

El cambio de pantalla debe ser notificado y aceptado antes de realizarlo

El cambio de pantalla es una peticin asncrona, no forma parte del refresco general, se hace en el archivo transicionPantalla.js (solo tiene una funcin) que llama a la funcin cambiarPantallaOnline(pantallaNueva) que se encuentra en el archivo bucleOnline.js , una vez que se confirma el cambio de pantalla por parte del servidor se pinta la pantalla nueva, mientras el servidor confirma la peticin, se borran los objetos de la pantalla anterior (si se estuviera procesando una peticin

- 121 -

AJAX, fundamentos y aplicaciones

de refresco sncrona que entr durante el cambio, los objetos se borraran) y el bucleOnline() que hace el refresco sncrono de los objetos est parado por una bandera de forma que no se generan nuevas, aunque el bucle se haya parado puede que llegue la ltima peticin que se envi de la pantalla anterior, sta se puede rechazar de dos maneras: en la parte servidor se hace una comprobacin que hace que se pueda rechazar la peticin (si llega la peticin de cambio de pantalla antes que la de refresco aunque se haya enviado despus), aparte de esto durante el cambio de pantalla no se puede empezar a procesar ninguna peticin de refresco aunque llegue durante el cambio porque la bandera de refresco de pantalla lo impide. Es muy enrevesado leerlo en un bloque as que mejor hacemos un esquema:
PROBLEMAS ONLINE: CASO A: PETICIN QUE LLEGA TARDE AL SERVIDOR: EL SERVIDOR LA RECHAZA: -LO HACE COMPROBANDO LA PANTALLA ACTUAL DEL JUGADOR. CLIENTE

PANTALLA A

TRANSICIN

PANTALLA B

SERVIDOR CASO B: PETICIN QUE LLEGA TARDE AL CLIENTE: EL CLIENTE LA RECHAZA: -LO HACE LA BANDERA DE CAMBIO DE PANTALLA QUE NO DEJA QUE SE PROCESE. CLIENTE

PANTALLA A

TRANSICIN

PANTALLA B

SERVIDOR

PROBLEMAS OFFLINE: CASO C: LA PETICIN EMPEZ A PROCESARSE ANTES DEL CAMBIO Y SE TERMIN DURANTE EL CAMBIO: -LAS OPERACIONES DEL CAMBIO TARDAN MILSIMAS DE SEGUNDO Y AL TERMINAR BORRAN EL ARRAY DE OBJETOS Y LO REFRESCAN.

CASO D: LA PETICIN EMPEZ A PROCESARSE ANTES DEL CAMBIO Y SE TERMIN DESPUS DEL CAMBIO: -EL ARRAY HA SIDO BORRADO DURANTE EL CAMBIO, AUN AS PODRA OCURRIR ALGN ERROR, DESPUES DE MUCHOS TESTEOS NO SE ENCONTR NINGUNO, SIN CONTAR QUE ESTA POSIBILIDAD ES MUY REMOTA.

Figura 6.16 Problemas derivados de necesitar consistencia en los datos Creo que con esto ha quedado mucho mas claro, adems de estos hay un problema ms: Qu pasa si hacemos una peticin nmero01 y luego hacemos una nmero02 y nos llega primero la segunda?, pues que cuando llegue la primera sta se rechaza porque ha llegado una ms nueva, la razn es porque slo se atienden las mayores que la ltima peticin recibida, esto se hace en la funcin enviarMiEstadoYpedirEstadoObjetos() del archivo bucleOnline.js. Cosas buenas: Si llegan respuestas a destiempo estas se rechazan, y lo mejor, si se pierde una no pasa nada. Cosas Mejores: Se pueden minimizar la llegada de peticiones con informacin atrasada subiendo el nmero de la variable numeroSecuenciaLimite cada vez que cogemos un objeto (peticin asncrona), por un lado ahorramos procesar una peticin con informacin atrasada y por otro lado hay menos rebotes visuales, esto se hace en la funcin decirleServidorCogidoObjeto(indiceTablaObjetosSQL) del archivo bucleOnline.js.

- 122 -

AJAX, fundamentos y aplicaciones

6.3.6

Actualizar la posicin del jugador

La posicin del jugador est dentro del refresco de datos sncrono del que ya hemos hablado muchsimo y aunque esto ya se ha comentado en el apartado Los objetos deben ser asignados por el servidor para evitar trampas ahora lo remarcaremos hablando de los jugadores ya que con los objetos no es tan crtico el tiempo de respuesta: si un jugador coge un objeto otro ya no puede aunque le llegue el refresco tarde, en cambio si dos jugadores quieren pelearse, es imposible si no tienen un refresco decente los dos. Al comienzo los refrescos eran cada 2 segundos, ahora son cada 0.35 segundos, an as ste es el gran problema de que el juego se sostenga bajo el protocolo HTTP, ahora mismo el juego cuenta con la versin 2.0 del protocolo que mantiene la conexin sncrona con el servidor, el jugador solo enva su pantalla y posicin y el servidor devuelve solo, los objetos activos en pantalla y jugadores que estn en ella. Con lo anterior solucionado se ha conseguido mucha ms eficiencia y ahora se puede mantener a muchos ms jugadores jugando en el mismo servidor, en las pruebas actuales se permiten un mximo de 80 aunque se aumentar a 400 en las siguientes. La frmula que mide el tiempo de refresco es la siguiente:
Trefresco = RetrasoRed +TiempoCrearPeticinCliente+ TiempoProc.PeticinServidor+ TiempoAct.B.D.+ TiempoDevolverInf.Act.

Despus de diversas pruebas domsticas con un servidor ideal, es decir que no est sobrecargado con ms de 10 peticiones por segundo, (si estuvieran jugando 200 personas seran unas 500), podramos dejar la frmula como la siguiente.
Trefresco = RetrasoRed+ (200ms aprox)

En el diseo del juego esto es muy importante porque normalmente los juegos online se juegan a golpe de ratn, no con las teclas y siguen el siguiente protocolo. 1. Jugador dice donde quiere moverse al servidor haciendo clic en dicha posicin con el ratn. 2. El servidor guarda la nueva posicin. 3. El servidor enva a todos los jugadores cercanos la posicin a la que se va a mover el jugador que lo ha pedido. 4.Se reproduce la animacin del movimiento en todos los clientes a la vez. Los pasos 3 y 4 ocurren a la vez con lo que la animacin transcurre igual en las pantallas de todos los jugadores y no hay problema ya que el termino RetrasoRed se vuelve despreciable debido a este protocolo. El diseo de El poder de AJAX vuelve crtico este trmino, si el cliente y el servidor fueran la misma mquina, es decir, lo ms ideal, quedara.
Trefresco = 200ms aprox

Con lo cual se podra actualizar 5 veces por segundo, pero esto no es as con lo cual nos conformaremos con 2 o 3 veces, adems de tener en cuenta toda la problemtica de la prdida de alguna peticin o la posibilidad de que lleguen en mal orden.

6.3.7

Actualizar objetos al cogerlos (Asncronamente)

La idea es simple, las peticiones AJAX sncronas refrescan lo que se ve en la pantalla nicamente, las peticiones AJAX asncronas se utilizan para hacer algn cambio instantneo y son las que pueden sumar algo al inventario del jugador. En este ltimo caso el manejador tanto en la parte cliente como servidor tiene que ser lo mas pequeo posible ya que hasta que el servidor no te da la respuesta no se hacen los cambios, pero debemos adecuarnos a nuestro diseo, tenemos un tipo llamado objetosCogibles en las colisiones, pues un manejador para estos objetos, si hubiramos separado cada objeto en si mismo se podran haber hecho manejadores de accin mas ligeros todava a cambio de tener que escribir un manejador por objeto en vez de uno genrico.

- 123 -

AJAX, fundamentos y aplicaciones

Para mejorar esto, el subtipo de objeto dentro de los objetosCogibles es el mismo nombre que la funcin que dispara la accin de ese subtipo y como Javascript puede evaluar texto como cdigo evaluamos su nombre directamente y ya tenemos una forma sencilla de disparar las acciones de todos los objetos con una funcin, y es rpido. Todas las acciones de los objetos estn en los archivos accionesObjetosCogibles.js y accionesObjetosAccion.js, las primeros se resumen a reflejar en el objeto jugador y grficamente en la mochila o el status los cambios realizados al tocar el objeto y los segundos para disparar una accin no solo los tienes que tocar sino que tienes que cumplir alguna condicin, para las puertas tienes que tener su llave y mirarlas de frente y para los cofres tambin tienes que mirarlos de frente, de estas forma no basta con estar al lado de un objeto de estos tipos para usarlo ya que sera absurdo abrir un cofre o una puerta de espaldas, etc.

6.4 A fondo
Llegados a este punto y comprendido cmo funciona el juego vamos a prestar atencin especial a un par de archivos gordos por su tamao que no excesivamente complejos, aun as es mejor facilitar su lectura.

6.4.1

El archivo servidor.jsp

El archivo est dividido en tres secciones o pasos: Primer paso: creamos los objetos necesarios en todas las opciones. Segundo paso: qu quiere hacer nuestro usuario. Tercer paso: cerramos la comunicacin sql necesaria en todas las operaciones. Cualquier peticin del usuario pasa por estos 3 pasos. En el primero se crean las variables necesarias para hacer la comunicacin sql, esta comunicacin con la base de datos es necesaria con todas las operaciones, el motivo por que existe este archivo es precisamente para hacer de puente con la base de datos. En el segundo paso lo primero que se hace es recoger el parmetro de servicio enviado por el usuario, contiene la operacin que se debe realizar, la estructura del segundo paso es la siguiente. if(servicio.equals("pedirSesion")) { } else if(servicio.equals("refrescoServidor")) { } else if(servicio.equals("refrescoNormal")) { } else if(servicio.equals("cogerObjeto")) { } else if(servicio.equals("cambiarPantalla")) { } else if(servicio.equals("actualizarPosicionEnemigo")) { } else if(servicio.equals("restarVidaJugador")) { } else if(servicio.equals("restarVidaEnemigo")) { } else if(servicio.equals("cerrarSesion"))

- 124 -

AJAX, fundamentos y aplicaciones

{ } else if(servicio.equals("registro")) { } Dependiendo del servicio se harn las operaciones necesarias con la base de datos, son todas consultas y modificaciones muy sencillas, sin tener conocimientos de sql se pueden comprender. Como respuesta al usuario cada operacin genera un documento XML con la informacin necesaria para actualizar la pantalla y el interfaz, como ves est todo muy dividido, esto es bueno para encontrar los errores y no hacer un cambio que lo rompa todo. Por ltimo, en el tercer paso se cierran las variables y la conexin sql que se abrieron en el primer paso.

6.4.2

El archivo calculosColisiones.js

Contiene las siguientes funciones: Estos son los dos manejadores que acceden a las funciones que hacen los clculos: colisionesObjetosFijos() colisionesObjetosTocables() Las funciones que hacen los clculos son: calcularColisionPantalla(objeto) calcularColisionBordesExternos(objeto1,objeto2) calcularColisionInterna(objeto1,objeto2) Primero hablemos de las funciones de hacer clculos, despus de los manejadores, en las 3 funciones de hacer clculos el primer objeto que entra debe ser de tipo jugador, realmente en el juego con lo nico con lo que se calculan colisiones en con el jugador, los enemigos no se matan entre ellos, ni cosas parecidas. calcularColisionPantalla(objeto): Se realizan los clculos pertinentes entre en objeto jugador y las variables ladoIzquierdoPantalla, ladoDerechoPantalla, ladoArribaPantalla, ladoAbajoPantalla, stas se crean al comenzar el juego y ya no se vuelven a tocar, como necesitan realizar bsquedas (la funcin coger elemento por nombre) sera un desperdicio muy grande de recursos, no solo crear las variables sino calcularlas en cada llamada, estas variables son en realidad constantes, pero Javascript no tiene constantes. Las variables de las que hace uso la funcin estn fuera de ella como globales para que no se creen y destruyan en cada llamada y ganar rendimiento, son las siguientes: var ladoIzquierdoObjeto; var ladoDerechoObjeto; var ladoArribaObjeto; var ladoAbajoObjeto; calcularColisionBordesExternos(objeto1,objeto2): Se realizan los clculos entre los lados del objeto1 que es el jugador con los del objeto2 que es de tipo muro, es una funcin preparada para activar y desactivar las banderas que impiden al jugador andar por donde hay un muro, la funcin no devuelve nada y variables de las que hace uso estn declaradas como globales para ganar rendimiento. var ladoIzquierdoObjeto1; var ladoDerechoObjeto1; var ladoArribaObjeto1; var ladoAbajoObjeto1; var ladoIzquierdoObjeto2; var ladoDerechoObjeto2; var ladoArribaObjeto2; var ladoAbajoObjeto2;

- 125 -

AJAX, fundamentos y aplicaciones

calcularColisionInterna(objeto1,objeto2): Es una rplica de la funcin anterior, en cambio no toca las banderas de muro ya que estos objetos se pueden atravesar, es decir en este caso el objeto2 no es un muro, pertenece al array de objetos que se crean y se destruyen, devuelve true si hay colisin y false si no la hay. Las variables de las que hace uso estn declaradas como globales para ganar rendimiento como en todas las funciones de clculo de colisiones. var ladoIzquierdoObjeto1I; var ladoDerechoObjeto1I; var ladoArribaObjeto1I; var ladoAbajoObjeto1I; var ladoIzquierdoObjeto2I; var ladoDerechoObjeto2I; var ladoArribaObjeto2I; var ladoAbajoObjeto2I; Sobre los manejadores, son precisamente dos por lo siguiente: El primer manejador est dirigido a que el jugador no atraviese los muros, es decir controla las banderas de muro que se miran en el movimiento, por lo que hace uso de las 2 primeras funciones de hacer clculos que cambian las banderas. El segundo manejador solo se encarga de las colisiones con los objetos, pero su trabajo es mucho ms duro ya que este manejador crea y destruye los objetos, adems de disparar algunas acciones. El esquema de la funcin es el siguiente: function colisionesObjetosTocables() { var i; for(i=0; i < numeroObjetos; i++) { if((arrayObjetos[i].marcadoParaEliminar == true) && (arrayObjetos[i].tipo != "objetoVacio")) { } else if(arrayObjetos[i].tipo == "jugadorE") { } else if((arrayObjetos[i].tipo == "enemigo")) { } else if((arrayObjetos[i].tipo == "objetoVacio") && (arrayObjetos[i].marcadoGenerar == false)) { } else if((arrayObjetos[i].tipo == "objetoVacio") && (arrayObjetos[i].marcadoGenerar == true)) { } else { var colision = calcularColisionInterna(jugador,arrayObjetos[i]); if (colision == true) { colision = false; if(arrayObjetos[i].tipo == "objetoCogible") { } else if(arrayObjetos[i].tipo == "objetoAccionPuerta") {

- 126 -

AJAX, fundamentos y aplicaciones

} else if(arrayObjetos[i].tipo == "ObjetoAccionCofre") { } else if(arrayObjetos[i].tipo == "teletransporte") { } else if(arrayObjetos[i].tipo == "enemigoInanimadoInmortal") { } } } } } El esquema de la funcin es sencillo, sus operaciones no, dependiendo del tipo de objeto que tengamos ste dispara unas acciones u otras cuando es tocado, aunque por la temtica del asunto est bastante claro lo que puede hacer cada objeto, los cofres se abren, los teletransportadores te cambian de pantalla, etc.

6.5 Requisitos de sistema y conexin

Necesidades de memoria Todos los archivos del juego no alcanzan los 2,7 Mega bites en disco duro, es sorprendente la cantidad de memoria que llegan a emplear los navegadores al crear el DOM del juego: Algunos nmeros sobre el consumo de memoria RAM: I. Explorer 7 iniciado con una pgina plana: Cerca de 30 Megabytes. I. Explorer 7 con el juego cargado en la pantalla de login: Cerca de 60 Megabytes. I. Explorer 7 jugando: Entre 60 y 70 Megabytes. M. Firefox 1.5 iniciado con una pgina plana: Cerca de los 21 Megabytes. M. Firefox 1.5 con el juego cargado en la pantalla de login: Cerca de 62 Megabytes. M. Firefox 1.5 jugando: Cerca de los 60 Megabytes. Algunos nmeros sobre el rendimiento El PC de pruebas es un Pentium M 1.6 Ghz con 512Mbytes RAM a 400 MHz, no es ni muy nuevo ni muy viejo, adems es un porttil, podra entrar dentro de los PCs de gama baja actualmente, aunque en los hogares hay equipos ms viejos todava, este es un buen punto medio. Claramente desde el principio I. Explorer 7 an consumiendo ms RAM ha conseguido un rendimiento muy superior antes M. Firefox 1.5 si hablamos de nmero de FPS (realmente iteraciones del bucle principal en nuestro caso). Internet Explorer 7: Jugando obtiene los 54-63 FPS sin problemas y no pega bajones. M. Firefox 1.5: Jugando obtiene los 54-63 FPS tambin, pero pega bajones por debajo de los 40 FPS mas veces de lo deseable. Necesidades de conexin Las pruebas actuales se han hecho de manera local y en Internet, los resultados han sido aceptables consiguiendo que el juego sea jugable con una conexin poco mejor que una lnea de 56kb, ya que una vez que el juego esta cargado en memoria solo enva y recibe cadenas de texto para mantener la conexin.

- 127 -