[Dúvida] Duvida sobre criar uma função xadrez | Lógica de programação

Boa noite, tenho uma duvda referente a um jogo de xadrez que estou fazendo.

Bem eu fiz a atribuição de coordenada de cada quadrado. as fileiras com as respequitivas peças.

agora o que não entendo, é fazer a função que pega o codigo da peça e joga em um ponto especifico no click, Grato pela luz quem puder me ajudar. segue o codigo.

//tabuleiro
const tabuleiroDOM = document.querySelector('.tabuleiro');

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let quadrado = document.createElement('div');
    quadrado.className = 'quadrado ';
    quadrado.id = 'quadrado-' + i + '-' + j; // adiciona o atributo id ao elemento
    tabuleiroDOM.appendChild(quadrado);
  }
}

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let quadrado = document.getElementById('quadrado-' + i + '-' + j);
    if ((i + j) % 2 == 0) {
      quadrado.style.backgroundColor = '#c0c0c0';
    } else {
      quadrado.style.backgroundColor = 'white';
    }
  }
}

//peças

//peao
for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let peao = document.getElementById('quadrado-' + i + '-' + j);
    if (i == 1 && j >= 0 && j <= 7) {
      peao.style.fontSize = '80px';
      peao.style.alignItems = 'center';
      peao.style.textAlign = 'center';
      // peao.style.color = '#0081C9';
      peao.innerHTML = '&#9823';
    }
  }
}

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let peao = document.getElementById('quadrado-' + i + '-' + j);
    if (i == 6 && j >= 0 && j <= 7) {
      peao.style.fontSize = '80px';
      peao.style.alignItems = 'center';
      peao.style.textAlign = 'center';
      // peao.style.color = '#6C00FF';
      peao.innerHTML = '&#9817';
    }
  }
}

//Torres

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let torre = document.getElementById('quadrado-' + i + '-' + j);
    if ((i == 0 && j == 0) || (i == 0 && j == 7)) {
      torre.style.fontSize = '80px';
      torre.style.alignItems = 'center';
      torre.style.textAlign = 'center';
      // torre.style.color = '#0081C9';
      torre.innerHTML = '&#9820';
    }
    if ((i == 7 && j == 0) || (i == 7 && j == 7)) {
      torre.style.fontSize = '80px';
      torre.style.alignItems = 'center';
      torre.style.textAlign = 'center';
      // torre.style.color = '#6C00FF';
      torre.innerHTML = '&#9814';
    }
  }
}

//cavalo

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let cavalo = document.getElementById('quadrado-' + i + '-' + j);
    if ((i == 0 && j == 1) || (i == 0 && j == 6)) {
      cavalo.style.fontSize = '80px';
      cavalo.style.alignItems = 'center';
      cavalo.style.textAlign = 'center';
      // cavalo.style.color = '#0081C9';
      cavalo.innerHTML = '&#9822; ';
    }
    if ((i == 7 && j == 1) || (i == 7 && j == 6)) {
      cavalo.style.fontSize = '80px';
      cavalo.style.alignItems = 'center';
      cavalo.style.textAlign = 'center';
      // cavalo.style.color = '#6C00FF';
      cavalo.innerHTML = '&#9816;';
    }
  }
}

//bispo

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let bispo = document.getElementById('quadrado-' + i + '-' + j);
    if ((i == 0 && j == 2) || (i == 0 && j == 5)) {
      bispo.style.fontSize = '80px';
      bispo.style.alignItems = 'center';
      bispo.style.textAlign = 'center';
      // bispo.style.color = '#0081C9';
      bispo.innerHTML = '&#9821; ';
    }
    if ((i == 7 && j == 2) || (i == 7 && j == 5)) {
      bispo.style.fontSize = '80px';
      bispo.style.alignItems = 'center';
      bispo.style.textAlign = 'center';
      // bispo.style.color = '#6C00FF';
      bispo.innerHTML = '&#9815;';
    }
  }
}

//rainha preta e branca
let rainhaPreta = document.getElementById('quadrado-' + 0 + '-' + 3);
rainhaPreta.style.fontSize = '80px';
rainhaPreta.style.alignItems = 'center';
rainhaPreta.style.textAlign = 'center';
rainhaPreta.innerHTML = '&#9819; ';
let rainhaBranca = document.getElementById('quadrado-' + 7 + '-' + 3);

rainhaBranca.style.fontSize = '80px';
rainhaBranca.style.alignItems = 'center';
rainhaBranca.style.textAlign = 'center';
rainhaBranca.innerHTML = '&#9813; ';

//rei branco e preto

let reiBranco = document.getElementById('quadrado-' + 0 + '-' + 4);
reiBranco.style.fontSize = '80px';
reiBranco.style.alignItems = 'center';
reiBranco.style.textAlign = 'center';
reiBranco.innerHTML = '&#9818; ';

let reiPreto = document.getElementById('quadrado-' + 7 + '-' + 4);

reiPreto.style.fontSize = '80px';
reiPreto.style.alignItems = 'center';
reiPreto.style.textAlign = 'center';
reiPreto.innerHTML = '&#9812; ';

Grato.

Olá, Lincon! Tudo bem?

Peço desculpas pela demora em obter um retorno.

Para implementar a movimentação das peças, você pode criar um sistema de manipulação de eventos que responda ao clique do usuário em um quadrado do tabuleiro. A seguir estão os passos gerais que você pode seguir:

Adicione um manipulador de evento de clique a cada quadrado do tabuleiro.
Dentro do manipulador de evento, identifique a peça presente no quadrado.
Implemente a lógica para permitir que o jogador selecione um quadrado de destino após selecionar uma peça.
Mova a peça para o quadrado de destino selecionado.

Aqui está um exemplo básico de como você poderia adicionar a funcionalidade de movimento às peças de peão:

// Adicione um manipulador de evento de clique a cada quadrado
for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    let quadrado = document.getElementById('quadrado-' + i + '-' + j);
    
    quadrado.addEventListener('click', function() {
      moverPeca(i, j); // Chama a função moverPeca passando as coordenadas do quadrado clicado
    });
  }
}

let pecaSelecionada = null;

// Função para mover a peça para o quadrado de destino
function moverPeca(destinoX, destinoY) {
  if (pecaSelecionada) {
    // Lógica de movimento aqui...
    
    // Atualize o quadrado de destino com a peça selecionada
    let quadradoDestino = document.getElementById('quadrado-' + destinoX + '-' + destinoY);
    quadradoDestino.innerHTML = pecaSelecionada.innerHTML;
    
    // Limpe o quadrado de origem
    pecaSelecionada.innerHTML = '';
    
    pecaSelecionada = null; // Reinicialize a peça selecionada
  } else {
    // Se nenhuma peça foi selecionada, atribua a peça clicada à variável pecaSelecionada
    pecaSelecionada = document.getElementById('quadrado-' + destinoX + '-' + destinoY);
  }
}

Lembre-se de que este é apenas um exemplo básico e você precisará personalizá-lo de acordo com as regras específicas do jogo de xadrez que você está implementando. Com base nesse exemplo, você pode criar funções para cada tipo de peça e implementar a lógica de movimento adequada.

Espero que isso lhe dê uma ideia de como abordar a implementação da funcionalidade de movimento das peças no seu jogo de xadrez. Se tiver mais dúvidas, fique à vontade para perguntar! Boa sorte com o seu projeto.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!