Comunidad de diseño web y desarrollo en internet

Juego de descubrir imagenes idénticas en Actionscript

Como actividad de curso desarrollamos un juego muy conocido, ese de encontrar pares de imágenes iguales en Flash. En dicho juego se muestra al jugador una arreglo de botones (o cartas, u objetos), como se aprecia en la siguiente figura:



Al hacer Clic sobre alguno de esos botones se hace visible una imagen asociada a él:



Al hacer Clic en otro botón se hará visible una segunda imagen, pudiendo darse dos situaciones, que sean sean distintas ó que sean iguales:






Si son distintas entonces, después de una breve pausa, ambas se ocultan nuevamente. Pero si son iguales, ambas permanecerá visibles. El juego termina cuando se logra formar todos los pares de imágenes

Nos propusimos realizar este juego usando exclusivamente ActionScript e incorporarle tres variaciones:

  • - Los pares de imágenes "iguales" son en realida las dos mitades de una sola imagen
  • - Asociado a cada botón existirá un sonido que es la mitad de un sonido completo
  • - Se podrá seleccionar entre varias categorías de imágenes a usar en cada juego


Es decir, se trata de un memorice visual y auditivo.

Desarrollo



El juego usará 16 componentes LOADER, usados para cargar las 16 imágenes, dispuestos en cuatro filas de cuatro Loaders cada una. Como cada dos de esos Loaders cargarán y mostrarán la mitad de una imagen hemos decidido que los nombres apropiados para los archivos correspondientes a esas imágenes podrían ser:

0a.jpg, 0b.jpg, 1a.jpg, 1b.jpg, 2a.jpg, 2b.jpg, ..., 7a.jpg, 7b.jpg donde

  • a=primera mitad,
  • b=segunda mitad


Pero como también usaremos categorías de imágenes agregaremos una segunda letra, correspondiente a la categoría(a=Políticos, b=Farándula, c=Artístas, ...).

Por ejemplo: 1aa.jpg y 1ba.jpg corresponderán a las dos mitades de la imagen 1 cuando de categoría 'Políticos', mientras que 1ab.jpg y 1bb.jpg corresponderán a las dos mitades de la imagen 1 de categoría 'Farándula'

En estos nombres hemos dejado en primer lugar el número (0, 1, 2, ... 7) pues eso nos permitirá extraerlo durante ejecución del código para usarlo como índice en algunas de las acciones que realiza la lógica del programa.

Par crear los 16 objetos LOADER y situarlos regularmente en filas y columnas usamos la siguiente función escrita en ActionScript:



Con esto sólo hemos creado los componentes, no hemos cargados las imágenes aún.

IMPORTANTE: para que el código anterior funcione debemos tener UN objeto LOADER en la Biblioteca de Flash durante edición, lo cual se logra fácilmente abriendo juntas las ventanas 'Biblioteca' y 'Componentes', arrastrando entonces el componente LOADER desde la ventana 'Componentes' a la ventana 'Biblioteca'.
También deberán arrastrarse a la ventana 'Biblioteca' un objeto BUTTON, un objeto COMBOBOX y un objeto LABEL, que usaremos en este programa.

Luego agregamos 16 objetos BUTTON de tamaño y ubicación tales que queden SOBRE los objetos LOADER, de modo que ocultarán las imágenes cargadas en ellos. Esto lo hacemos con la siguiente función:



De forma similar ejecutamos funciones para agregar un COMBOX y un LABEL, mediante las funciones:



y



Con todo esto la lógica del programa se reduce a sólo esto:
colocaCargadores();
colocaBotones();
colocaCombo();
colocaTexto();
colocaBotonOtraVez();
revolver();


En donde la función revolver() es la encargada de cargar aleatoriamente las 16 imágenes en los 16 objetos Loader e inicializar todas las variables del juego para comenzar uno nuevo.

Esa función revolver() es la siguiente:


Su lógica no es muy difícil de entender, se genera al azar un número del 0 al 7 y se acepta sólo si ese número aún no ha sido usado dos veces. Con ese número se "arma" el nombre de la imagen a cargar, agregando 'a' cuando es la primera vez que se ese número se obtuvo al azar (es decir, tomando la mitad 'a' del par) y agregando 'b' cuando el número ha sido generado por segunda vez (es decir, tomando la mitad 'b' del par).

Al nombre así generado se le agrega además la categoría, según la elección hecha por el jugador mediante el ComboBox. Este nombre se guarda en el arreglo f[ ], que permitirá asignar a cada objeto LOADER su imagen.

La parte más importante de este programa es la función asociada al eventon onRelease asociada a cada botón, la cual habíamos quedado de explicar. Dicha función es la siguiente:


La lógica de esta función es la siguiente:
Al hacer Clic sobre un botón, si está habilitado hacer Clic (variable puede está en verdadero) entonces oculta este botón, permitiendo ver la imagen que hay debajo de él (mostrada por el objeto LOADER correspondiente). Además memoriza en la variable act el número de este botón.

Luego pregunta si la variable Clic está ó no en 1. Si está en 1 significa que ya se había hecho un Clic antes en otro botón, de modo que este es el segundo botón del par y debe comparase la imagen asociada a este botón con la imagen asociada al botón anterior (cuyo número está en la variable ant). La comparación se hace valiéndose de los números presentes en los nombres de los respectivos archivos .jpg (los cuales están en el arreglo f [ ]).

Si ambas imágenes no son del mismo par entonces debe hacer visibles de nuevo los respectivos botones a fin de ocultar ambas imágenes, pero debe hacerlo después de una breve pausa a fin de que el jugador perciba su error. Para lograr esto se ejecuta la función sonDistintas() de forma retardada mediante setInterval( ). En este caso se programó 1 segundo de espera. Para evitar que el jugador haga Clics en otros botones durante esta espera se coloca en falso la varibale puede

La función sonDistintas() hace visibles ambos botones y es la siguiente:



Por otro lado, si ambas imágenes eran iguales entonces cuenta un par más logrado y si ya se completaron 8 pares anuncia que el juego ha terminado.

La verdad es que una explicación más detallada tendría dos defectos...me significaría mucho trabajo y sería tedioso leerla. Por eso agrego a continuación dos enlaces que permiten obtener el proyecto Flash completo, con el código abundantemente comentado y que permitirá, además que pruebes el juego.

Baja el .FLA, imagenes y sonidos


¡Eso es todo!...me tomó mucho tiempo escribir todo esto de modo que espero que le sea útil a más de alguien

¡que estén bien!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate