Capture peças adversárias, acompanhe as quantidades e encerre a partida quando um lado ficar sem peças.
Pasta concluída da Aula 1VS CodeNavegadorJavaScriptHTML
Abra a prévia para conhecer o objetivo e liberar as missões.
MISSÃO ATUAL · 01
Retome seu jogo e faça uma cópia
Onde mexer: Documentos → damas-movimento
Continue a versão concluída na Aula 1. Hoje faremos uma captura por jogada, para frente ou para trás; o passo simples continua apenas para a frente.
Copie a pasta damas-movimento e renomeie a cópia para damas-captura. Abra a cópia no VS Code.
Abra index.html no navegador e confira se seleção, movimento simples e troca de turno funcionam.
Sua pasta deve ficar assim
damas-captura
index.html
style.css
app.js
Minha base ainda não funciona
Volte às missões 5, 6 e 8 da Aula 1 antes de continuar. Esta aula depende das três alterações concluídas.
Você está trabalhando em damas-captura. A versão da Aula 1 ficou guardada na pasta anterior.
MISSÃO ATUAL · 02
Prepare os contadores e os testes
Onde mexer: damas-captura/index.html → parágrafo que começa com Protótipo:
Localize o parágrafo Protótipo: movimento simples, sem captura e sem promoção a dama.
Substitua somente esse parágrafo pelo bloco abaixo. Salve e atualize.
Para que serve: Os spans recebem a contagem do JavaScript. Os botões vão preparar partidas curtas para testar a vitória.
〈/〉 Ver código para copiar
Troque o parágrafo inteiro, de <p> até </p>, pelo bloco abaixo. Preserve o tabuleiro, o botão Reiniciar e os demais elementos.
Código
<p>Protótipo: movimento simples e captura única; ainda sem promoção a dama.</p>
<p>Restantes: peças 1 = <span id="total-1">12</span> | peças 2 = <span id="total-2">12</span></p>
<!-- Estes botões montam situações de teste, não uma partida normal. -->
<button id="teste-1" type="button">Teste: vez das peças 1</button>
<button id="teste-2" type="button">Teste: vez das peças 2</button>
A página mostra os dois contadores e dois botões de teste. Os valores ainda são fixos e esses botões ainda não funcionam.
MISSÃO ATUAL · 03
Encontre a peça do meio
Onde mexer: damas-captura/app.js → antes de function movimentoPermitido
A captura usa origem, meio e destino. Somar as duas linhas e dividir por 2 encontra a linha do meio; faça o mesmo com as colunas.
Localize function movimentoPermitido(origem, destino).
Insira a nova função abaixo imediatamente antes dela, fora de qualquer outra função.
Para que serve: Devolve a posição da peça adversária no meio de um salto válido. Devolve null quando não há captura.
〈/〉 Ver código para copiar
Acrescente a função completa antes de movimentoPermitido. Preserve todas as funções existentes.
Código
function obterCaptura(origem, destino) {
// Captura: duas casas na diagonal, para cima ou para baixo.
const deltaLinha = destino.linha - origem.linha;
const deltaColuna = destino.coluna - origem.coluna;
if (Math.abs(deltaLinha) !== 2 || Math.abs(deltaColuna) !== 2) return null;
if (posicoes[destino.linha][destino.coluna] !== 0) return null;
// A média das posições encontra a casa exatamente no meio do salto.
const linhaMeio = (origem.linha + destino.linha) / 2;
const colunaMeio = (origem.coluna + destino.coluna) / 2;
const pecaDoMeio = posicoes[linhaMeio][colunaMeio];
const adversario = vez === 1 ? 2 : 1;
if (pecaDoMeio !== adversario) return null;
return { linha: linhaMeio, coluna: colunaMeio };
}
Exemplo da média
Na matriz: origem [4][1], destino [2][3]. A linha do meio é (4 + 2) / 2 = 3; a coluna é (1 + 3) / 2 = 2. A peça está em posicoes[3][2].
O que precisa existir?
O salto mede duas linhas e duas colunas. O destino precisa estar vazio e o meio deve conter a peça do outro jogador. Pular uma casa vazia ou uma peça sua é inválido.
A função obterCaptura está no arquivo. O jogo ainda aceita somente os movimentos simples da aula anterior.
MISSÃO ATUAL · 04
Prepare a remoção da peça
Onde mexer: damas-captura/app.js → função moverPeca
Localize function moverPeca(origem, destino).
Substitua essa função inteira pelo código abaixo. Salve e teste um movimento simples.
Para que serve: Quando há captura, esvazia a casa do meio; em seguida, move a peça e passa a vez.
〈/〉 Ver código para copiar
Substitua de function moverPeca(origem, destino) { até a chave final imediatamente antes de function aoClicarNaCasa. Preserve aoClicarNaCasa.
Código
function moverPeca(origem, destino) {
// Descubra a peça capturada antes de mudar origem e destino.
const capturada = obterCaptura(origem, destino);
if (capturada !== null) {
// 0 significa que a casa intermediária agora está vazia.
posicoes[capturada.linha][capturada.coluna] = 0;
}
posicoes[destino.linha][destino.coluna] = posicoes[origem.linha][origem.coluna];
posicoes[origem.linha][origem.coluna] = 0;
selecionada = null;
// Nesta aula cada jogada termina depois de um movimento ou uma captura.
vez = vez === 1 ? 2 : 1;
}
Por que descobrir antes de mover?
obterCaptura confere se o destino está vazio. Depois de mover, essa casa já terá a sua peça; por isso calculamos a captura antes da alteração.
Os movimentos simples continuam funcionando. A remoção está preparada, mas o salto só será liberado na próxima missão.
MISSÃO ATUAL · 05
Autorize o movimento ou a captura
Onde mexer: damas-captura/app.js → final de movimentoPermitido
Dentro de movimentoPermitido, troque somente return diagonal && avanca; pela linha abaixo.
Em aoClicarNaCasa, atualize as mensagens de seleção e bloqueio conforme a dica. Salve e atualize.
Para que serve: || significa OU: aceita o movimento simples ou uma captura identificada por obterCaptura.
〈/〉 Ver código para copiar
Substitua a linha return diagonal && avanca; dentro de movimentoPermitido. Preserve o bloqueio de destino ocupado no começo da função.
Troque Agora escolha uma casa vazia na diagonal à frente. por Escolha um passo à frente ou um salto sobre uma peça adversária.
Atualize a mensagem de bloqueio
Troque Movimento bloqueado: use uma casa vazia, uma diagonal e um passo à frente. por Movimento bloqueado: confira a diagonal, a distância e a peça do meio.
O jogo aceita passo simples à frente OU salto válido sobre uma adversária. O destino continua precisando estar vazio.
MISSÃO ATUAL · 06
Faça sua primeira captura
Onde mexer: Navegador → Reiniciar → tabuleiro
Conte linhas de cima para baixo e colunas da esquerda para a direita, começando em 1. Jogue peças 1: L6 C1 → L5 C2; peças 2: L3 C4 → L4 C3.
Agora jogue peças 1: L5 C2 → L3 C4, saltando a peça 2 em L4 C3.
Não use os números da matriz aqui
Nesta missão, L1 C1 significa a primeira casa do canto superior esquerdo. No código ela é [0][0]; os números da matriz começam em zero.
A peça atravessou sem remover?
Confira a função moverPeca da missão 4. A casa capturada precisa receber 0 antes da movimentação da peça.
A peça 2 de L4 C3 desaparece, a origem fica vazia e a peça 1 chega a L3 C4. A vez passa às peças 2. Restam 23 peças; os contadores ainda estão fixos.
MISSÃO ATUAL · 07
Conte as peças na matriz
Onde mexer: damas-captura/app.js → antes de function desenhar
Localize function desenhar().
Acrescente as duas funções abaixo imediatamente antes dela, fora das outras funções.
Para que serve: contarPecas percorre a matriz; atualizarContagem mostra os totais nos dois spans do HTML.
〈/〉 Ver código para copiar
Cole as duas funções completas antes de function desenhar(). Não substitua desenhar.
Código
function contarPecas(jogador) {
let total = 0;
// Percorra os dados, sem contar os elementos desenhados na tela.
for (const linha of posicoes) {
for (const valor of linha) {
if (valor === jogador) total++;
}
}
return total;
}
function atualizarContagem() {
document.getElementById("total-1").textContent = contarPecas(1);
document.getElementById("total-2").textContent = contarPecas(2);
}
Por que não subtrair de 12?
Contar a matriz sempre mostra a posição atual. Assim o mesmo contador funciona depois de capturar, reiniciar e montar um cenário de teste.
contarPecas e atualizarContagem estão prontas. Os números na página serão conectados na próxima missão.
MISSÃO ATUAL · 08
Atualize o placar junto com a tela
Onde mexer: damas-captura/app.js → primeira linha de desenhar
Dentro de desenhar, adicione a chamada abaixo logo após a chave de abertura.
Salve, atualize e repita a sequência de captura da missão 6.
Para que serve: Toda vez que a tela é refeita, os totais são calculados novamente a partir dos dados.
〈/〉 Ver código para copiar
Insira atualizarContagem(); dentro de function desenhar() {, antes de tabuleiro.innerHTML = "";.
Código
atualizarContagem();
A partida começa com 12 × 12. Depois da captura, o contador das peças 2 mostra 11 e o das peças 1 continua em 12.
MISSÃO ATUAL · 09
Descubra se alguém ficou sem peças
Onde mexer: damas-captura/app.js → antes de function desenhar
Hoje a vitória acontece quando o adversário fica sem peças. Ficar sem movimentos possíveis será tratado em outra etapa.
Acrescente verificarVencedor antes de function desenhar(), fora das outras funções.
Leia os comentários e salve o arquivo.
Para que serve: Consulta as quantidades dos dois lados para identificar a condição de vitória desta aula.
〈/〉 Ver código para copiar
Cole a função completa antes de desenhar, depois das funções de contagem.
Código
function verificarVencedor() {
// Vitória por falta de peças. Outras condições ficam para depois.
const total1 = contarPecas(1);
const total2 = contarPecas(2);
if (total1 > 0 && total2 === 0) return 1;
if (total2 > 0 && total1 === 0) return 2;
return null; // A partida ainda não terminou.
}
A função devolve 1 ou 2 quando o adversário está sem peças. Caso os dois lados ainda tenham peças, devolve null.
MISSÃO ATUAL · 10
Mostre quem venceu
Onde mexer: damas-captura/app.js → função desenhar
Dentro de desenhar, localize turno.textContent = "Vez: peças " + vez;.
Substitua somente essa linha pelo trecho abaixo.
Para que serve: O mesmo espaço informa a vez enquanto a partida continua e o vencedor quando ela termina.
〈/〉 Ver código para copiar
Troque apenas a atribuição a turno.textContent dentro de desenhar. Preserve atualizarContagem() e os laços que criam as casas.
Durante a partida, o texto continua mostrando a vez. Se um lado ficar sem peças, esse espaço mostrará quem venceu.
MISSÃO ATUAL · 11
Encerre os cliques depois da vitória
Onde mexer: damas-captura/app.js → função aoClicarNaCasa
Insira o primeiro trecho no início de aoClicarNaCasa, antes de const casa.
No final dessa função, substitua a mensagem Movimento realizado. Vez das peças pelo segundo trecho.
Para que serve: Bloqueia novas jogadas após o fim e evita anunciar outra vez quando já existe vencedor.
〈/〉 Ver código para copiar
Aba trecho-bloqueio.js: acrescentar logo após function aoClicarNaCasa(evento) {. Aba trecho-mensagem.js: substituir a atribuição final aviso.textContent, imediatamente depois de desenhar().
Código
// Depois da vitória, só os botões de reinício/teste preparam outro jogo.
if (verificarVencedor() !== null) return;
aviso.textContent = verificarVencedor() === null
? "Movimento realizado. Vez das peças " + vez + "."
: "Partida encerrada. Clique em Reiniciar para jogar novamente.";
Não bloqueie o botão Reiniciar
O bloqueio fica dentro de aoClicarNaCasa, que atende somente o tabuleiro. Os botões possuem seus próprios eventos.
Depois da vitória, cliques no tabuleiro não alteram as peças. O aviso orienta reiniciar, e o botão Reiniciar continua funcionando.
MISSÃO ATUAL · 12
Teste a vitória dos dois jogadores
Onde mexer: damas-captura/app.js → antes do evento de reiniciar
Os botões de teste substituem a posição atual. No teste das peças 2, a captura sobe: ela pode capturar para trás, embora o passo simples continue apenas para a frente.
Insira o bloco abaixo antes de reiniciar.addEventListener. Salve e atualize.
Use cada botão de teste. Primeiro tente saltar de L8 C1 para L6 C3; depois capture de L6 C1 para L4 C3. Ao final, clique em Reiniciar.
Para que serve: Os botões montam três peças em posições conhecidas, permitindo testar o fim da partida rapidamente.
〈/〉 Ver código para copiar
Acrescente o bloco completo antes da linha reiniciar.addEventListener("click", function () {. Preserve o evento existente de reiniciar.
Código
function prepararTeste(jogador) {
// Somente três peças: duas do jogador da vez e uma adversária.
posicoes = Array.from({ length: 8 }, () => Array(8).fill(0));
posicoes[5][0] = jogador;
posicoes[7][0] = jogador;
posicoes[4][1] = jogador === 1 ? 2 : 1;
vez = jogador;
selecionada = null;
desenhar();
aviso.textContent = "Teste: capture de L6 C1 para L4 C3, passando por L5 C2.";
}
document.getElementById("teste-1").addEventListener("click", function () {
prepararTeste(1);
});
document.getElementById("teste-2").addEventListener("click", function () {
prepararTeste(2);
});
Como testar o bloqueio da vitória?
Depois da captura final, tente selecionar e mover a peça vencedora. Nada deve mudar. Clique em Reiniciar para liberar uma nova partida.
Não apagou o vencedor ao reiniciar?
verificarVencedor calcula o resultado pela matriz. Ao restaurar 12 peças por lado, desenhar deve voltar a mostrar Vez: peças 1.
O salto sobre casa vazia é bloqueado. A captura leva os totais de 2 × 1 para 2 × 0 e anuncia a vitória; no segundo teste, de 1 × 2 para 0 × 2. Reiniciar recupera 12 × 12 e a vez das peças 1.
MISSÃO ATUAL · 13
Confira e guarde a continuação
Onde mexer: VS Code → pasta damas-captura
Confira os itens na sua página e salve os arquivos.
Guarde a pasta damas-captura inteira no local indicado pelo professor.
A cópia da Aula 1 está preservada e a continuação contém captura, contagem e encerramento.
MISSÃO ATUAL · 14
Como foi construir a captura?
Onde mexer: Campo de resposta desta missão
Conte qual parte você conseguiu fazer com mais autonomia e qual missão precisou de mais apoio.
Seu relato ajuda o professor a planejar a próxima aula.
Aula concluída!
Salve sua pasta. Você pode voltar às missões para revisar e mostrar seu trabalho ao professor.