Aquí hay una versión del clásico juego de memoria que permite a los visitantes de su página web hacer coincidir imágenes en un patrón de cuadrícula usando JavaScript.
Suministrando las imágenes
Tendrá que proporcionar las imágenes, pero puede usar las imágenes que desee con este script siempre que tenga los derechos para usarlas en la web. También deberá cambiar su tamaño a 60 píxeles por 60 píxeles antes de comenzar.
Necesitará una imagen para el reverso de las "cartas" y quince para los "frentes".
Asegúrate de que los archivos de imagen sean lo más pequeños posible o el juego puede tardar demasiado en cargarse. Con esta versión, he limitado el script a 30 tarjetas, ya que todas las imágenes harán que la página sea mucho más lenta de cargar. Cuantas más tarjetas e imágenes tenga la página, más lenta se cargará. Esto puede no ser un problema para aquellos con buenas conexiones de banda ancha, pero aquellos con conexiones más lentas pueden sentirse frustrados por el tiempo que lleva.
¿Qué es el juego de concentración de memoria?
Si no has jugado este juego antes, las reglas son muy simples. Hay 30 cuadrados o cartas. Cada tarjeta tiene una de 15 imágenes, y ninguna imagen aparece más de dos veces; estos son los pares que se combinarán.
Las tarjetas comienzan "boca abajo", ocultando las imágenes en los 15 pares.
El objetivo es aumentar todos los pares coincidentes en el menor tiempo posible.
El juego comienza seleccionando una carta y luego seleccionando una segunda. Si son un partido, permanecen boca arriba; Si no coinciden, las dos cartas se vuelven boca abajo. Mientras juegas, deberás confiar en tu memoria de cartas anteriores y sus ubicaciones para poder hacer partidas exitosas.
Cómo funciona esta versión de Concentration
En esta versión de JavaScript del juego, seleccionas cartas haciendo clic en ellas. Si los dos que seleccionas coinciden, permanecerán visibles, si no lo hacen, desaparecerán nuevamente después de un segundo más o menos.
Hay un contador de tiempo en la parte inferior que rastrea cuánto tiempo te lleva hacer coincidir todos los pares.
Si desea comenzar de nuevo, simplemente presione el botón del contador y se reorganizará todo el cuadro y podrá comenzar de nuevo.
Las imágenes utilizadas en esta muestra no vienen con el script, por lo que, como se mencionó, tendrá que proporcionar el suyo. Si no tiene imágenes para usar con este script y no puede crear las suyas, puede buscar imágenes prediseñadas adecuadas que sean gratuitas.
Agregar el juego a tu página web
El script para el juego de memoria se agrega a su página web en cinco pasos.
Paso 1: Copie el siguiente código y guárdelo en un archivo llamado memoryh.js.
// Juego de memoria de concentración con imágenes - Head Script
// copyright Stephen Chapman, 28 de febrero de 2006, 24 de diciembre de 2009
// puede copiar este script siempre que conserve el aviso de copyright
var back = 'back.gif';
var tile = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif',
'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif',
'img12.gif', 'img13.gif', 'img14.gif'];
función randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; para
(var i = 0; i <15; i ++) {im [i] = nueva imagen (); im [i] .src = mosaico [i]; azulejo [i] =
''; mosaico [i + 15] =
mosaico [i];} función displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = inicio; función start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} function cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sec <10? '0': '') + seg; tmr ++;} function disp (sel) {if (tno> 1)
{clearTimeout (cid); ocultar ();} document.getElementById ('t' + sel) .innerHTML =
tile [sel]; if (tno == 0) ch1 = sel; else {ch2 = sel; cid = setTimeout ('ocultar ()',
900);} tno ++;} función oculta () {tno = 0; if (mosaico [ch1]! = mosaico [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; si (cnt> = 15)
clearInterval (tid);}
Reemplazará los nombres de archivo de imagen para espalda y loseta con los nombres de archivo de tus imágenes.
Recuerde editar sus imágenes en su programa de gráficos para que tengan 60 píxeles cuadrados para que no tarden demasiado en cargarse (el tamaño combinado de las 16 imágenes utilizadas para mi ejemplo es de solo 4758 bytes, por lo que no debería tener problemas para mantener el total bajo 10k).
Paso 2: Seleccione el código a continuación y cópielo en un archivo llamado memory.css.
.blk {ancho: 70px; altura: 70 px; desbordamiento: oculto;}
Paso 3: Inserte el siguiente código en la sección principal del documento HTML de su página web para llamar a los dos archivos que acaba de crear.
Etapa 4: Seleccione y copie el código a continuación, y luego guárdelo en un archivo llamado memoryb.js.
// Juego de memoria de concentración con imágenes - Body Script
// copyright Stephen Chapman, 28 de febrero de 2006, 24 de diciembre de 2009
// puede copiar este script siempre que conserve el aviso de copyright
document.write (''); para (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Paso 5: Ahora todo lo que queda es agregar el juego a su página web donde desea que aparezca insertando el siguiente código en su documento HTML.