Todos conocemos ese juego donde se nos hacen preguntas, y dependiendo de si las contestamos o no, vamos avanzando en un tablero, o en su defecto, si desconocemos la respuesta, avanza la ignorancia. Las preguntas por lo general son sobre varios temas y tienen diferentes valores en kilómetros, dependiendo su complejidad. Bueno, podemos hace un juego similar en Flash con los actionScripts y con XML.
Este juego está bastante simplificado, de hecho sólo consta de 10 kilómetros, y todas las preguntas valen sólo uno. Usted puede hacer este Maratón tan complejo como quiera. También el diseño es muy simple. Las figuritas las bajé de la extinta
Para ver los enlaces debes ser usuario
Crear Usuario o
Hacer Sesionwww.flashzone.com
y son del dominio público. El archivo XML también está muy simplificado, pues sólo tiene 20 preguntas. Una vez hecho tantas excusas, pasemos al juego. Este tutorial lo dividiremos en la explicación del escenario, luego pasaremos a explicar los objetos gráficos y por último a lo más interesante, los actionScripts, con la referencia al archivo XML.
Pulsar aquí para descargar los archivos
El escenario:
Este juego está dividido en dos escenas: en la primera se explican las reglas de juego (escena INICIO) y en la segunda, llamada Main, se tiene el tablero y el juego en si. En la escena Main tenemos dos fotogramas: uno para el juego y el siguiente para los resultados.
Como puede observar, en la parte superior de la figura 1, tenemos una especie de marcador que contabiliza los aciertos y las fallas, así como los kilómetros que vale cada pregunta.
En la parte media del escenario, como se ve en la figura 1, tenemos el tablero, que consiste en una salida, un camino de colores (que parece un zarape mexicano) y la meta, En la salida se encuentran nuestros amigos el ranchero (la ignorancia) y el camello (el jugador).
En la parte baja se tiene el tablero para las preguntas y sus posibles respuestas.
En el siguiente fotograma se tiene el resultado del juego si se ganó o no.
Símbolos y Objetos gráficos:
Tampoco se tienen en el juego muchos símbolos u objetos gráficos, salvo los botones que los tomé de la biblioteca común propia del paquete. Como ya lo comenté, los monitos los bajé de la extinta “flashzone.com”. Hay también tres textos dinámicos para el marcador y uno más para el resultado final. No hay mucho más símbolos. Mejor pasemos a lo interesante, a los actionScripts y al XML. Iniciaremos con una breve descripción del archivo XML y luego nos meteremos a fondo al código.
Simbolo Tipo
Camello - MovieClip
Ignorancia - MovieClip
Botón Respuesta - Botón
Botón Continua - Botón
MyBuenas - Dinamic Text
MyMalas - Dinamic Text
MyKilometros - Dinamic Text
MyResultado - Dinamic Text
Archivo XML
El XML es un lenguaje similar al HTML, de hecho se desarrollo una extension (eXtended Markup Lenguage). El archivo de las preguntas tiene el siguiente formato:
<Maraton>
<Pregunta>
<Texto>Cual es la capital de Francia</Texto>
<Opcion1>Orly</Opcion1>
<Opcion2>Paris</Opcion2>
<Opcion3>Evry</Opcion3>
<Correcto>2</Correcto>
<Kilometros>1</Kilometros>
</Pregunta>
</Maraton>
Por alguna extraña razón (al menos con la versión que yo manejo), Flash sólo reconoce texto seguido.
<maraton><pregunta><num>0</num><texto>Cual es la capital de Mexico</texto><opcion>Guadalajara
</opcion><opcion>Monterrey</opcion><opcion>Distrito Federal</opcion><correcta>3</correcta>
<km>1</km></pregunta><pregunta> <num>1</num><texto>Cual es la capital de Espana</texto> <opcion> Barcelona</opcion> <opcion>Madrid</opcion> <opcion>Granada</opcion><correcta>2</correcta><km>1</km></pregunta> <pregunta><num>2</num><texto>Cual es la capital de...etc
En general, el XML no reconoce acentos, ni eñes. Para eso hay que utilizar ciertos caracteres de control.
Letra Secuencia
á à
é é
í í
ó ó
ú ú
¿ ¿
El archivo lo puede hacer con cualquier procesador de palabra, sólo hay que salvarlo sin caracteres especiales y con la extensión XML. Si le apasiona este tema, puede consultar cualquier libro de referencia (que seguramente pesará más que un recién nacido).
ActionScripts:
Las rutinas son muy sencillas. La mayoría del código se encuentra en la escena de Inicio y de los demás puntos solamente se llaman como rutinas. El siguiente cuadro nos ayudará:
Rutina Ubicación
Rutina de Inicio - Escena Inicio
Funcion pregunta - Escena Inicio
CargaXML - Escena Inicio
BuscaPregunta - Escena Inicio
Evalua - Escena Inicio
ProximaPregunta - Escena Inicio
Avanza_ignorancia - Escena Inicio
Avanza_camello - Escena Inicio
Lanza respuesta - Botones de respuesta
Reinicia Juego - Botón de reinicio
Variables y constantes de inicio:
Aquí es donde definimos las constantes que utilizaremos a lo largo del juego y en su mayoría son para las cuestiones de coordenadas, las variables para controlar las respuestas buenas y malas, y el arreglo donde se leerán las preguntas del archivo XML.
Es importante detenernos en las variables del XML Primero se crea un objeto del tipo XML, luego se abre el archivo XML (ojo, debe de estar en la carpeta adecuada), y luego, con la instrucción objetoXML.onLoad, se ejecuta la función marcada, en este caso la función cargaXML que explicaremos más adelante:
/**************************************************************/
stop ();
var META=10; //Km para finalizar
var ignorancia_x = 28;
var ignorancia_y = 90;
var camello_x = 36;
var camello_y = 140;
var avanza = 38;
var buenas = 0; //Contador de las buenas
var malas = 0; //Contador de las malas
var kilometros=1; //Se lee del XML
var numPreguntas=0; //Se lee del XML
var correcto = 0; //Se lee del XML
var todasLasPreguntas = new Array(); //Guarda las preguntas del XML
/**************************************************************/
var preguntaXML = new XML(); //Objeto XML
preguntaXML.load("preguntas.xml"); //Lee archivo XML
preguntaXML.onLoad = cargaXML //Al terminar, ejecuta funcion
/**************************************************************/
Crea el objeto predefinido “pregunta”:
Dentro de esta estructura guardaremos las preguntas del archivo. Como es un archivo no muy grande, lo podemos hacer para simplificar el manejo del XML.
function pregunta(p1, p2, p3, p4, p5, p6, p7){
this.numero = p1; //Numero de pregunta
this.texto = p2; //Texto de la pregunta
this.op1 = p3; //Opcion 1
this.op2 = p4; //Opcion 2
this.op3 = p5; //Opcion 3
this.correcto = p6; //Opcion correcta
this.kilometros = p7; //Valor de la pregunta en KM
this.ya = 0; //0 no ha sido preguntado, 1 ya fue
}
/**************************************************************/
Función cargaXML:
Aquí es donde comienza la diversión. En la variable allText se carga todo el archivo como una serie de caracteres sin delimitadores. En la variable a se almacenará el primer nodo, en este caso, la primera pregunta. Con la función objetoXML.childNode, se crea un vector con cada uno de los nodos, es decir, cada nodo tiene un bloque de pregunta completa, con toda las etiquetas y sus nodos. Como ya es un simple vector o vector, la siguiente instrucción nos indica cuántas preguntas hay en el archivo, por lo que ahora barreremos cada una de las preguntas, y las vaciaremos en los objetos creados pregunta, que son más sencillos de manejar.
Dentro del ciclo, lo primero que hacemos es vaciar el valor del nodo otra vez con la función objetoXML.childNode, con lo cual ya tendremos cada uno de los nodos específicos de la pregunta. Como puede observar, utilizamos variables temporales para obtener el valor de cada uno de los nodos de la pregunta, que ya fueron explicados. El siguiente paso es hacer otro vector de objetos preguntas. Así es muy fácil manejar el archivo, pues ya lo tenemos prácticamente en forma matricial.
La siguiente instrucción lee el siguiente nieto. En nuestro caso, la siguiente pregunta... y eso es todo para lo que utilizaremos al XML. No es mucho, pero nos sirve para un primer acercamiento al XML, y para tener un jueguito que lee un archivo externo. También se podría manejar arreglos (pero es poco dinámico, pues hay que rehacer la película si se quiere modificar o agregar preguntas) o se puede utilizar un archivo con variables, pero con esto al menos conocemos (aunque sea un poco), el XML.
function cargaXML(){
allText = preguntaXML.firstChild; //Lee todo el archivo
a = allText.firstChild; //Lee el primer nodo
arrayPreguntas = allText.childNodes; //Hace el array de preguntas
numPreguntas = arrayPreguntas.length; //Evalua el no de preg. en el archivo
for (var i=0;i<numPreguntas;i++){
laPregunta = a.childNodes; //Genera Vector y vacia variables
num = parseInt(laPregunta[0].firstChild.toString());
tex = laPregunta[1].firstChild.toString();
op1 = laPregunta[2].firstChild.toString();
op2 = laPregunta[3].firstChild.toString();
op3 = laPregunta[4].firstChild.toString();
ok = laPregunta[5].firstChild.toString()
km = parseInt(laPregunta[6].firstChild.toString());
todasLasPreguntas
= new pregunta(num, tex, op1, op2, op3, ok, km);
a = a.nextSibling; //Lee Proximo nodo
}
}
/**************************************************************/
Función buscaPregunta:
Esta función es muy sencilla. Solo vacía los valores de los objetos, dependiendo de cada pregunta marcada la azahar, en variables de trabajo, o e su defecto, en los textos dinámicos.
function buscaPregunta(buscaPregunta){
myPregunta = todasLasPreguntas[buscaPregunta].texto;
opcion1 = todasLasPreguntas[buscaPregunta].op1;
opcion2 = todasLasPreguntas[buscaPregunta].op2;
opcion3 = todasLasPreguntas[buscaPregunta].op3;
correcto = todasLasPreguntas[buscaPregunta].correcto;
kilometros = todasLasPreguntas[buscaPregunta].kilometros;
}
/**************************************************************/
Función Evalua:
Esta función se ejecuta cuando el jugador ha respondido a la pregunta de la computadora. La respuesta no es mas que el número de botón seleccionado, almacenado en una variable. Si esta variable coincide con la repuesta almacenada en los archivo (la variable correcto) se incrementa el contador de preguntas acertadas. Si no coinciden, se incrementa el otro contador. Después se evalúan los dos contadores para determinar si el juegador ganó, perdió o sigue compitiendo.
function evalua(respuesta){
if (correcto==respuesta){ //Evalua respuesta
buenas++; //Incrementa variable
} else {
malas++; //Incrementa malas
}
if (buenas>=META){
winner="Ganaste!"; //Ya gano 
gotoAndPlay (2);
}
if (malas>=META){
winner="Lo siento, perdiste"; //Ya perdio 
gotoAndPlay (2);
}
proximaPregunta(); //La que sigue
}
/**************************************************************/
Función proximaPregunta:
El chiste de esta función, es validar que la pregunta no haya sido utilizada, de lo contrario, si su archivo no es muy extenso, es probable que una misma pregunta salga más de una vez. Por ello efectuamos un ciclo verificando que la pregunta no haya sido utilizada. Ojo: Sus preguntas deben ser suficientes para que este ciclo no caiga en un loop indefinido, o puede añadir un poco de código para evitar este problema.
Los siguientes pasos son buscar la pregunta y avanzar las fichas (la que proceda).
function proximaPregunta(){
do {
iPregunta=random(numPreguntas); //Busca pregunta nuevecita
} while (todasLasPreguntas[iPregunta].ya==1);
todasLasPreguntas[iPregunta].ya=1; //La marca como ya hecha
buscaPregunta(iPregunta); //Busca pregunta
avanza_ignorancia(malas); //Dibuja Ignorancia
avanza_camello(buenas); //Dibuja su ficha
}
/**************************************************************/
Funciones avanza_ignorancia y avanza_camello:
Estas funciones son bastantes sencillas. Simplemente se marchan los MC de cada una de las fichas y se establecen las coordenadas con cada uno de los contadores y las variables buenas y malas, Por último se actualiza los textos dinámicos que nos sirven de marcador. Y listo, ya tenemos un maratón quitados de la pena.
function avanza_ignorancia (malas) {
setProperty ("_root.ignorancia", _x, ignorancia_x + avanza * malas);
setProperty ("_root.ignorancia", _y, ignorancia_y);
myMalas = malas;
}
/**************************************************************/
function avanza_camello (buenas) {
setProperty ("_root.camel", _x, camello_x + avanza * buenas);
setProperty ("_root.camel", _y, camello_y);
myBuenas = buenas;
}
/**************************************************************/
Botón de respuesta:
Lanza la función de evalua, vista anteriormente, con el número de botón seleccionado
on (release) {
evalua(1);
}
Botón continua:
Al finalizar el juego, ya sea que haya ganado o no, el botón para continuar limpia las variables y regresa al primer cuadro.
on (release) {
for (var i=1;i<numPreguntas;i++){
todasLasPreguntas.ya=0;
}
buenas = 0;
malas = 0;
gotoAndPlay (1);
}
Al infinito y más allá:
Usted puede hacer tan complicado como guste este juego. Se puede hacer mucho en los movimientos del tablero. También puede incluir a mas de un jugador, inclusive puede tener a varios jugadores remotos jugando en Internet (aunque el juego seria un poco más elaborado, pero con Flash y XML es posible).
