Como Criar Um Jogo Da Memoria

por $Refrizinho´ Seg Mar 26, 2012 9:35 pm

Primeiro- pegue esse codigo e cole no bloco de notas depois salve como .html e feche primeiro passo feito.

Código:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Exemplo simples de jogo feito em javascript para a PDJ - Agora com imagens!!!</title> </head> <body> <script type="text/javascript"> var tabuleiro = new Array( "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11" ); // O verdadeiro 'tabuleiro' do jogo. Cada número representa uma carta. var tabuleiroBool = new Array( "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" ); // Array para controle de cartas visíveis/invisíveis. var tabuleiroBoolAux = new Array( 12 ); // Array auxiliar para função 'trava'. var numCliques = 0; // Número de cliques efetuados pelo jogador. var acertos = 0; // Quantidade de acertos do jogador. var indiceCartaAnterior = -1; // Índice da carta clicada na jogada anterior. var cartaAtual = -1; // Índice da carta clicada na jogada atual. embaralhaTabuleiro(); // *** Embaralha as 'cartas' no tabuleiro aleatoriamente. *** function embaralhaTabuleiro() { r = -1; for ( i = 0; i < 12; i++ ) { r = Math.round( Math.random() * ( tabuleiro.length - 1 ) ); aux = tabuleiro[ r ]; tabuleiro[ r ] = tabuleiro[ i ]; tabuleiro[ i ] = aux; } } // *** Verifica qual o botão clicado de uma jogada. Se for o segundo, verifica se acertou ou errou. *** function verificaJogada( indice ) { if ( tabuleiroBool[ indice ] == 0 ) { tabuleiroBool[ indice ] = 1; numCliques++; carta = parseInt( tabuleiro[ parseInt( indice ) ] ); visualizarCarta( carta, indice ); if ( numCliques % 2 != 0 ) { // Primeiro botão da jogada clicado. indiceCartaAnterior = indice; } else if ( ( tabuleiro[ indice ] % 6 ) == ( tabuleiro[ indiceCartaAnterior] % 6 ) ) { // Acertou. acertos++; if ( acertos == tabuleiro.length / 2 ) { document.getElementById( "msg" ).value = "*** Fim de Jogo! *** Você errou " + ( ( numCliques / 2 ) - acertos ) + " vez(es)."; } } else { // Errou. cartaAtual = indice; // Passando o valor para a variável global pode-se usar 'setTimeout' document.getElementById( "msg" ).value = "ERROU!"; // Os procedimentos adotados abaixo permitem ao jogador visualizar a segunda // carta clicada sem poder clicar em nenhuma outra enquanto as outras duas ainda // estiverem visíveis. trava( 1 ); setTimeout( "trava( 0 );", 1000 ); setTimeout( "esconderCarta( indiceCartaAnterior );", 1000 ); setTimeout( "esconderCarta( cartaAtual );", 1000 ); setTimeout( "document.getElementById( \"msg\" ).value = \"\";", 1000 ); } } return; } // *** Deixa uma determinada carta visível ao jogador. *** function visualizarCarta( carta, indice ) { endereco = "imagens/carta" + ( carta % 6 ) + ".bmp"; document.campo[ indice ].src = endereco; } // *** Esconde uma determinada carta do jogador. *** function esconderCarta( indice ) { document.campo[ indice ].src = "imagens/costas.bmp"; tabuleiroBool[ indice ] = 0; } // *** Inicia um novo jogo *** function novoJogo() { acertos = 0; numCliques = 0; indiceBotaoClicado = -1; for ( i = 0; i < tabuleiro.length; i++ ) { // Vira todas as cartas. esconderCarta( i ); } embaralhaTabuleiro(); document.getElementById( "msg" ).value = "Novo jogo iniciado!"; return; } // *** Permite ou não que o jogador possa clicar nas cartas *** function trava( flag ) { if ( flag == 1 ) { // Bloqueia as cartas para 'clicks'. for ( i = 0; i < tabuleiroBool.length; i++ ) { tabuleiroBoolAux[ i ] = tabuleiroBool[ i ]; tabuleiroBool[ i ] = 1; } } else if ( flag == 0 ) { // Libera as cartas para 'clicks'. for ( i = 0; i < tabuleiroBool.length; i++ ) { tabuleiroBool[ i ] = tabuleiroBoolAux[ i ]; } } return; } </script> <h2 align="center"><b>Memória PDJ</b></h2> <table border="0" align="center"> <tr> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 0 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 1 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 2 );" /></td> </tr> <tr> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 3 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 4 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 5 );" /></td> </tr> <tr> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 6 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 7 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 8 );" /></td> </tr> <tr> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 9 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 10 );" /></td> <td><img src="imagens/costas.bmp" name="campo" onclick="verificaJogada( 11 );" /></td> </tr> </table> <center> <input type="text" id="msg" size="45" /> <input type="button" value="Novo Jogo" onclick="novoJogo();" /> <center> </body> </html>

Segundo- Crie sete imagens .bmp aconselho botar tamanho 50x50
6 imagens serão as cartas e 1 será a costa bote o nome das 6 cartas como carta0.bmp,carta1.bmp até a 5 e da costa como costas.bmp coloque as imagens em uma pasta chamada imagens na mesma pasta que você botou o arquivo .html depois abra o html e se divirta Very Happy

.

Como salvar o texto em .html:

1- Copie o texto para o bloco de notas
2- Vâ ao menu ARQUIVO;
3-Clique em SALVAR COMO;
4-digite o nome do arquivo com sua respectiva extensão .html

Pronto fácil né? Obrigado Happy meme