Prática: jogo da velha e Fibonacci

O que esta página junta

Conceito	Onde aparece aqui
Matriz	o tabuleiro 3x3
for aninhado	criar e desenhar o tabuleiro
Funções	iniciar, exibir, jogar, checar: uma tarefa cada
Condicionais	validar a jogada e decidir o vencedor
Recursividade	a sequência de Fibonacci

1. Jogo da velha

Dois jogadores, X e O. Digite a linha e a coluna (de 1 a 3) e clique em Marcar.

2. Como funciona

O tabuleiro é uma matriz de números: 0 = vazio, 1 = X, -1 = O. Assim, uma linha completa soma 3 (X ganhou) ou -3 (O ganhou).

        coluna 1  coluna 2  coluna 3
linha 1 [   1,       0,       -1  ]     X  —  O
linha 2 [   1,      -1,        0  ]     X  O  —
linha 3 [   1,       0,        0  ]     X  —  —
           soma da coluna 1 = 3  ->  X ganhou

Cada função faz uma tarefa:

Função	Tarefa
`iniciar()`	cria a matriz 3x3 cheia de zeros e zera o jogo
`exibir()`	transforma a matriz numa tabela (X, O, —)
`jogar()`	lê a jogada, valida, marca e passa a vez
`checar()`	soma linhas, colunas e diagonais procurando 3 ou -3

// Criar a matriz: 3 linhas com 3 zeros
for (let i = 0; i < 3; i++) {
  tabuleiro.push([0, 0, 0]);
}

// A pessoa digita 1 a 3, mas o índice vai de 0 a 2
const i = linha - 1;

// Passar a vez: 1 vira -1, -1 vira 1
vez = -vez;

// Checar uma linha
const soma = t[k][0] + t[k][1] + t[k][2];
if (soma === 3 || soma === -3) { ... }   // alguém completou a linha

Outro jeito de alternar a vez: contar as jogadas e usar o resto da divisão, jogador % 2 (dá 0, 1, 0, 1...). Código desta seção: js/pratica.js, seções 1 a 5.

3. Da versão básica a um jogo de verdade

A versão mais simples do jogo funciona, mas deixa buracos. Esta página corrige:

Versão básica	Aqui	Por quê
campo vazio quebra o jogo	valida 1 a 3 antes de tudo	`parseInt("")` dá `NaN` e o código trava
continua depois da vitória	`fimDeJogo` bloqueia	regra do jogo
não percebe empate	9 jogadas sem vencedor = velha	regra do jogo
`<body onload="inicia()">`	`iniciar()` no fim do script	HTML só estrutura
`onclick` no botão	`addEventListener`	página Funções
`var`	`let` / `const`	`var` ignora o escopo de bloco
aviso com `innerHTML`	aviso com `textContent`	texto puro é mais seguro

O tabuleiro continua com innerHTML porque monta tags (<table>, <td>) e o conteúdo é só nosso (X, O, —), nunca texto digitado.

4. Fibonacci: recursão na prática

Cada número é a soma dos dois anteriores: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34... A regra é F(n) = F(n - 1) + F(n - 2), que vira código quase igual:

function fibonacci(n) {
  if (n === 0) return 0;                       // caso base
  if (n === 1) return 1;                       // caso base
  return fibonacci(n - 1) + fibonacci(n - 2);  // chama a si mesma DUAS vezes
}

for (let n = 0; n < 10; n++) {
  console.log(fibonacci(n));   // 0 1 1 2 3 5 8 13 21 34
}

O preço: cada chamada abre outras duas, e as mesmas contas são refeitas milhares de vezes. fibonacci(30) precisa de 2,7 milhões de chamadas. A versão com for guarda os dois últimos números e faz 29 voltas:

function fibonacciComFor(n) {
  let anterior = 0;
  let atual = 1;
  if (n === 0) return 0;

  for (let i = 2; i <= n; i++) {
    const proximo = anterior + atual;
    anterior = atual;
    atual = proximo;
  }
  return atual;
}

Nas empresas: a recursiva é ótima para entender a regra; para rodar, usa-se o for.

Código: js/pratica.js, seção 6.

Desafio: placar

Faça o jogo da velha guardar quantas vitórias X e O já tiveram (e os empates), mostrando o placar depois de cada partida. O placar não pode zerar no "Novo jogo".

Escreva sua resposta em js/pratica.js, seção 7 (está em branco). Dica: variáveis contadoras fora das funções, somadas na vitória (seção 4).

// sua resposta aqui

Quando quiser a solução, é só pedir.