Jogo da Memória ─ Desafio de Programação

Um tradicional jogo de memória, criado usando somente as tecnologias Vue.js, HTML5 e CSS3.

Nesse desafio, o jogador deverá desvendar a localização de dez pares de bandeiras, e poderá figurar no ranking dos melhores participantes ao encontrar todos os símbolos na menor quantidade possível de rodadas.

Projeto open source, com seu código-fonte integral disponível no GitHub.

Ficha Técnica

Categoria Projeto Front-End
Sub-categoria Desafio de Programação
Site memoria.eduardostuart.pro.br
Tecnologias
  • Vue.js
  • JavaScript ES6+
  • HTML5
  • CSS3
  • Código-Fonte GitHub
    Autor Eduardo Stuart

    Sobre o Projeto

    O jogo pode ser testado visitando este endereço.

    Tela do Jogo de Memória


    Detalhes

    Desafio técnico de programação feito sob demanda, com o objetivo de exemplificar o uso das melhores técnicas de desenvolvimento de software em um jogo que usasse somente as tecnologias Vue.js, HTML e CSS.

    Era necessário cumprir os seguintes requisitos:

    • Não seria permitido o uso de nenhum framework externo
      • Somente poderia ser desenvolvido usando as tecnologias Vue.js, HTML5 e CSS3
    • O jogo deveria apresentar um desafio de memória, com dez pares de símbolos a serem desvendados
      • Inicialmente, todos os pares estão com suas faces ocultas
      • O jogador tentará descobrir um par escolhendo duas cartas para cada tentativa
      • Ao desvendar um par, as cartas correspondentes ficarão visíveis
      • Se cometer um erro, as faces das duas cartas deverão ser novamente escondidas
    • Os seguintes dados precisam ser obtidos/gerenciados:
      • O nome do jogador, coletado antes do início da partida
      • A quantidade de rodadas que ocorreram até então
      • Um histórico das partidas da seção atual
    • Ao terminar o jogo:
      • O jogador receberá uma mensagem informando o encerramento da partida
      • O total de rodadas que foram necessárias para encerrar a partida será exibida ao jogador
      • Deverá ser exibido um ranking com a colocação de cada um dos participantes da seção atual

    Telas capturadas

    • Boas-vindas

    Jogo de Memória ─ Tela Inicial

    • Obtendo o nome do jogador

      • O nome será usado para felicitar o jogador ao final da partida
      • O nome também será usado no ranking

    Jogo de Memória ─ Obtendo o nome do jogador

    • Durante a partida

      • Em seguida, o tabuleiro é exibido ao jogador, inicialmente com todas as faces ocultas
      • Na medida em que o jogador vai encontrando os pares, eles ficam visíveis

    Jogo de Memória ─ Durante a Partida

    • Encerrando a partida

      • Ao encontrar todos os pares, o jogador é felicitado
      • É dada a oportunidade de iniciar uma nova partida, trocar de jogador ou voltar para a tela principal

    Jogo de Memória ─ Encerrando a Partida