Como se hizo. Envío de datos a un juego desde un iframe html embebido en él

Los juegos del Proyecto AJDA y las escenas de DescartesJS en general, pueden contener páginas HTML integradas en ellos, de forma  que un espacio del juego sea una página HTML. Vamos a analizar como se envían datos al juego desde el iframe HTML que está embebido  en él,lo cual tiene diversas utilidades que trataremos en otros artículos

El iframe que está embebido será una sencilla página HTML, que llamaremos hijo.html y que contiene en su cuerpo dos elementos de entrada de datos, un campo de texto (con identificador CT) y un selector (con identificador SL):

<input name="textfield" type="text" id="CT" value="Campo de texto" >

<select name="selec" id="SL">

      <option value="0" selected></option>

      <option value="1">A</option>

      <option value="2">B</option>

      <option value="3">C</option>

      <option value="4">D</option>

    </select>

Para que se puedan enviar los datos al juego, en la cabecera del iframe embebido en el juego se debe incluir el siguiente código:

<head>
<script>
 
      window.onload = function(evt) {
 
        //Envío de la variable SL del HTMLiFrame al juego que lo contiene
        var ct1 = document.getElementById("SL");
        // cuando el slector cambia, de valor se envía el dato al juego padre  y se realiza una actualizacion. 
         ct1.addEventListener("change", function(evt) {
          window.parent.postMessage({ type: "set", name: "SL", value: this.value }, '*');
          window.parent.postMessage({ type: "update" }, '*');
        });
  //Envío de la variable CT del HTMLiFrame al juego que lo contiene
        var ct2 = document.getElementById("CT");
        // cuando el campo de texto cambia, es decir hay un enter o click, se envia el valor al juego padre.
        ct2.addEventListener("change", function(evt) {
          window.parent.postMessage({ type: "set", name: "CT", value: this.value }, '*');
          window.parent.postMessage({ type: "update" }, '*');
        });
      }
  
</script>
</head>
 
Al modificarse los campos del iframe embebdido en el juego, se enviarán a éste con el nombre establecido en  type: "set", name: "NOMBRE DE LA VARIABLE QUE SE RECIBIRÁ EL JUEGO". En este caso el evento addEventListener, cuando se produce un cambio en el valor del elemento al que está asociado, desencadena el envío del valor del mismo a través de la variable definida en set en la instrucción window.parent.postMessage.

Como se hizo. Juegos con tiempo

En parte de los juegos de AJDA es necesario utilizar y medir el tiempo de duración de las preguntas u otras acciones del juego.

El tiempo es un valor que se introduce en una o varias variables y cuya variación se controla normalmente a través del algoritmo de la pestaña Animación del editor de DescartesJS.

 
A través del mismo se inicializan las variables y se establece cuando empieza, se para, reanuda, etc, a través de las instrucciones incluidas en sus apartados hacer y mientras. A través del mismo se pueden introducir varias variables para controlar más de un tiempo, por ejemplo, para controlar un tiempo para cada jugador.
 
Sin embargo, es importante tener en cuenta que la ejecución del algoritmo puede ser más o menos rápida dependiendo del equipo informático en el que se ruede. Además, en muchas ocasiones puede ser conveniente poder modular el transcurso del mismo.
 
Por ello, los juegos que utilizan tiempo, llevan un control tipo barra para modulación de la velocidad del mismo en la parte superior derecha. Este control, llamado habitualmente TIM, puede ser modificado en cualquier momento del juego y cuyo valor se incluyen en los incrementos y decrementos de tiempo de los juegos.
 

 

Otra cuestión relacionada con el tiempo es que cuando los cronómetros se presentan en pantalla y se quiere que el valor del tiempo aparezca centrado en ellos, al pasar de 3 cifras, a 2 o a 1, la posición del valor del tiempo del cronómetro se descentra. Actualmente DescartesJS contiene funciones que permiten centrar los textos, pero cuando la mayoría de los juegos fueron realizados dichas instrucciones no estaban implementadas. Para ello se utilizaron condicionales que desplazaban la posición de los textos según su número de cifras:
 
 [20+((t>=10)?5),30]
 
Otra opción más reciente fue utilizar controles tipo botón, que no ejecutasen ninguna acción para utiliza cronómetros y marcadores con valores centrados.

Como se hizo. Efectos sonoros

Los juegos didácticos del Proyecto AJDA cuentan con efectos sonoros, que pueden activarse o desactivarse en cualquier momento del juego a través del correspondiente control situado en la parte superior derecha:

 

Al ser pulsado este control el valor de la variable MUS cambia de 0 a 1 y viceversa a través del siguiente cálculo:

MUS=(MUS=0)?1:0
 
Cuando MUS=0, la música está activada y cuando MUS=1 está desactivada. La imagen que se muestra en el control de sonido depende del valor de la variable MUS.
[(MUS=0)?'sonido-on.png':'sonido-off.png']
 
Cada uno de los efectos sonoros de los juegos se encuentra en un fichero con extensión .mp3 y estos se activan normalmente a través de eventos que se de forma alterna cuando se cumplen una determinadas condiciones establecidas por la dinámica del juego.
 
evento='si;' condición='(condiciones) acción='reproducir' parámetro='agua.mp3'
Cuando el efecto sonoro es de mayor duración y este se quiere detener cuando se cumpla una determinada condición, se incluye la palabra stop tras el nombre del fichero en el evento correspondiente.
 
evento='si;' condición='(condiciones) acción='reproducir' parámetro='agua.mp3 stop'

El fichero de texto que contiene el efecto sonoro se encuentra el el mismo directorio o carpeta del juego. Si un fichero de sonido se sustituye por otro con el mismo nombre, el sonido presentado sería el del nuevo fichero.
 
Actualmente DescartesJS tiene la posibilidad de incluir reproductores de audio y vídeo, con panel de controles de reproducción y parámetros específicos que permiten el control de las mismas mediante instrucciones de Descartes.

“El Cazador. A la caza de los secretos de la Alquimia”

Una cuestión fundamental a la hora de utilizar juegos didácticos es la forma de ponerlos en práctica. El diseño, la preparación previa, la contextualización, los recursos, etc, son aspectos fundamentales para su buen funcionamiento. Pero podemos ir un paso más allá, utilizando los juegos aplicando metodologías de gamificación, sumergiendo a los participantes en un entorno, mecánicas y dinámicas que potencian y enriquecen el proceso de una forma significativa. En este artículo vamos a tratar cómo hemos realizado una actividad gamificada utilizando los juegos del Proyecto AJDA y presentaremos un vídeo donde se muestra su resultado, su título es:

“El Cazador. A la caza de los secretos de la Alquimia”

 
Nos situamos en la Europa medieval, los alquimistas buscan entre otras cosas la riqueza y la eternidad. La piedra filosofal y el elixir de la vida son sus codiciados objetivos, pero la rivalidad entre los alquimistas es feroz y los grandes maestros no permiten a los advenedizos irrumpir en su jerarquizado mundo por temor a que alcancen antes que ellos lo que llevan toda la vida buscando, y harán lo que haga falta para impedirlo.
 
Cuatro iniciados en el arte de la Alquimia pretenden conseguir las riquezas y secretos que tras ella se ocultan, pero la Gran Maestra alquimista está al tanto de los planes de sus pupilos y urde un plan para darles caza uno a uno y arrebatarles los tesoros conseguidos y así mantener su estatus y preponderancia.
 
El pueblo será testigo de los duelos entre la Gran Maestra y sus aprendices y trasmitirá estas vivencias de generación en generación hasta convertirse en leyenda.
 
El objetivo de los aprendices alquimistas será conseguir la mayor cantidad de oro posible mediante la transmutación de sus puntos y lo que es más importante, salvar su vida que se ve amenazada por la Gran Maestra que se siente traicionada por sus rebeldes pupilos y ve peligrar su posición en el gremio. Esta batalla se llevará a cabo a través del concurso "El Cazador", cuya dinámica explicamos a continuación.
 
En este concurso participan cuatro jugadores y se estructura en tres fases:
  • Primera fase. Cada jugador, recibirá durante un minuto preguntas por parte del presentador, y por cada acierto conseguirá 1.000 puntos.
  • Segunda fase. Con los puntos conseguidos el participante se enfrentará en un duelo de preguntas individual al “cazador o cazadora” (oponente experto/a). El cazador hará una oferta de puntos por encima y otra por debajo de los conseguidos por el concursante, que según la propuesta elegida estará a cuatro, cinco o seis casillas de llegar a “casa”. A continuación empieza “La caza”, concursante y cazador recibirán preguntas que deberán responder de forma simultánea e independiente. Por cada acierto avanzarán una casilla. El objetivo del jugador es llegar a “casa” y el del cazador atraparlo antes. Cada uno de los cuatro jugadores realizará de forma individual las dos primeras fases, los participantes que sean “cazados” en la segunda fase serán eliminados y los que lleguen “a casa” sumarán al bote común del equipo los puntos ganados en la segunda fase y se enfrentarán al cazador en la “caza final”.
  • Tercera fase (“caza final”). Durante dos minutos los jugadores no eliminados recibirán preguntas por parte del presentador. Cada una deberá ser respondida por un solo jugador, el que primero dé al pulsador (si responde otro la respuesta se considerará fallada). Cada acierto dará al equipo de jugadores una casilla de ventaja. Además el equipo partirá con una ventaja inicial de tantas casillas como jugadores haya clasificados. Después llega el turno del “cazador”, que durante dos minutos recibirá preguntas. Si el cazador falla una pregunta habrá rebote para el equipo de jugadores, que de forma conjunta podrá responder, y si acierta hará retroceder una casilla al “cazador”. El equipo de jugadores gana si el cazador no logra igualar las casillas de ventaja que los jugadores han conseguido y el premio se reparte a partes iguales entre los participantes no eliminados.

