Aqui está uma versão do clássico jogo de memória que permite que os visitantes da sua página da web correspondam às imagens em um padrão de grade usando JavaScript.
Fornecendo as imagens
Você precisará fornecer as imagens, mas poderá usar as imagens que desejar com este script, desde que possua os direitos de usá-las na web. Você também precisará redimensioná-los para 60 pixels por 60 pixels antes de começar.
Você precisará de uma imagem para o verso das "cartas" e quinze para as "frentes".
Verifique se os arquivos de imagem são tão pequenos quanto possível ou se o jogo pode demorar muito para carregar. Com esta versão, limitei o script a 30 cartões, pois todas as imagens tornarão a página muito mais lenta. Quanto mais cartões e imagens a página tiver, mais lento será o carregamento da página. Isso pode não ser um problema para aqueles com boas conexões de banda larga, mas aqueles com conexões mais lentas podem ficar frustrados com o tempo que leva.
O que é o jogo da memória de concentração?
Se você nunca jogou esse jogo antes, as regras são muito simples. Existem 30 quadrados ou cartões. Cada cartão possui uma das 15 imagens, sem que a imagem apareça mais do que duas vezes - esses são os pares que serão correspondidos.
As cartas começam "viradas para baixo", ocultando as imagens nos 15 pares.
O objetivo é ativar todos os pares correspondentes no menor tempo possível.
O jogo começa selecionando um cartão e depois um segundo. Se são iguais, permanecem com a face para cima; se não corresponderem, as duas cartas serão viradas de costas para baixo. Enquanto joga, você precisará confiar na sua memória dos cartões anteriores e nas respectivas localizações para fazer combinações bem-sucedidas.
Como esta versão da concentração funciona
Nesta versão JavaScript do jogo, você seleciona cards clicando neles. Se os dois que você selecionar combinarem, permanecerão visíveis; se não o fizerem, desaparecerão novamente após um segundo.
Há um contador de tempo na parte inferior que rastreia quanto tempo leva para combinar todos os pares.
Se você quiser recomeçar, basta pressionar o botão do contador e todo o quadro será reorganizado e você poderá começar novamente.
As imagens usadas nesta amostra não acompanham o script; portanto, como mencionado, você precisará fornecer as suas. Se você não tiver imagens para usar com esse script e não conseguir criar as suas próprias, poderá procurar um clipart adequado e gratuito.
Adicionando o jogo à sua página da Web
O script para o jogo da memória é adicionado à sua página da web em cinco etapas.
Passo 1: Copie o código a seguir e salve-o em um arquivo chamado memoryh.js.
// Jogo da Memória de Concentração com Imagens - Head Script
// copyright Stephen Chapman, 28 de fevereiro de 2006, 24 de dezembro de 2009
// você pode copiar este script, desde que mantenha o aviso de direitos autorais
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'];
função randOrd (a, b) {return (Math.round (Math.random ()) - 0,5);} var im = []; para
(var i = 0; i <15; i ++) {im [i] = nova imagem (); im [i] .src = bloco [i]; lado a lado [i] =
''; lado a lado [i + 15] =
tile [i];} função displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = iniciar; função start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} função cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (seg <10? '0': '') + seg; função tmr ++;} disp (sel) {if (tno> 1)
{clearTimeout (cid); ocultar ();} document.getElementById ('t' + sel) .innerHTML =
ladrilho [sel]; if (tno == 0) ch1 = sel; mais {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} função ocultar () {tno = 0; if (bloco [ch1]! = bloco [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
Você substituirá os nomes dos arquivos de imagem por costas e telha com os nomes dos arquivos das suas imagens.
Lembre-se de editar suas imagens no seu programa gráfico para que elas tenham todos os 60 pixels quadrados para não demorar muito para carregar (o tamanho combinado das 16 imagens usadas no meu exemplo é de apenas 4758 bytes, portanto você não deve ter problemas em manter o total abaixo 10k).
Passo 2: Selecione o código abaixo e copie-o em um arquivo chamado memory.css.
.blk {width: 70px; altura: 70px; estouro: oculto;}
Etapa 3: Insira o seguinte código na seção principal do documento HTML da sua página da web para chamar os dois arquivos que você acabou de criar.
Passo 4: Selecione e copie o código abaixo e salve-o em um arquivo chamado memoryb.js.
// Jogo da Memória de Concentração com Imagens - Body Script
// copyright Stephen Chapman, 28 de fevereiro de 2006, 24 de dezembro de 2009
// você pode copiar este script, desde que mantenha o aviso de direitos autorais
document.write (''); for (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Etapa 5: Agora, resta apenas adicionar o jogo à sua página da web onde você deseja que ele apareça, inserindo o seguinte código no seu documento HTML.