So durchlaufen Sie Diagonalen in einem Schachbrett und prüfen, ob ein Teil mit JavaScript erfasst werden kann ⇐ HTML

[Anonymous]

Ich habe ein einfaches JavaScript-Board mit CSS, HTML und JavaScript entworfen. Das Brett hat oben Teile, die nach rechts oder links nach unten greifen können. Ich versuche, eine Funktion zu programmieren, die prüfen kann, ob eine getippte Figur über eine gegnerische Figur springen kann. Bei einzelnen Schlägen ist das einfach, weil es nur darum geht, zu prüfen, ob in den benachbarten Zellen des Teils ein Gegenstück vorhanden ist, das von leeren Zellen umschlossen ist. Bei mehreren Schlägen wird es jedoch etwas problematischer, weil es darauf hindeutet, dass ich eine Schleife benötige, die nach einem Schlagmuster sucht und darauf wartet, dass der Benutzer auf jedes leere Feld bis zum letzten tippt und das Teil über diese Zelle bewegt.
Wie mache ich das in JavaScript?

Code: Select all

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();

Code: Select all

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;
}

Code: Select all