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.

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.

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:

• Repositório no GitHub
• Curso de Javascript Orientado a Objetos - UDACITY
• https://developer.mozilla.org/pt-BR/docs/Web/API/Window/Window.localStorage

Jogue Aqui