Crie um jogo de memória com métodos HTML e JQuery Effects

Muitos desenvolvedores da web usam a biblioteca Jquery para tornar suas páginas da web mais interativas e funcionais. A biblioteca jQuery oferece vários métodos e funções, incluindo o Efeito Jquery, que é usado para adicionar interatividade e animação aos elementos de um site.
As animações não requerem nenhum plugin especial e são compatíveis com a maioria dos navegadores, também CSS3 é usado para a parte gráfica.
Algumas propriedades são:

 O método animate ()

Este método permite aplicar um estilo css a um elemento de uma página da web, por exemplo, para ampliar uma camada.
A sintaxe é a seguinte

 (seletor) .animado ({estilo}, velocidade)

Um exemplo simples da função animate usada para aplicar um estilo css a um elemento:

 Animar e expandir junto com animar e recolher

Assim, podemos ver como com o método animate () podemos aplicar css a um elemento e fazê-lo mudar em um certo tempo (milissegundos) para gerar qualquer efeito de que precisamos.
Criamos o jogo com Jquery e o método Animate ()
Vamos criar com este método um jogo do estilo Simon Dice ou jogo de memória que consistirá em mostrar uma série de círculos vermelhos na tela e apenas alguns deles serão mostrados em uma sequência azul, o jogador deve clicar repetindo a sequência, se ele após a sequência, a tela será redesenhada adicionando mais círculos e aumentando o nível de dificuldade. Se o jogador falhar na sequência, ele deve repetir esse nível de jogo até concluí-lo corretamente. Além disso, um aviso dirá se você concluiu o nível e, portanto, você irá para o próximo nível.
O jogo começará com 2 linhas e 2 colunas, 4 círculos dos quais 2 deles serão mostrados por alguns segundos em azul. Em seguida, devemos clicar nos dois que estavam em azul. Assim, em cada nível uma coluna será adicionada e em outro nível uma linha, também serão adicionados mais círculos ativos em azul para depois tentar lembrar a mesma sequência.
A ordem de aparecimento não importa, mas sim que todos os círculos que estão em azul sejam clicados.
O tamanho máximo do tabuleiro ou palco será de 6 colunas por 6 linhas, o que dará uma grade de 36 círculos.

Estamos procurando uma imagem de fundo para o nosso jogo, será o fundo da web ou podemos usar uma cor lisa. Começamos criando um diretório de jogo e dentro de um arquivo index.html que conterá a página da web, o código da web será o seguinte:

 Jogo da memória
Simon Says Game
Devemos lembrar a sequência de círculos azuis e
clique repetindo a sequência

A versão do Jquery com o uso de 1.9 ou superior é adequada para este exemplo. Em seguida, criaremos o arquivo styles.css para as folhas de estilo, usaremos CSS3 para as sombras e alguns efeitos para nossos jogos. Os identificadores e as classes serão então usados ​​a partir do Jquery para poder realizar a animação e interatividade do jogo.

 corpo {margem: 0px; preenchimento: 0px; } #background {background: # 333 url (background.jpg.webp); alinhamento de texto: centro; margem superior: -20px; padding-top: 10px; altura: 800px; display: bloco; } h2 {cor: #fff; } h3 {cor: #ccc; } .container {padding: 4px; display: bloco embutido; cor de fundo: #ffffff; largura: 200px; altura: 200px; borda: sólido preto de 1 px; borda: 1px solid rgb (204, 204, 204); border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); -moz-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); sombra da caixa: 6px 5px 8px 0px rgba (50, 50, 50, 0,75);; } .figure {border: 2px #fff solid; fundo: vermelho; margem: 0px; preenchimento: 0px; display: bloco embutido; box-shadow: 2px 2px 2px rgb (136, 136, 136); margem: 2px; }. figura: hover {cursor: ponteiro; } .active {cor de fundo: # 4D90FE; } .error {cor de fundo: vermelho; } .circle {/ * border-radius: 50px; * / largura: 100px; altura: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; raio da borda: 50px; }

Depois de criar os estilos, podemos criar a funcionalidade e a animação do jogo. Nós criamos um arquivo game.js Escrevemos o seguinte código Javascript, devemos identificar aqui quais são as classes e identificadores css que participam do jogo e para que os usamos. Cada um tem um atributo atrr e classes podem ser adicionadas a ele com addClass.

 var Tfigure = 55; // Tamanho da figura var StartGame = false // Iniciar o jogo False = Não var NextLevel = true; // Verdadeiro continuar o jogo se for falso o jogo para var colunas = linhas = 2 // Tamanho inicial das fichas ou círculos no tabuleiro 2x2 que é 4 círculos $ (documento) .ready (função () {// Eu gero o jogo de acordo com o número de colunas e linhas de cada nível de dificuldade GeneraJuego (colunas, linhas);}); function GameGenerate (c, r) {// Se NextLevel for igual a false indica que o jogo deve parar if (! NextLevel) return; // Eu paro o jogo NextLevel = false; // Excluímos todos os elementos do palco ou tabuleiro de jogo $ (".game") .fadeOut (1000, // no final do método de fade // esvaziamos os elementos do jogo no palco ou função de tabuleiro de jogo ( ) {$ (".game") .empty (); // Expandir o palco ou tabuleiro de jogo para acomodar os círculos $ (".container") .animado ({altura: ((Tfigure + 8) * r) + " px ", largura: ((Tfigure + 8) * c) +" px "}, 1000, // no final da expansão com amimate () // Eu crio as novas figuras de acordo com a nova dimensão da tela i função de nível de jogo () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("circle", Tfigure)); $ (".game" ) .fadeIn (200); // Eu crio aleatoriamente quais são os círculos no quadro que podem ser clicados e quais não são CreateBlueFigure ();})}); } function CreateFigure (shapetype, r) {// Se alguma forma for clicada, return $ ("") .addClass (" figura "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Eu verifico se aquela figura tem o atributo selecionado, ou seja, se ela é um dos que estavam ativos em azul if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Se o número de cliques nos círculos ativos e o número de cliques nos círculos não ativos for maior do que o número de cliques feitos, não continuamos o jogo e iremos regenerar a tela mais tarde sem alterar o nível if (($ (". ativo"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("ativa"); // Se o nível de falha do clique for 0, significa que atingimos a sequência if ($ (". erro "). comprimento == 0) {alert (" Você atingiu a sequência, vá para o próximo nível "); if (colunas == linhas) colunas ++; else if (colunas> linhas) linhas ++; / / O nível máximo então n 6 linhas por 6 colunas if (colunas> 6) {colunas = 6; linhas = 6; }} GeneraJuego (colunas, linhas); }}}); } função CreateBlueFigure () {var count = 0; var length = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * length); if (random .figure ") .eq (random) .hasClass (" active ")) {$ (" .game> .figure ") .eq (random) .addClass (" active "). attr (" selected ", "selected"); count ++;}}} // Oculta as figuras selecionadas após mostrar a seqüência a ser repetida window.setTimeout (HideBlueFigures, 1200)} function HideBlueFigures () {$ (".game> .figure"). removeClass ("ativo"); GameStart = true; NextLevel = true;}

Assim que concluirmos o jogo podemos adicionar pontuação, aviso e mensagens, também sonoras se quisermos, além da possibilidade de parar e continuar o jogo, lembrando que é apenas Javascript, HTML e CSS mas seria fácil estender a adição de resultados aos dados de um banco de dados ou incorporar um nível mais alto de dificuldade.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo