Grades e vizinhos

Demo própria de grade. Clique escolhe célula; vizinhos ortogonais destacam.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Vizinho ortogonal é?
• cols e rows?
• cell em pixels?

Clicar a grade

A célula selecionada fica laranja; vizinhos, teal.

Erro comum: diagonal como vizinha — este exercício é 4-direções.

Função vizinhos

No início a lista está vazia. Devolva cima/baixo/esquerda/direita com limites.

return [[c+1,r],[c-1,r],[c,r+1],[c,r-1]].filter(([x,y]) => x>=0&&y>=0&&x<cols&&y<rows);

Pare e experimente. Filtre fora da grade.

Base do pathfinding

BFS e A* andam de vizinho em vizinho.

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne app.js, index.html, styles.css. Abra o resultado pronto, localize o trecho que produz grades e vizinhos e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

1. Quantos vizinhos no canto?
2. No centro?
3. wall ainda não existe?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Dois.

Atividade 2. Até quatro.

Atividade 3. Sim — só vizinhança.

Exemplo deste capítulo: pacote de exemplos/24-grades/.

O arquivo completo

Referência do exemplo 24-grades, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grades — Laboratório da Luz</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <a class="skip" href="#conteudo">Ir ao conteúdo</a>
  <header>
    <p class="tag">Laboratório da Luz · Recife</p>
    <h1>Grades</h1>
  </header>
  <main id="conteudo">
<p class="dica">Grades — clique na grade quando houver interação.</p>
<div class="stage"><canvas id="g" width="448" height="320" aria-label="Grade interativa"></canvas></div>
<p class="controles"><button type="button" id="run">Recalcular</button></p>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

app.js

const cols = 12, rows = 8, size = 36;
const canvas = document.getElementById("g");
const ctx = canvas.getContext("2d");
let sel = { c: 2, r: 3 };
function vizinhos(c, r) {
  return [[c+1,r],[c-1,r],[c,r+1],[c,r-1]].filter(([x,y]) => x>=0&&y>=0&&x<cols&&y<rows);
}
function desenhar() {
  ctx.fillStyle = "#0f1a22";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      ctx.strokeStyle = "#cfc6b6";
      ctx.strokeRect(c * size, r * size, size, size);
    }
  }
  for (const [c, r] of vizinhos(sel.c, sel.r)) {
    ctx.fillStyle = "#1b6b6e88";
    ctx.fillRect(c * size, r * size, size, size);
  }
  ctx.fillStyle = "#c45c26";
  ctx.fillRect(sel.c * size, sel.r * size, size, size);
}
canvas.addEventListener("click", (e) => {
  const rect = canvas.getBoundingClientRect();
  sel.c = Math.floor((e.clientX - rect.left) / size);
  sel.r = Math.floor((e.clientY - rect.top) / size);
  desenhar();
});
desenhar();