Juegos 307

Un juego de Trivia con ActionScripts y XML

Flash nos permite realizar juegos de trivia de una manera muy sencilla y con muchas
variaciones en estos juegos. Las preguntas por lo general cubren varios temas. Esta apli-
cacin podra ser til en la enseanza remota o e-learnig, ya que, mediante un poco de
cdigo ms, podemos efectuar una base de datos con las calificaciones de los alumnos.
Esta es slo una versin simplificada.
Usted puede hacer este juego de Trivia tan complejo como quiera. Existen algunos
con animaciones muy complejas para indicar una pregunta correcta o incorrecta. El ar-
chivo XML tambin est muy simplificado, pues slo tiene 20 preguntas y consta de un
solo tema. De hecho, la mayora del cdigo est tomado de otro juego de Maratn. Este
tutorial lo dividiremos en la explicacin del escenario, luego pasaremos a los smbolos
y objetos grficos. Por ltimo los actionScripts, con la referencia al archivo XML.
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. En esta escena tenemos dos fotogra-
mas: uno para el juego y el siguiente para los resultados.
En la parte superior se tiene el tablero para las preguntas y sus posibles respuestas.
En la parte media del escenario, sirve para desplegar los resultados, ya sea que la
pregunta se conteste de forma correcta o no.
Como puede observar, en la parte inferior, tenemos una especie de marcador que
contabiliza los aciertos y las fallas, as como el nmero de preguntas de la trivia y el n-
mero de la pregunta efectuada.
En el siguiente fotograma se tiene el resultado del juego si se gan o no.
Smbolos y Objetos grficos
Tampoco se tienen en el juego muchos smbolos u objetos grficos, salvo los botones
que los tom de la biblioteca propia del paquete. Hay tambin varios textos dinmicos
para el marcador y uno ms para el resultado final. No hay muchos ms smbolos.
Smbolo Tipo
Botn Respuesta Botn
Botn Contina Botn
MyBuenas Dinamic Text
MyMalas Dinamic Text
MyResultado Dinamic Text
Archivo XML
El XML es un lenguaje similar al HTML, de hecho se desarroll como una extensin
(eXtended Markup Lenguage). El archivo de las preguntas tiene el siguiente formato:
308 Programacin en Flash MX 2004
<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 extraa razn (al menos con la versin que yo manejo), Flash slo 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><correc-
ta>2</correcta><km>1</km></pregunta><pregunta><num>2</num><texto>
Cual es la capital deetc
El XMLno reconoce acentos, ni ees. Para eso hay que utilizar ciertos caracteres de control.
Letra Secuencia
"" &#224;
"" &#233;
"" &#237;
"" &#243;
"" &#250;
"" &#191;
El archivo lo puede hacer con cualquier procesador de palabra, slo hay que salvarlo
sin caracteres especiales y con la extensin XML. Si le apasiona este tema, puede con-
sultar cualquier libro de referencia (que seguramente pesar ms que un recin nacido).
Juegos 309
Figura 1
ActionScript
Las rutinas son muy sencillas. La mayora del cdigo se encuentra en la escena de
Inicio y de los dems puntos solamente se llaman como rutinas. El siguiente cuadro
nos ayudar:
Variables y constantes de inicio
Aqu es donde definimos las constantes que utilizaremos a lo largo del juego: las variables
para controlar las respuestas buenas y malas, y el arreglo donde se leern las pregun-
tas del archivo XML.
Es importante detenernos en las variables de 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 instruccin objetoXML.onLoad, se ejecuta la funcin marcada, en este ca-
so la funcin cargaXML que explicaremos ms adelante:
310 Programacin en Flash MX 2004
Rutina Ubicacin
Rutina de Inicio Escena Inicio
Funcin pregunta Escena Inicio
CargaXML Escena Inicio
BuscaPregunta Escena Inicio
Evala Escena Inicio
PrximaPregunta Escena Inicio
Lanza respuesta Botones de respuesta
Reinicia Juego Botn de reinicio
/**************************************************************/
var bueas = 0; //Contador de las buenas
var malas = 0; //Contador de las malas
var numPreguntas=0; //Se lee del XML
var correcto = 0; //Se lee del XML
var META=10; //Km para finalizar
var todasLasPreguntas = new Array(); //Guarda las preguntas del XML
var respuestaCorrecta = ;
var contadorPregunta = 1;
myTotal = META;
myPregunta = contadorPregunta;
/**************************************************************/
var aimlXML = new XML(); //Objeto XML
aimlXML.load(preguntas.xml); //Lee archivo XML
aimlXML.onLoad = loadedXML; //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.
Juegos 311
function pregunta(p1, p2, p3, p4, p5, p6){
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.ya = 0; //0 no ha sido preguntado, 1 ya
fue
}
/**************************************************************/
Funcin cargaXML
Aqu es donde comienza la diversin. En la variable allText se carga todo el archivo
como una serie de caracteres sin delimitadores. En la variable a se almacenar el pri-
mer nodo, en este caso, la primera pregunta. Con la funcin objetoXML.childNode, se
crea un vector con cada uno de los nodos, es decir, cada nodo tiene un bloque de pre-
gunta completa, con todas las etiquetas y sus nodos. Como ya es un simple vector o
arreglo, la siguiente instruccin nos indica cuntas preguntas hay en el archivo, por lo
que ahora barreremos cada una de las preguntas, y las vaciaremos en los objetos crea-
dos pregunta, que son ms sencillos de manejar.
Dentro del ciclo, lo primero que hacemos es vaciar el valor del nodo otra vez con
la funcin objetoXML.childNode, con lo cual ya tendremos cada uno de los nodos es-
pecficos 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 fcil manejar el ar-
chivo, pues ya lo tenemos prcticamente en forma matricial.
La siguiente instruccin lee el siguiente nieto. En nuestro caso, la siguiente
pregunta... y eso es todo para lo que utilizaremos a XML. No es mucho, pero nos
sirve para un primer acercamiento a XML, y para tener un jueguito que lee un ar-
chivo externo. Tambin se podran manejar arreglos (pero es poco dinmico, pues
hay que rehacer la pelcula 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), de XML.
Como puede observar, se tiene un campo de kilmetros, el cual es herencia del juego
de Maratn.
Funcin buscaPregunta
Esta funcin es muy sencilla. Solo vaca los valores de los objetos, dependiendo de
cada pregunta marcada la azar, en variables de trabajo, o en su defecto, en los textos
dinmicos. Para ponerle un poco de sabor al juego, al enunciado de la pregunta le in-
cluimos un efecto, donde las letras se desplazan de diferentes lugares. Utilizando este
mismo formato, es decir, convirtiendo en un clip de pelcula a cada una de las letras, se
pueden hacer muchos efectos interesantes. Note que las coordenadas son fijas. Necesi-
ta un poco ms de cdigo para hacer dinmicas las ubicaciones. En otro tutorial se
detallar en efectos de texto.
312 Programacin en Flash MX 2004
function cargaXML(){
allText = preguntaXML.firstChild; //Lee todo el archivo
a = allText.firstChild; //Lee el primer nodo
arrayPreguntas = allText.childNodes; //Hace el array de pregun-
tas
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[i] = new pregunta(num, tex, op1, op2, op3,
ok, km);
a = a.nextSibling; //Lee Proximo nodo
}
}
/**************************************************************/
Funcin Evala
Esta funcin se ejecuta cuando el jugador ha respondido a la pregunta de la compu-
tadora. La respuesta no es ms que el nmero de botn seleccionado, almacenado en
una variable. Si esta variable coincide con la respuesta almacenada en los archivos (la
variable correcto) se incrementa el contador de preguntas acertadas. Si no coinciden,
se incrementa el otro contador. Tambin se evala si ya se realizaron todas las pregun-
tas y lanza una evaluacin de la trivia.
Juegos 313
function buscaPregunta(buscaPregunta){
cadenaPregunta = todasLasPreguntas[buscaPregunta].texto;
opcion1 = todasLasPreguntas[buscaPregunta].op1;
opcion2 = todasLasPreguntas[buscaPregunta].op2;
opcion3 = todasLasPreguntas[buscaPregunta].op3;
correcto = todasLasPreguntas[buscaPregunta].correcto;
kilometros = todasLasPreguntas[buscaPregunta].kilometros;
if(correcto==1) respuestaCorrecta = todasLasPreguntas
[buscaPregunta].op1;
if(correcto==2) respuestaCorrecta = todasLasPreguntas
[buscaPregunta].op2;
if(correcto==3) respuestaCorrecta = todasLasPreguntas
[buscaPregunta].op3;
for (i=0;i<cadenaPregunta.length;i++){
duplicateMovieClip(Letra,Letra+i,i);
mc = _root[Letra+i];
mc.letraTexto = cadenaPregunta.substr(i,1);
mc.letraOriginal = mc.letraTexto;
mc.efecto = 2;
mc.y = 45
mc.x = 35 + i * 12;
mc.estado = 0;
}
}
/**************************************************************/
function evalua(respuesta){
if (correcto==respuesta){ //Evalua respuesta
buenas++; //Incrementa variable
myEstado = Correcto, la respuesta es:
myRespuestaCorrecta = respuestaCorrecta;
gotoAndStop(Main,2);
Funcin proximaPregunta
El chiste de esta funcin es validar que la pregunta no haya sido utilizada, de lo con-
trario, si su archivo no es muy extenso, es probable que una misma pregunta salga ms
de una vez. Por ello efectuamos un ciclo verificando que la pregunta no haya sido uti-
lizada. Ojo: Sus preguntas deben ser suficientes para que este ciclo no caiga en un ciclo
indefinido, o puede aadir un poco de cdigo para evitar este problema.
Incrementa los contadores de preguntas contestadas correcta e incorrectamente.
314 Programacin en Flash MX 2004
} else {
malas++;
myEstado = Lo siento, la respuesta correcta es:
myRespuestaCorrecta = respuestaCorrecta;
//Incrementa malas
gotoAndStop(Main,2);
}
if (contadorPregunta==META){
myEstado = Tu evaluacion es +buenas+ de +META;
if(buenas/META>.6) {
myRespuestaCorrecta = Felicidades;
} else {
myRespuestaCorrecta = Lo sentimos, tienes que repetir el
examen;
}
gotoAndStop (Main,2);
}
//proximaPregunta(); //La que sigue
}
/**************************************************************/
/**************************************************************/
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
myMalas = malas;
myBuenas = buenas;
}
/**************************************************************/
Botn de respuesta
Lanza la funcin de evalua, vista anteriormente, con el nmero de botn seleccionado
Juegos 315
on (release) {
evalua(1);
}
Botn contina
Al finalizar el juego, ya sea que haya ganado o no, el botn para continuar limpia las
variables y regresa al primer fotograma.
on(press){
for (i=0;i<40;i++){
mc = _root[Letra+i];
mc._visible = false;
}
contadorPregunta++;
myPregunta = contadorPregunta;
if (contadorPregunta<=META){
gotoAndPlay(Main,1);
} else {
gotoAndPlay(Inicio,1);
}
}
316 Programacin en Flash MX 2004
Las letras
Como puede observar, se pueden variar los efectos de las letras para que se muevan
aleatoriamente, de arriba a bajo, giren, etc. Como ya se dijo, en otro tutorial se detalla-
rn los diferentes efectos. En este se maneja el nmero 2, donde las letras escogen una
posicin al azar y se colocan progresivamente en donde les corresponde.
onClipEvent(load){
if(this.efecto==2){
n = 0;
startx = Math.random()*550;
starty = Math.random()*100;
this._x = startx;
this._y = starty;
}
}
Figura 2
Juegos 317
Usted puede hacer tan complicado como guste este juego. Por medio de herramientas
como PHP, ASP o XLM podemos elaborar casi un sistema de e-learnig, donde el usuario
se firma a la base de datos y las calificaciones se almacenan o se envan por correo elec-
trnico.
onClipEvent(enterFrame){
if(this.efecto==2){
n +=5;
if(n<=100){
this._x = this.x*n/100 + startx*(100-n)/100;
this._y = this.y*n/100 + starty*(100-n)/100;
}
}
}
Figura 3