Una característica del concurso es que cada día el programa adquiere como hilo conductor una temática de forma que concursantes, cazador y presentador adquieren los papeles de la misma a lo largo del programa, y en nuestro caso es la Alquimia.

La puesta en práctica se llevó a cabo en el laboratorio de Física y Química, utilizando tres juegos didácticos del Proyecto AJDA, cada uno de los cuales se corresponde con una de las etapas del concurso, para los que se elaboraron en torno a 300 preguntas de Física y Química de Bachillerato,contando con los siguientes participantes:

  • Alquimistas aprendices (Concursantes): Paracelso Morandine, Willian Bacon, Blas Trimigesto y Javier Avicena (alumnos de la asignatura de Física de 2º Bachillerato).
  • Gran Maestra alquimista (Cazadora): Vanessa León (Profesora de Química).
  • Amo del Calabozo (Narrador y presentador): Jesús Muñoz (Profesor de Física).
  • Sauron (Cámara y testigo omnisciente): Marcos Rodríguez (Profesor de Biología).
  • Pueblo medieval: Alumnos de Biología.

Los alquimistas aprendices obtendrán por cada 1.000 puntos conseguidos una insignia de la asignatura de Física de cualquiera de las tres evaluaciones. El resultado de la experiencia se muestra en la siguiente composición:

Como se hizo. Continuación de partidas

Los juegos didácticos del Proyecto AJDA permiten guardar las partidas y continuarlas en otro momento. Comentamos los principales aspectos de la implementación de este característica en los juegos.

Los juegos están preparados para poder ser guardados en determinados momentos, esto se refleja en que el control "Guardar partida", situado en la parte superior centro, esté o no activado:

 

Cuando se acciona este control los datos significativos del juego se almacenan en un vector denominado GP1 (a cada linea del vector se la da un valor de un dato del juego que debe ser guardado, GP1[0]=var0; GP1[1]=var1; GP1[2]=var2;...), después  se aplican las instrucciones: guardarpartida() y _Save_('NOMBRE-FICHERO.txt',partida).

El algorítmo guardarpartida(), pasa todos los valores del vector GP1 a la variable partida de la siguiente forma:

inicio='partida=''; conter=0; maximopar=nº lineas necesarias' 

hacer='partida=(conter<maximopar-1)?(partida+GP1[conter]+'\n'):partida+GP1[conter]; conter=conter+1' 

mientras='conter<maximopar'

La instrucción _Save_('NOMBRE-FICHERO.txt',partida), guarda los datos de la variable partida en un fichero de texto, cuyo nombre por defecto es NOMBRE-FICHERO.txt.

Por tanto, tenemos guardados en un fichero de texto los datos que permiten continuar una partida y podemos guadar tantos ficheros como momentos de la partida queramos poder continuar.

Para continuar una partidas guardada, al comienzo del juego se presenta el botón "Continuar partida".

 
Al pulsar sobre se abrirá el explorador de archivos del navegador y podremos seleccionar un fichero con los datos guardados de una partida del juego que queramos continuar, utilizando la instrucción _Open_('abrirficheropar'), que además ejecuta el algoritmo abrirficheropar(), que en su campo hacer ejecuta las siguientes acciones:
  • Crear la variable cadenapar1, introduciendo <w1> y </w1> como primera y última línea y entre ellas el contenido del fichero que se acaba de cargar que se encuentra en DJS.fileContent.
cadenapar1='<w1>\n '+DJS.fileContent+'</w1>';

 

  • Pasa el contenido de la variable cadenapar1 al vector w1 mediante la  instrucción:

_StrToVector_(cadenapar1,'w1';)

 

  • Se establece una variable  PCAR que si su valor es 1, indica que se ha cargado correctamente.
  • Se asignan los datos del vector wp1 a las variables del juego que les corresponden, 
jug1=(PCAR=1)?w1[2]:jug1 ; jug2=(PCAR=1)?w1[3]:jug2 ;  TIME=(PCAR=1)?w1[4]:TIME... 

 

El juego continuará ahora con los datos de la partida que se guardó. 

Página 1 de 9

SiteLock

Módulo de Búsqueda

Palabras Clave

Titulo

Categoría

Etiqueta

Autor

Acceso

Canal Youtube

 Youtube CanalDescartes

Calculadora Descartes

Versión 3.1 con estadística bidimensional

ComparteCódigo para embeber

Utilizamos cookies para mejorar nuestro sitio web y su experiencia al usarlo. Las cookies utilizadas para el funcionamiento esencial de este sitio ya se han establecido. Para saber más sobre las cookies que utilizamos y cómo eliminarlas , consulte nuestra Política de Privacidad.

  Acepto las Cookies de este sitio.
EU Cookie Directive Module Information