Replicando o Jogo 2048 utilizando Typescript e ReactJS
Hackenge 03 — Engenharia de Software — 2021.1 — Equipe 01:
- Franklin Amaral Nunes dos Santos Filho
- Gustavo Prazeres Paz do Nascimento
- Thales Brederodes Montarroyos Candido
- Thiago Conte Rocha
- Thiago de Holanda Carvalho
As regras do jogo
O jogo consiste de uma tela de 4×4 quadrados e começa com dois espaços completos com o número 2. Apertando as setas e os números se moverão até o fim da linha onde estão. Se o bloco encostar em outro com o mesmo número eles se somam e viram apenas um bloco de número maior. A cada jogada, um novo número 2 é inserido na tela e o jogador precisará ter uma estratégia para somá-lo com outros. O objetivo é alcançar um bloco com a soma de 2048!
A estrutura do projeto
O código fonte base utilizado para o desenvolvimento do projeto foi disponibilizado por meio de um tutorial do FreeCodeCamp.org no link a seguir:
https://www.freecodecamp.org/news/how-to-make-2048-game-in-react/
No tutorial, as funcionalidades básicas para o funcionamento do jogo foram implementadas por meio dos componentes a seguir:
- Board (componente) — responsável pela renderização dos blocos. Ele utiliza um hook ‘
useBoard’. - Grid (componente) — renderiza um grid 4x4.
- Tile (componente) — responsável por todas as animações relacionadas ao bloco e renderizar o bloco em si.
- Game (componente) — combina todos os elementos acima. Inclui um gancho
useGameque é responsável por pelas regras e restrições do jogo.
Configurando o ambiente
Utilizando o código base acima, fizemos um clone do repositório e rodamos a aplicação em nossas máquinas locais. Para isso, iniciamos um terminal no diretório em que o código do repositório foi clonado e demos o comando abaixo para instalar todas as dependências:
yarn
Em uma aplicação web é comum adicionarmos diferentes ferramentas e frameworks no projeto para atribuir funcionalidades e evitar o desenvolvimento de recursos que já existem e que podem ser reaproveitados, como o Bootstrap, React, Angular e muitos outros. Quando uma aplicação utiliza recursos externos significa que ela contém dependências que precisam ser referenciadas na aplicação.
Existem diferentes formas de adicionar esses recursos, uma delas é fazer o download e a instalação manual dos códigos. Essa forma, entretanto, além de mais trabalhosa pode gerar falhas no funcionamento da aplicação e dificuldade de manutenção. Por esse motivo, utilizamos gerenciadores de pacotes, como o Yarn, que têm o objetivo de permitir a instalação desses recursos no projeto de forma rápida e segura por meio de instruções em linha de comando.
Em seguida, utilizamos o comando de start para iniciar a aplicação no host http://localhost:3000/2048-in-react
yarn start
As modificações
Com o objetivo de adicionar mais funcionalidades ao código original, decidimos inserir um um campo para exibir a pontuação atual que o jogador conseguiu alcançar, e um ranking com sua pontuação mais alta.
Após um entendimento do funcionamento do código e como os valores dos blocos eram utilizados para as lógicas, extraímos essas informações de valores do array de blocos para exibir essa pontuação atual do jogador e salvar o recorde no ranking. Fizemos também algumas alterações no design da página e inserimos uma animação no botão de Restart:
