O Jogo da Memória (The Memory Game)

O Jogo da Memória (The Memory Game)
Usando Vanilla Javascript fui desafiado a fazer esse jogo do zero

O Jogo da Memória (The Memory Game)

Usando Vanilla Javascript fui desafiado a fazer esse jogo do zero

O Jogo da Memória (The Memory Game)
Usando Vanilla Javascript fui desafiado a fazer esse jogo do zero

Durante meu Nanodegree de desenvolvimento Front-End da Udacity, fui desafiado a fazer um jogo da memória com puro javascript (Vanilla JS) como parte do treinamento prático.

De início fiquei meio inseguro se conseguiria, mas com o conteúdo que nos é passado no curso, realmente me senti capaz, então parti para o ataque :).

Como aprendi, antes de iniciar qualquer projeto tem que se fazer entendido de todos os requisitos mínimos para o mesmo. Antes de cada projeto prático no curso, nos é fornecida uma cartilha com os requisitos mínimos para o projeto.

Então, analisei, identifiquei as principais funcionalidades, e esbocei um BackLog dividindo o projeto em pequenas partes para que possa organizar melhor e me tornar mais produtivo já organizando os "commits" no repositório do GitHub.

Então basicamente o que fiz foi:

  • Montar a estrutura de pastas do projeto
  • Montar o HTML básico linkando os arquivos javascript e CSS
  • Montar a estrutura do Grade do Jogo em um formato de tabela 4x4
  • Fornecer a cada célula da tabela ( ou posso chamar de Carta ) um símbolo
  • Fornecer a lista de símbolos com pares iguais para cada Carta
  • Embaralhar a lista de símbolos
  • Esconder os símbolos de cada Carta
  • Tornar cada Carta “clicável”, tornando o Simbolo visível quando a Carta é clicada
  • Tratar para que apenas duas Cartas sejam exibidas após clicadas
  • Verificar se as Cartas são iguais, se Sim deixar exibidas, se Não esconder novamente
  • Tratar para quando todoas as Cartas estiverem exibidas para então finalizar o Jogo
  • Exibir um Modal com as informações de Numero de Movimentos e Estrelas com o Botão de Reiniciar o Jogo.

Tendo o BackLog em mãos, parte para o código no arquivo javascript App.js. Utilizando das diretivas do padrão MVC (Model View Controller) utilizei um método conhecido como OCTUPUS que consiste no seguinte.

Cria-se três Objetos chamados model, octupus, view onde todo o código é performado.

O model é responsável pelos dados da aplicação onde armazenei a lista de Simbolos para as cartas, a configuração do jogo onde armazeno os valores de contagem das Cartas, numero de movimentos etc.

O octupus é responsável pelo controle das informações que vem da view para serem alteradas ou armazenadas no model.

O Jogo da Memória (The Memory Game)

E por fim, a view é responsável por renderizar e/ou receber alterações executadas pelo usuário do jogo.

Usando javascript puro fui utilizando o objeto document para acessar os elementos HTML para criar a tabela do Grid do jogo e também para criar elementos para adicionar ao jogo.

O Jogo da Memória (The Memory Game)

Usei funções para reaproveitar o código, tentei não repetir código, evitando Ctrl C + Crtl V :D.

Ao concluir os requisitos mínimo do projeto, então adicionei mais Level ou nível de dificuldade ao jogo aumentando o numero de cartas, para isso tive que realizar algumas pequenas alterações tornando o jogo mais escalável.

O padrão MVC realmente me ajudou bastante com isso pois deixa o código mais organizado e enxuto.

Para finalizar ainda adicionei um Ranking, onde o usuário pode deixar seu Nome/Apelido para serem computados seus pontos durante os 3 níveis do jogo. Utilizando o localStorage é possível armazenar estes dados no navegador se utilizando do objeto Storage API.

Concluindo, foi uma experiência desafiadora e empolgante, recomendo sempre a utilização de padrões MVC para tornar o código/App de fácil manutenção e fácil leitura. Realmente aprendi muito sobre javascript, valeu muito a pena ter me aventurado em VanillaJS. Let’s CODE! :D

Referencias:

 

Jogue Aqui

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Olá, deixe seu comentário para O Jogo da Memória (The Memory Game)

Já temos 1 comentário(s). DEIXE O SEU :)
Ana Taba

Ana Taba

olá, como ficaria a logica para colocar fotos e não os símbolos?

case 0: return ['☯','♫','☯','♫','♞','♞','☂','☂','☀','☀','❤','❤']; break;
case 1: return ['☯','♫','☯','♫','♞','♞','☂','☂','☀','☀','❤','❤','
★★★★★DIA 04.10.19 18h08RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Converse Comigo