Seu primeiro jogo com JavaScript Tablea Schulte

1. O Jogo: O que é a Tabela de Schulte?

Antes de mergulhar no código, é importante explicar o conceito do jogo. A Tabela de Schulte é uma ferramenta para treinar a atenção, a visão periférica e a velocidade de percepção. O objetivo é encontrar e clicar nos números de 1 a 25 (em uma grade 5x5) na ordem correta, o mais rápido possível.

O código cria uma versão digital e interativa desse exercício. Ele gera a grade, embaralha os números e controla a lógica do jogo, como o tempo, a contagem de erros e a verificação dos cliques.

2. A Estrutura do Site (HTML e CSS)

O arquivo HTML é o esqueleto do nosso site. É ele que define onde cada elemento vai ficar.

<head>: Esta parte não é visível para o usuário, mas é fundamental.
- <meta charset="UTF-8">: Garante que caracteres especiais (como acentos e "ç") sejam exibidos corretamente.
- <meta content="width=device-width, initial-scale=1.0" name="viewport">: Torna o site responsivo, ou seja, ele se adapta a diferentes tamanhos de tela (celulares, tablets, etc.).
- <script src="https://cdn.tailwindcss.com"></script>: Inclui o Tailwind CSS, um framework que nos permite estilizar os elementos diretamente no HTML, usando classes como bg-gray-900 para a cor de fundo e text-3xl para o tamanho do texto. Isso explica por que há tantas classes em todas as tags <div>.
- <link href="...">: Importa a fonte Inter do Google Fonts, dando uma aparência moderna e limpa ao texto.
- <style>: Aqui temos alguns estilos personalizados que o Tailwind não oferece de forma nativa.
  - .grid-cell: Adiciona uma transição suave e muda o cursor para uma "mãozinha" quando passamos o mouse por cima das células.
  - .grid-cell:hover:not(.correct): Faz a célula escurecer um pouco ao passar o mouse, a menos que ela já tenha sido clicada corretamente.
  - .grid-cell.correct: Estiliza a célula clicada corretamente, mudando a cor do fundo para verde e o texto para branco, além de criar um pequeno efeito de "esmagamento" (transform: scale(0.95)).
<body>: Esta é a parte visível, onde todo o conteúdo do jogo está.
- O <body> tem classes do Tailwind para centralizar o conteúdo na tela e definir o fundo como cinza escuro.
- A maior parte do jogo está dentro de uma <div> principal com a classe bg-gray-800, que cria a caixa do jogo com cantos arredondados (rounded-2xl) e uma sombra (shadow-2xl).
- Dentro dessa caixa, você tem:
  - Um título (<h1>): Tabela de Schulte.
  - Uma descrição (<p>): "Encontre os números em ordem crescente...".
  - Duas <div> para mostrar o Tempo e os Erros, cada uma com um id (timer e errors) para que o JavaScript possa atualizá-las.
  - A grade do jogo (<div id="schulte-grid">): Este é o espaço onde as células serão criadas. O HTML deixa ele vazio porque o JavaScript vai gerar as células dinamicamente. A classe grid grid-cols-5 é do Tailwind e cria a grade de 5 colunas.
  - Um botão (<button id="startButton">): "Novo Jogo". O id permite que o JavaScript "ouça" o clique nesse botão.
  - Um Modal de Resultados (<div id="resultModal">): Uma janela pop-up que fica oculta (hidden) até o jogo terminar. Ela mostra o tempo final e o número de erros.

3. A Lógica do Jogo (JavaScript)

O JavaScript é a "alma" do projeto. Ele é responsável por toda a funcionalidade do jogo, desde a geração da grade até o controle do tempo.

Variáveis de Estado

Primeiro, o código define algumas constantes e variáveis para armazenar o estado atual do jogo.

const GRID_SIZE = 5; e const totalCells = 25;: As dimensões da grade.
const gridElement = document.getElementById('schulte-grid'); e outras variáveis: Referências aos elementos do HTML. Isso permite que o código manipule-os (por exemplo, alterando o texto ou a visibilidade).
let currentNumber = 1;: O número que o jogador precisa encontrar no momento.
let errors = 0;: O contador de erros.
let timerInterval = null;: A variável que armazena o temporizador.
let gameActive = false;: Uma flag que indica se o jogo está em andamento.

Funções Principais

shuffleArray(array): Esta é uma função crucial. Ela usa o algoritmo de Fisher-Yates para embaralhar os números de 1 a 25. Isso garante que cada jogo seja diferente, com as células em posições aleatórias.
createGrid(): Esta função gera a grade do jogo.
- Ela limpa o conteúdo anterior da grade (gridElement.innerHTML = '';).
- Cria um array com os números de 1 a 25.
- Chama shuffleArray para embaralhar esses números.
- Para cada número, ela cria uma nova <div> (a célula), define seu texto e adiciona a classe .grid-cell.
- Adiciona um "ouvinte de evento" (addEventListener) a cada célula, que reage quando o jogador clica nela, chamando a função handleCellClick.
startGame(): Inicia um novo jogo.
- Reseta todas as variáveis de estado: gameActive = true, currentNumber = 1, errors = 0.
- Para o temporizador se ele estiver rodando.
- Chama a função createGrid() para montar a nova grade.
handleCellClick(event): Executada toda vez que uma célula é clicada.
- Verifica se o jogo está ativo (if (!gameActive) return;).
- Pega o número da célula clicada (clickedNumber).
- Verifica se o clique está correto (if (clickedNumber === currentNumber)):
  - Se sim: Adiciona a classe .correct (que deixa a célula verde) e avança para o próximo número (currentNumber++). Se o jogador chegou ao último número, o jogo termina (endGame()).
  - Se não: Aumenta o contador de erros (errors++) e dá um feedback visual rápido, adicionando e removendo as classes bg-red-500 e text-white para a célula ficar vermelha por um instante.
- Observação importante: O temporizador só começa no primeiro clique correto (quando o jogador clica no número 1). Isso é uma otimização para que o tempo só seja contado a partir do momento em que o jogo realmente começa.
updateTimer(): Atualiza o texto do temporizador a cada segundo, calculando o tempo decorrido desde o início do jogo.
endGame(): Função para finalizar o jogo.
- Para o temporizador (clearInterval(timerInterval)).
- Atualiza o modal de resultados com o tempo final e o número de erros.
- Faz o modal aparecer na tela (resultModal.classList.remove('hidden')).

Event Listeners (Ouvintes de Eventos)

startButton.addEventListener('click', startGame);: Ouve o clique no botão "Novo Jogo" e inicia o jogo.
closeModalButton.addEventListener('click', ...);: Ouve o clique no botão "Fechar" do modal e o esconde.
window.onload = startGame;: Executa a função startGame quando a página é carregada pela primeira vez, garantindo que a grade já esteja pronta para o jogador.

O código fonte:

https://github.com/guigomaster01/tabelaSchulte

Rodrigo Rodrigues