Reprodução do clássico jogo da memória "Genius", muito popular no Brasil durante a década de 1980, tendo sido distribuído pela Brinquedos Estrela e baseado no americano "Simon" da Hasbro.
O objetivo do jogo é memorizar e acertar a maior sequência possível de cores, sem errar.
Esta aplicação foi desenvolvida para o desafio "Criando seu jogo de memória estilo Genius" da Digital Innovation One.
Clique aqui para jogar!
A proposta do projeto era a construção de um jogo da memória baseado no brinquedo Genius, utilizando HTML, CSS e JavaScript.
Abaixo há algumas screenshots da aplicação criada.
A primeira mostra a página logo ao ser acessada, onde temos as opções de clicar nos botões "Jogar", para iniciar o jogo, e ler as instruções em "Como jogar". Neste momento, as cores do jogo se apresentam em um tom mais escuro, indicando que o mesmo está desativado.
A segunda screenshot apresenta o que ocorre ao selecionar o botão "Como jogar". Uma modal aparece na tela, contendo um texto com as instruções.
Finalmente, ao clicar em jogar, as cores do jogo "acendem", os botões somem e dão lugar ao placar que conta os pontos e as sequências começam a ser apresentadas para o jogador.
Para execução do projeto foi utilizado HTML, CSS e JavaScript puro. Além disso, para a construção do modal, foi utilizado o framework Bootstrap.
Iniciei este projeto seguindo as instruções da professora Gabriela Pinheiro, primeiramente construindo a página, estilizando e depois escrevendo os scripts do jogo.
Após isto, optei por implementar algumas melhorias como o desligamento do jogo, que fiz criando a função notStarted, que adiciona a classe "is-over" na section de cada cor, e adicionando um condicional que bloqueia a execução da função click, responsável por receber os cliques do jogador.
Também decidi implementar a pontuação constante na tela, para que o jogador possa acompanhar seu desempenho, e os botões para iniciar o jogo e ler as instruções, estas mostradas através de um modal feito com Bootstrap.
Neste projeto também optei por utilizar algumas boas práticas de CSS, sendo elas o uso da metodologia BEM, para nomenclatura das classes, e de variáveis para guardar alguns valores globais do estilo, como pode ser visto abaixo:
:root {
--background-color: #0d1317;
--light-color: #c4d6b0;
--dark-color: #697564;
--blue-mnemis: #007ea7;
--yellow-mnemis: #f18f01;
--red-mnemis: #d1495b;
--green-mnemis: #00cc66;
}
- Adicionar responsividade à aplicação
- Adicionar uma animação de carregamento entre os níveis
- Adicionar sons ao jogo
- Implementar o aviso de game over sem utilizar o alert
Além das documentações específicas de cada item, os seguintes recursos tiveram grande contribuição.
BEM Methodology - documentação sobre a metodologia BEM
Bootstrap Modal - tutorial sobre a utilização do Bootstrap Modal
StackOverflow - que me ajudou a resolver algumas questões específicas.
Projeto desenvolvido por Luiz Felipe, abaixo deixo meu Github com alguns projetos que realizei, meu LinkedIn e contato.
Github - lufesipe
LinkedIn - Luiz Felipe
Email - luizfspereira@outlook.com