Как перебирать диагонали шахматной доски, проверяя, можно ли захватить фигуру с помощью JavaScript ⇐ CSS

[Anonymous]

Я разработал простую доску JavaScript с CSS, HTML и JavaScript. Наверху доски есть фигуры, которые могут захватывать вниз как в правом, так и в левом направлении. Я пытаюсь написать функцию, которая может проверять, может ли постукированная фигура перепрыгнуть через фигуру противника. Для одиночных захватов это просто, потому что нужно просто проверить, есть ли в соседних ячейках фигуры фигура противника, инкапсулированная пустыми ячейками, но для множественных захватов это становится немного более проблематичным, поскольку предполагает, что мне нужен цикл который проверяет шаблон захвата и ждет, пока пользователь коснется каждого пустого квадрата до последнего и переместит этот фрагмент по этой ячейке.
Как мне это сделать в Java Script?

Код: Выделить всё

let A = true;
let B = false;
//define views that we will use to send messages to both players
let messageForA = document.getElementById("playerA");
let messageForB = document.getElementById("playerB");

//this function checks if the tapped piece can make single or multiple jumps over opponent cells
function canJumpOverOpponent(table, row, col) {
/*a piece can jump over opponent pieces if there is an opponent piece
between that piece and an empty square
we use a path finding algorithm to check for empty squares in the path of that piece
*/
//the top pieces can either capture left or right downwards

}
//this function draws the chekerboard

function createCheckerboard() {
const table = document.getElementById('checkertable');
for (let row = 0; row < 8; row++) {
const newRow = table.insertRow();
for (let col = 0; col < 8; col++) {
const newCell = newRow.insertCell();
newCell.classList.add('square');
if ((row + col) % 2 === 0) {
//paint the white squares
newCell.classList.add('white');
} else {
//paint the brow squares where we will draw pieces
newCell.classList.add('brown');
//we draw the old pieces in this section
if (row < 3) {
const goldpiece = document.createElement('div');
goldpiece.classList.add('gold-piece');;
newCell.appendChild(goldpiece);
goldpiece.addEventListener('click', function(event) {
if (A) {
if (event.target.classList.contains('gold-piece')) {
//means the cell contains a piece
console.log("This square contains a gold piece");
//highlight this piece and remove highlights from any previous square
const goldpieces = document.querySelectorAll('.gold-piece');
console.log(goldpieces.length);
goldpieces.forEach(function(element) {
if (element.classList.contains('selected-piece')) {
//remove the highlight from previous cells
element.classList.remove('selected-piece');
}
});
event.target.classList.add('selected-piece');
//check if the piece can make a jump over opponent pieces

} else {
//this square is empty
console.log("this piece is empty, check if user had tapped a previous square or he is completing a capture");
}
} else {
console.log("player one attempts to play while it is not his turn");
}
});
}
//we draw the red pieces in this section
if (row >= 5) {
const redpiece = document.createElement('div');
redpiece.classList.add('red-piece');;
newCell.appendChild(redpiece);
}

}

}
}
}
window.onload = () =>  createCheckerboard();

Код: Выделить всё

body {
background: green;
}

/*style the table*/

.table {
margin: auto;
width: 800px;
height: 800px;
}

.square {
width: 100px;
height: 100px;
}

.white {
background-color: mintcream;
}

.brown {
background-color: chocolate;
}

/*styles for the pieces*/

.gold-piece {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: gold;
width: 80%;
height: 80%;
border-radius: 50%;
margin: 10%;
}

.red-piece {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: orangered;
width: 80%;
height: 80%;
border-radius: 50%;
margin: 10%;
}

/*style for styling a selected piece*/

.selected-piece {
border: 2px solid white;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/784 ... -piece-can