как определить и подсветить доступные для хода места в шашках
Создаю игру шашки на 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
→ Ссылка
Например ООП:
- "Спрашиваете" у шашки, куда она может походить (если шашка, то 4 поля по диагонали, если дамка, то больше)
- "Спрашиваете" у доски, куда из п.1 можно походить (за край нельзя, на другие шашки нельзя, и т.п.)
- "Спрашиваете" у игры, куда из п.2 можно походить (нужны ли поддавки, можно ли не есть, и т.п.)
- Подсвечиваете разрешенные поля из п.3