Manejo de imágenes. Pequeña adaptación de una escena de juego de memoria. Nivel principiante.

Para aprender a utilizar el programa Descartes y elaborar o modificar escenas es importante desarrollar ciertas destrezas en el manejo de imágenes.
En este trabajo propongo la modificación de una escena de memoria de emparejar figuras. Solamente necesitas el programa paint, no necesitas el editor de escenas, incluso puedes utilizar el bloc de notas de windows en vez del programa de edición web.
Tomando de partida la escena de emparejar figuras de animales mamíferos, vamos a transformarla en otra utilizando otras imágenes.
En este trabajo no se va a explicar el funcionamiento de esa escena, sino el manejo de imágenes para utilizarlas en ella.

Lo más laborioso es conseguir las diez imágenes que necesitas, las puedes bajar de internet o utilizar imágenes que tengas propias.
Para bajar una imagen de internet se pica sobre ella con el botón derecho, así se desplegará un panel, se elige la opción guardar imagen como, se busca o se crea una nueva carpeta para guardar las imágenes en ella, se pone nombre a la imagen y se pulsa guardar.
Cuando ya tienes las diez imágenes guardadas en una carpeta vas a miniaturizarlas, para ello abres la carpeta donde las has guardado, pulsas sobre la opción ver, así se despliega el panel, eliges vistas en miniatura, así las verás todas en pequeño, pero todas al mismo tamaño, ahora pulsas la tecla de imprimir pantalla, esa tecla está arriba, al lado de F-12, esto es lo que se llama dar pantallazo, de esa manera se ha copiado la imagen de toda la pantalla. Abres el programa paint y le das a pegar.
Sin cerrar esa imagen abres otra vez paint. Es decir debes tener a la vez abiertas dos hojas de paint, porque vas a recortar las imágenes pequeñas del pantallazo y hacer con cada una de ellas una nueva imagen.
En la hoja del pantallazo eliges la herramienta selección en rectángulo y seleccionas la primera imagen en miniatura, eliges copiar, vas a la otra hoja de paint y eliges pegar, en ella despliegas el panel imagen, das atributos y ves las dimensiones de la imagen en pixeles, lo modificas poniendo 100 de ancho y 100 de alto. Estas dimensiones son las que necesitamos. Si no ha quedado bien centrada la seleccionas entera desde edición eliges seleccionar todo y lo mueves hasta centrarlo, quedará solamente un milímetro de borde blanco. Lo guardas en esa carpeta poniendo de nombre 1.jpg
Haces lo mismo con cada una de las restantes imágenes, poniendolas de nombre 2.jpg, 3.jpg, 4.jpg, ... La carpeta con esas imágenes numeradas va a acompañar al archivo de página web que estás elaborando. En esta escena, la carpeta donde están las imágenes numeradas se llama mamiferos.
La modificación de la escena que vas a hacer solamente va a ser cambiar el nombre de alguna palabra.
Puedes hacerlo con el editor de escenas o simplemente con tu editor de páginas web o con el portapapeles de windows, si lo haces con el bloc de notas portapapeles para guardarlo debes poner el nombre y la extensión .htm.
Abres el código de la escena, buscas en las líneas de gráficos, son la última parte del código, las que empiezan param name="G_0.1" ... En ésta primera línea debes cambiar la palabra mamíferos en el texto "Busca pares de imágenes de mamíferos" por la del tema que estás haciendo.
En las veinte líneas siguientes param name="G_02" ... vas a cambiar el nombre de la carpeta, en vez de llamarse mamíferos, vas a poner el nombre de tu carpeta en la que hayas guardado las imágenes en miniatura.
Después de cambiado compruebas que funciona si se ven las imágenes. Si no se ven puede ser debido a que la carpeta de imágenes no la tengas colocada en el mismo nivel que el de la página web, o que los archivos de tus imágenes tengan otra extensión diferente de jpg. Se pueden utilizar imágenes de otras extensiones como gif o png, pero deben coincidir con lo que tengas.

Un juego de memoria de emparejar. Informe de configuración.

Idea inicial.
Sobre un tablero rectangular se distribuye una cuadrícula de controles numéricos tipo botón.
están distribuidos en varias filas y columnas.
nf = número de filas , en este caso es 4.
nc = número de columnas , en este caso es 5.
El jugador pulsa sobre uno de esos controles, entonces el control desaparece y se ve la imagen que está bajo ese control.
El jugador pulsa sobre otro de esos controles, el control desaparece y se ve la imagen que está bajo ese otro control.
Si esas imágenes son iguales permanecerán destapadas, pero si son diferentes sólo estarán un segundo y tras ello aparecerán los controles y las imágenes quedarán ocultas.

Tamaño de la escena, las imágenes y los controles.
Para un juego de 20 casillas es necesario disponer de 10 imágenes de 100x100 pixeles.
El espacio se pone de escala 100 para que cada imagen encaje en una cuadrícula.
El tamaño de la escena será
ancho=100*nc
alto=100*nf+100 Estos valores se ponen no en fórmula, sino ya calculados, en número.
Los controles son de tipo botón de 100x100 se pone (...,...,100,100) Ocupan todo menos la parte de abajo que es para los mensajes. Cada imagen quedará oculta bajo su control.

