Projeto web de jogo da memória em PHP com sistema de usuários e de personalização do próprio baralho do jogo. Originalmente, esse projeto foi desenvolvido como trabalho para a disciplina de programação web na Etec com o intuito de praticar o upload e gravação de imagens externas em um banco de dados com PHP, contudo tomei a liberdade de acrescentar diversas outras funcionalidades, transformando-o em um jogo da memória customizado.
Tela de login 
|
Tela de cadastro 
|
Tela de configuração do baralho 
|
Tela de ranking de usuários 
|
Tela de perfil 
|
Tela do jogo da memória funcionando 
|
- Cadastro e login de usuários
- Adição e deleção de cartas no baralho do usuário, tendo que conter precisamente 6 cartas para começar o jogo
- Jogo da memória com as cartas do baralho do usuário, que funciona da seguinte forma: todas as cartas começam viradas para baixo, ao desvirar uma carta, o jogador pode virar outra, caso sejam a mesma, ambas ficam desabilitadas, caso contrário as duas são viradas novamente para baixo. O usuário ganha o jogo caso todas as cartas ficam desabilitadas
- O usuário pode reiniciar o jogo sempre que quiser
- Contagem em tempo real tanto dos movimentos de virada de cartas, quanto do tempo percorrido durante o jogo
- Sistema de ranking de usuários com base no recorde de tempo que cada um completou o jogo
- O usuário pode alterar seus dados (nome de usuário e avatar)
- Sistema de validação em todos os formulários da aplicação
- mecanismo de toast message que dá feedback pra cada ação de sucesso ou de erro do usuário
- Layout responsivo
- Sistema de login e cadastro com PHP
- Upload de arquivos em PHP, bem como a manipulção desses arquivos dentro do sistema
- Como criar relacionamento entre tabelas com PHPMyAdmin
- Como descobrir a ocorrência de uma determinada string em um deternimando texto com função strpos do PHP
- Como permitir a entrada de múltiplos dados de um único input
- Validação de formulário com JS
- Como criar a lógica de um jogo de memória usando JS
- Novas formas de trabalhar com eventos em JS através do prototype de objetos
- Como embaralhar elementos dentro de um array JS de forma simples com o método sort
- Como manipular o location do cabeçalho da página com JS por meio do objeto window
- Como manipular o conteúdo de um modal de forma dinâmica com JS
- Animações simples e efeito de filtro com CSS
Esse projeto foi desenvolvido com as seguintes tecnologias:
O deploy desse projeto foi realizado através da InfinityFree, que é uma plataforma que permite a hospedagem gratuita de aplicações web juntamentr com banco de dados
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
- Tenha acesso ao banco de dados MySQL
- Tenha o PHP instalado pelo menos na versão 7.4
Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone https://github.com/JohnPetros/memory-game.git
# Acesse a pasta do projeto no terminal/cmd
$ cd memory-game
# Vá para a pasta db
$ cd /src/db
# Procure o arquivos sql na pasta db para importá-los no MySQL
# Procure o arquivo connect.php na pasta db e configure as variáveis de conexão do bando de dados
$dbhost = "host do banco de dados"
$dbuser = "nome de usuário do banco de dados"
$dbpassword = "senha do banco de dados"
$dbname = "nome do banco de dados"
# Execute a aplicação em um servidor localComo a aplicação exige login, você pode acessar o sistema usando uma conta de usuário teste com as credenciais abaixo:
- Nome de usuário: Teste123
- Senha: 1234567
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Caso tenha alguma dúvida confira este guia de como contribuir no GitHub
Entre em contato comigo por e-mail ou pelo meu LinkedIn:
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com 💜 by John Petros 👋🏻