как определить и подсветить доступные для хода места в шашках

Создаю игру шашки на js. У меня есть массив 8х8, где 0 соответствует пустой клетке, 1 - белой шашке, 2 - черной шашке. Проходя циклом по данному массиву создаю игровую доску и расставляю шашки, присваивая id. При клике на шашку, она должна подсвечиваться и также должны подсвечиваться доступные свободные места, куда можно походить. Как это можно определить? Вот мой код

const board = [2, 0, 2, 0, 2, 0, 2, 0,
             0, 2, 0, 2, 0, 2, 0, 2,
             2, 0, 2, 0, 2, 0, 2, 0,
             0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0,
             0, 1, 0, 1, 0, 1, 0, 1,
             1, 0, 1, 0, 1, 0, 1, 0,
             0, 1, 0, 1, 0, 1, 0, 1]

let tbody = document.querySelector('#table').appendChild(document.createElement('tbody'))
function createBoard() {
    for(let i = 0; i < 8; i++) { 
        let tr = tbody.appendChild(document.createElement('tr'));     
        for(let j = 0; j < 8; j++) {
            let td = tr.appendChild(document.createElement("td"));
            td.id = board[j + i * 8];
            if(td.id === '1') {
                let p = td.appendChild(document.createElement("p"));
                p.classList.add('white-checker');
            }
            if(td.id === '2') {
                let p = td.appendChild(document.createElement("p"));
                p.classList.add('black-checker');
            }
        }
    }
};
createBoard();
document.querySelector('#table').addEventListener('click', (e) => {
    e.target.parentNode.classList.toggle('choose')
    if(e.target.className === 'white-checker') {
        
    }
    if(e.target.className === 'black-checker') {
        
    }
})

Ответы (1 шт):

Автор решения: Kromster

Например ООП:

  1. "Спрашиваете" у шашки, куда она может походить (если шашка, то 4 поля по диагонали, если дамка, то больше)
  2. "Спрашиваете" у доски, куда из п.1 можно походить (за край нельзя, на другие шашки нельзя, и т.п.)
  3. "Спрашиваете" у игры, куда из п.2 можно походить (нужны ли поддавки, можно ли не есть, и т.п.)
  4. Подсвечиваете разрешенные поля из п.3
→ Ссылка