EliasGabriel1 / aymlab-de-pobre.io

aym lab de pobre

Aim Lab de Pobre - Mini Jogo de Pontaria

Este é um componente React que implementa um mini-jogo de pontaria chamado "Aim Lab de Pobre". Ele usa os hooks useState, useEffect e useRef para gerenciar o estado do jogo e a interação com o usuário.

Estados

O componente App começa definindo 6 estados:

• score: mantém a pontuação atual do jogador
• timeLeft: mantém o tempo restante do jogador
• targetPosition: mantém a posição atual do alvo na tela
• isStarted: indica se o jogo está em andamento ou não
• isFinished: indica se o jogo terminou ou não
• timerIntervalRef: é uma referência para o intervalo do temporizador que é criado mais tarde

Funções

O componente define três funções que manipulam os estados:

• startExercise(): define os estados iniciais do jogo e começa um novo jogo
• stopExercise(): para o temporizador e redefine o estado isStarted para false
• handleTargetClick(): é chamada quando o jogador acerta o alvo. Ela atualiza a pontuação do jogador e redefine a posição do alvo.

useEffect

O componente também usa o useEffect hook para controlar o temporizador. Quando isStarted é true e isFinished é false, o useEffect cria um novo intervalo de tempo que decrementa o timeLeft a cada segundo. Quando o tempo chega a zero, o intervalo é cancelado, isFinished é definido como true e o tempo restante é definido como zero.

Interface do Usuário

O componente renderiza a interface do usuário com base nos estados atuais. Ele exibe:

• Um botão "Começar" se o jogo ainda não começou
• Uma contagem de pontos e tempo restante
• Um alvo que o jogador deve clicar para ganhar pontos
• Um botão "Parar" para interromper o jogo
• Um botão "Começar" para iniciar um novo jogo quando o jogo acabou

Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais informações.