Para que cada vez aparezcan las imágenes y los controles en lugar aleatorio.
La posición de cada control numérico y la de la imagen que tiene debajo esterá determinada por el número aleatorio natural que le haya correspondido.
Al comenzar vemos los controles con el mismo aspecto, pero en cada nueva partida están en un puesto diferente, están permutados.
Para conseguir esa permutación aleatoria de los primeros números naturales de nc*nf elementos voy a definir auxiliares.
Primeramente v1, v2, v3, v4, ... tantos como nc*nf
Les asigno un valor aleatorio decimal comprendido entre 0 y 1.
v1=rnd
v2=rnd
v3=rnd
... y así las demás.
Para obtener una serie de números naturales comparo esos valores.
a1=(v1>v1)+(v1>v2)+(v1>v3)+(v1>v4)+ ... ...
a2=(v2>v1)+(v2>v2)+(v2>v3)+(v2>v4)+ ... ...
a3=(v3>v1)+(v3>v2)+(v3>v3)+(v3>v4)+ ... ... y así las demás.
Para el caso de 20 cuadrados dispuestos en 5x4 los valores nc=5 , nf=4.
La posición de la imagen 1 será (a1%5,-ent(a1/5)%4)
La posición de la imagen 2 será (a2%5,-ent(a2/5)%4)
... ... ... y así las demás.

Los controles
La posición del control n1 será (10*(a1%nc),100*ent(a1/nc),100,100)
La posición del control n2 será (10*(a2%nc),100*ent(a2/nc),100,100)
... ... ... y así los demás, de esa forma se distribuyen en filas y columnas cubriendo todos los puestos.
En la acción calcular.
La expresión n=n+1 servirá de contador para saber las veces que se van pulsando controles.
Cada control pone valor 1 a la n de su número y anula a las de los demás controles.
Para n1 el parámetro será n=n+1;n1=1;n2=0;n3=0;n4=0;... ... ...
Para n2 el parámetro será n=n+1;n1=0;n2=1;n3=0;n4=0;... ... ...
Para n3 el parámetro será n=n+1;n1=0;n2=0;n3=1;n4=0;... ... ...
Para n4 el parámetro será n=n+1;n1=0;n2=0;n3=0;n4=1;... ... ...
... ... ...
Pares o impares
Los controles se pulsan por pares, aunque se pulsen uno tras otro, el primero permanece desaparecido hasta un segundo después de pulsar el otro, si coinciden las imágenes ya no vuelven a aparecer y se ven indefinidamente las imágenes que ocultaban, si las imágernes no son iguales, tras un segundo vuelven a aparecer los dos controles y las ocultan nuevamente.
Por eso es necesario saber si el control pulsado hace número par o impar.
p=(n/2=ent(n/2))
i=(n/2>ent(n/2))
Para que un control permanezca desaparecido y no se quite al pulsar el siguiente hasta que se pulse otro control en número impar hay que definir auxiliares .
i1 toma valor 1 cuando se ha pulsado el control n1 siendo número impar de controles pulsados. Permanece en valor 1 hasta que se pulsen otros dos controles.
i1=i?n1:i1
i2=i?n2:i2
i3=i?n3:i3
... ... ...
p1 toma el valor 1 cuando se ha pulsado el control n1 siendo número par de controles pulsados. Permanece en valor 1 hasta que se pulsen otros dos controles.
p1=p?n1:p1
p2=p?n2:p2
p3=p?n3:p3
... ... ...
El tiempo
Cuando se han destapado dos controles seguidos deben permanecer destapados un segundo más para que se puedan ver las imágenes que ocultaban, comprobar si son iguales o memorizar qué imagenes son. Eso se va a conseguir mediante este mecanismo:
Puesto que va a intervenir el tiempo necesitamos definir animación.
En pausa son los milisegundos de pausa que hace entre una transformación y otra, ponemos pausa='100'
t=t+0.1 esto hace que se ponga en marcha el cronómetro.
ti=i*t?t:ti indica el tiempo que marca el cronómetro cuando hay número impar de controles pulsados. Cuando se pulsa otro control ese valor deja de crecer y permanece en su valor último hasta que otra vez haya número impar de controles pulsados y siga tomando el valor del cronómetro.
ci=(ti+1>t) solamente toma valor 1 cuando están pulsados un número par de controles, ese valor sólo permanece un segundo, puesto que en un segundo t supera a ti+1, ya que ahora ti no crece.
El valor ci se utilizará para la condición dibujar-si de los controles.

Los controles emparejados deben permanecer ocultos
En este caso como tiene 20 controles, son parejas las que tienen igual la unidad.
n1 y n11
n2 y n12
n3 y n13
... ...
Eso se consigue definiendo auxiliares para ponerlos en la condición dibujar-si
son f1, f2, f3, f4, ... ... .
f1=(i1*p11+i11*p1)*p?1:f1 significa que se ha pulsado el control n1 y el n11 y hay un número par de controles pulsados.
f2=(i2*p12+i12*p2)*p?1:f2
f3=(i3*p13+i13*p3)*p?1:f3
... ... ...
De esta manera, cuando f1, f2, f3, ... toman valor, ya no lo pierden. Esos valores se utilizarán para la condición dibujar-si de cada control.
Esos valores sirven para la condición dibujar-si de cada control.
Ejemplo, para el control n1 la condición dibujar-si es (i1*ci+p1*ci*p+f1=0)
i1*ci significa que desaparece cuando está pulsado siendo impar su número.
p1*ci*p significa que continúa desaparecido cuando todavía no ha pasado un segundo de haber pulsado otro control más.
f1 significa que si n1 ha sido emparejado permanecerá desaparecido.

Mensaje de felicitación
Aparece cuando se han emparejado todos y por tanto han tomado valor los f1*f2*f3*f4*f5*f6*f7*f8*f9*f10.
Se indica muy bien si se ha resuelto en menos de 20 pares de intentos, es decir (n<40)
Se indica bien si lo ha resuelto entre 20 y 29 pares de intentos, es decir (n>39)*(n<60)
Se indica regular si lo ha resuelto entre 30 y 39 pares de intentos, es decir (n>59)*(n<80)
Se indica mal si lo ha resuelto en más de 40 pares de intentos, es decir (n>79)