我用 CSS、HTML 和 JavaScript 设计了一个简单的 JavaScript 板。棋盘顶部有棋子，可以向右或向左向下捕获。我正在尝试编写一个函数来检查点击的棋子是否可以跳过对手的棋子。对于单次捕获，这很简单，因为它只涉及检查该块的相邻单元是否有一个由空单元封装的对手块，但对于多次捕获，它会变得有点问题，因为它表明我需要一个循环检查捕获模式并等待用户点击每个空方块直到最后一个并将该块移动到该单元格上。 我如何在 Java 脚本中做到这一点？
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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<div id="playerA"></div>
<table id="checkertable"></table>
<div id="playerA"></div>
</body>
</html>我的想法是，如果找到捕获，则再次运行相同的函数以从新点查找捕获。这假设仅向前移动，并且不允许部分捕获。
var board = [
[0, 1, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 1, 0],
[0, 1, 0, 1, 0, 1, 0, 1],
[-1, 0, -1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[-1, 0, -1, 0, -1, 0, -1, 0],
[0, 0, 0, -1, 0, 0, 0, -1],
[-1, 0, -1, 0, -1, 0, -1, 0],
]
function printBoard(board) {
var str = ""
for (var i = 0; i < board.length; i++) {
for (var j = 0; j < board[i].length; j++) {
str += (board[i][j] < 0 ? " " : " ") + board[i][j]
}
str += "\n"
}
console.log(str)
}
function getCell(board, cellY, cellX) {
if (cellY < 0 || cellX < 0 || cellY >= board.length || cellX >= board[0].length) {
return null
}
return board[cellY][cellX]
}
// top left 0, 0
function getCaptures(board, cellY, cellX) {
var result = [];
for (var j = -1; j <= 1; j += 2) {
if (getCell(board, cellY + 1, cellX + j) === -1 && getCell(board, cellY + 2, cellX + j + j) === 0) {
var nextMoves = getCaptures(board, cellY + 2, cellX + j + j)
if (nextMoves.length == 0) {
result.push([cellY + 2, cellX + j + j])
} else {
result = result.concat(nextMoves)
}
}
}
return result
}
printBoard(board)
var result = getCaptures(board, 2, 1)
console.log("moves from [2, 1]: " + JSON.stringify(result))