小贝子编程

在 JavaScript 中，如何在跳棋中跳过时删除片段



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Two-player Chess</title>
<style>
body {
margin: 0;
background-color: tomato;
}

canvas {
position: absolute;
display: block;
}
</style>
<script>
const boardSize = 400,
darkSqColor = "brown",
lightSqColor = "beige",
uiColor = "red",
pieces = {},
moves = [],
board = {};
var boardCanvas, boardCtx, uiCanvas, uiCtx, width, height,
dragging = false,
dragFrom, dragTo;
document.addEventListener("DOMContentLoaded", init);
/* SETUP */
function init() {
boardCanvas = document.querySelector("canvas");
uiCanvas = boardCanvas.nextElementSibling;
boardCtx = boardCanvas.getContext("2d");
uiCtx = uiCanvas.getContext("2d");
width = boardCanvas.width = uiCanvas.width = boardSize;
height = boardCanvas.height = uiCanvas.height = boardSize;
uiCanvas.addEventListener("mousedown", handleMousedown);
uiCanvas.addEventListener("mousemove", handleMousemove);
uiCanvas.addEventListener("mouseup", handleMouseup);
setupPieces();
setupBoard();
drawBoard();
drawPieces();
}
function setupPieces() {
}
function setupBoard() {
let squareSize = boardSize/8;
board.a8 = { x: squareSize * 0, y: squareSize * 0, piece: null };
board.a7 = { x: squareSize * 0, y: squareSize * 1, piece: "r" };
board.a6 = { x: squareSize * 0, y: squareSize * 2, piece: null };
board.a5 = { x: squareSize * 0, y: squareSize * 3, piece: null };
board.a4 = { x: squareSize * 0, y: squareSize * 4, piece: null };
board.a3 = { x: squareSize * 0, y: squareSize * 5, piece: "b" };
board.a2 = { x: squareSize * 0, y: squareSize * 6, piece: null };
board.a1 = { x: squareSize * 0, y: squareSize * 7, piece: "b" };
board.b8 = { x: squareSize * 1, y: squareSize * 0, piece: "r" };
board.b7 = { x: squareSize * 1, y: squareSize * 1, piece: null };
board.b6 = { x: squareSize * 1, y: squareSize * 2, piece: "r" };
board.b5 = { x: squareSize * 1, y: squareSize * 3, piece: null };
board.b4 = { x: squareSize * 1, y: squareSize * 4, piece: null };
board.b3 = { x: squareSize * 1, y: squareSize * 5, piece: null };
board.b2 = { x: squareSize * 1, y: squareSize * 6, piece: "b" };
board.b1 = { x: squareSize * 1, y: squareSize * 7, piece: null };
board.c8 = { x: squareSize * 2, y: squareSize * 0, piece: null };
board.c7 = { x: squareSize * 2, y: squareSize * 1, piece: "r" };
board.c6 = { x: squareSize * 2, y: squareSize * 2, piece: null };
board.c5 = { x: squareSize * 2, y: squareSize * 3, piece: null };
board.c4 = { x: squareSize * 2, y: squareSize * 4, piece: null };
board.c3 = { x: squareSize * 2, y: squareSize * 5, piece: "b" };
board.c2 = { x: squareSize * 2, y: squareSize * 6, piece: null };
board.c1 = { x: squareSize * 2, y: squareSize * 7, piece: "b" };
board.d8 = { x: squareSize * 3, y: squareSize * 0, piece: "r" };
board.d7 = { x: squareSize * 3, y: squareSize * 1, piece: null };
board.d6 = { x: squareSize * 3, y: squareSize * 2, piece: "r" };
board.d5 = { x: squareSize * 3, y: squareSize * 3, piece: null };
board.d4 = { x: squareSize * 3, y: squareSize * 4, piece: null };
board.d3 = { x: squareSize * 3, y: squareSize * 5, piece: null };
board.d2 = { x: squareSize * 3, y: squareSize * 6, piece: "b" };
board.d1 = { x: squareSize * 3, y: squareSize * 7, piece: null };
board.e8 = { x: squareSize * 4, y: squareSize * 0, piece: null };
board.e7 = { x: squareSize * 4, y: squareSize * 1, piece: "r" };
board.e6 = { x: squareSize * 4, y: squareSize * 2, piece:  null };
board.e5 = { x: squareSize * 4, y: squareSize * 3, piece: null };
board.e4 = { x: squareSize * 4, y: squareSize * 4, piece: null };
board.e3 = { x: squareSize * 4, y: squareSize * 5, piece: "b" };
board.e2 = { x: squareSize * 4, y: squareSize * 6, piece: null };
board.e1 = { x: squareSize * 4, y: squareSize * 7, piece: "b" };
board.f8 = { x: squareSize * 5, y: squareSize * 0, piece: "r" };
board.f7 = { x: squareSize * 5, y: squareSize * 1, piece: null };
board.f6 = { x: squareSize * 5, y: squareSize * 2, piece: "r" };
board.f5 = { x: squareSize * 5, y: squareSize * 3, piece: null };
board.f4 = { x: squareSize * 5, y: squareSize * 4, piece: null };
board.f3 = { x: squareSize * 5, y: squareSize * 5, piece: null };
board.f2 = { x: squareSize * 5, y: squareSize * 6, piece: "b" };
board.f1 = { x: squareSize * 5, y: squareSize * 7, piece: null };
board.g8 = { x: squareSize * 6, y: squareSize * 0, piece: null };
board.g7 = { x: squareSize * 6, y: squareSize * 1, piece: "r" };
board.g6 = { x: squareSize * 6, y: squareSize * 2, piece: null };
board.g5 = { x: squareSize * 6, y: squareSize * 3, piece: null };
board.g4 = { x: squareSize * 6, y: squareSize * 4, piece: null };
board.g3 = { x: squareSize * 6, y: squareSize * 5, piece: "b" };
board.g2 = { x: squareSize * 6, y: squareSize * 6, piece: null };
board.g1 = { x: squareSize * 6, y: squareSize * 7, piece: "b" };
board.h8 = { x: squareSize * 7, y: squareSize * 0, piece: "r" };
board.h7 = { x: squareSize * 7, y: squareSize * 1, piece: null };
board.h6 = { x: squareSize * 7, y: squareSize * 2, piece: "r" };
board.h5 = { x: squareSize * 7, y: squareSize * 3, piece: null };
board.h4 = { x: squareSize * 7, y: squareSize * 4, piece: null };
board.h3 = { x: squareSize * 7, y: squareSize * 5, piece: null };
board.h2 = { x: squareSize * 7, y: squareSize * 6, piece: "b" };
board.h1 = { x: squareSize * 7, y: squareSize * 7, piece: null };
moves.length = 1; // empty out moves array
moves[0] = JSON.parse(JSON.stringify(board)); // deep copy of board
}
/* EVENT HANDLING */
function handleMousedown(e) {
if (dragFrom) {
dragging = true;
}
}
function handleMousemove(e) {
uiCtx.clearRect(0, 0, width, height);
if (dragging) {
handleDrag(e);
} else { // not dragging but hovering
handleHover(e);
}
}
function handleDrag(e) {
let squareSize = boardSize / 8,
player = whoseTurn(), // "b" or "r"
lastPosition = moves[moves.length - 1],
square = getSquareByXY(e.clientX, e.clientY); // find square from mousemove event object;
if (isValidMove(square)) {
//currently, you can move a piecse onto ANY empty square (!lastPosition[square].piece) or an opponent's square (lastPosition[square].piece[0] !== player)
// if so, highlight square
uiCtx.lineWidth = 4;
uiCtx.strokeStyle = uiColor;
uiCtx.strokeRect(lastPosition[square].x + 2, lastPosition[square].y + 2, squareSize - 4, squareSize - 4);
// draw line from original square
uiCtx.lineWidth = 2;
uiCtx.beginPath();
let x1 = lastPosition[dragFrom].x + squareSize / 2,
y1 = lastPosition[dragFrom].y + squareSize / 2,
x2 = lastPosition[square].x + squareSize / 2,
y2 = lastPosition[square].y + squareSize / 2;
uiCtx.moveTo(x1, y1);
uiCtx.lineTo(x2, y2);
uiCtx.stroke();
dragTo = square;
} else {
dragTo = null;
}
}
function handleHover(e) {
let squareSize = boardSize / 8,
player = whoseTurn(), // "w" or "b"
lastPosition = moves[moves.length - 1],
square = getSquareByXY(e.clientX, e.clientY); // find square from mousemove event object;
// check if piece of player's color is on that square
if (lastPosition[square].piece && lastPosition[square].piece[0] === player) {
// if so, highlight square
uiCtx.lineWidth = 4;
uiCtx.strokeStyle = uiColor;
uiCtx.strokeRect(lastPosition[square].x + 2, lastPosition[square].y + 2, squareSize - 4, squareSize - 4);
dragFrom = square;
} else {
dragFrom = null;
}
}
function handleMouseup(e) {
console.log(dragTo)
if (dragging) {
if (dragTo === null) { //nothing happens if player tries to move to square piece is already on
dragFrom = null;
dragTo = null;
dragging = false;
return;
}
// make player move...
//change game state
let lastPosition = moves[moves.length - 1],
newBoard = JSON.parse(JSON.stringify(lastPosition)),
piece = newBoard[dragFrom].piece;
//move piece
newBoard[dragFrom].piece = null;
newBoard[dragTo].piece = piece;
//add another board to the moves array
moves.push(newBoard);
//update board/pieces display
drawBoard();
drawPieces();
//reset drag variables
dragFrom = null;
dragTo = null;
dragging = false;
}
}
function isValidMove(square) { //return true or false
let fromSq = dragFrom,
fromFile = fromSq[0], //"a", "b", etc.
fromRank = Number(fromSq[1]), //"3", "4", etc.
fromFileNum = fromFile.charCodeAt(0), //number representation of letter
movingPieceColor = moves[moves.length - 1][fromSq].piece,
toSq = square,
toFile = toSq[0], //"a", "b", etc.
toRank = Number(toSq[1]), //"3", "4", etc.
toFileNum = toFile.charCodeAt(0), //number representation of letter
pieceOnToSq = moves[moves.length - 1][toSq].piece; //null, "b", or "r"
//can't move onto square with own piece already on it
if (pieceOnToSq === movingPieceColor) return false;
//move onto empty square must be forward and diagonal
if (!pieceOnToSq) {
//moving one rank
if (movingPieceColor === "b" && toRank === fromRank + 1 && Math.abs(toFileNum - fromFileNum) === 1) return true;
if (movingPieceColor === "r" && toRank === fromRank - 1 && Math.abs(toFileNum - fromFileNum) === 1) return true;
//moving two ranks
if (movingPieceColor === "b" && toRank === fromRank + 2 && Math.abs(toFileNum - fromFileNum) === 2) {
//is there a red piece to jump over?
let jumpedSq = String.fromCharCode(fromFileNum + (toFileNum - fromFileNum) / 2) + (toRank - 1),
jumpedPiece = moves[moves.length - 1][jumpedSq].piece;
return jumpedPiece === "r";
}
if (movingPieceColor === "r" && toRank === fromRank - 2 && Math.abs(toFileNum - fromFileNum) === 2) {
//is there a black piece to jump over?
let jumpedSq = String.fromCharCode(fromFileNum + (toFileNum - fromFileNum) / 2) + (toRank + 1),
jumpedPiece = moves[moves.length - 1][jumpedSq].piece;
return jumpedPiece === "b";
}
}
return false;
}


/* HELPERS */
function whoseTurn() {
// if even number of moves in moves array, it's black's turn, otherwise red's
return moves.length % 2 === 0 ? "r" : "b";
}
function getSquareByXY(x, y) {
let squareSize = boardSize / 8,
lastPosition = moves[moves.length - 1];
for (let square in lastPosition) {
if (lastPosition[square].x <= x && lastPosition[square].x + squareSize >= x &&
lastPosition[square].y <= y && lastPosition[square].y + squareSize >= y) return square;
}
}
/* DRAWING */
function drawBoard() {
let squareSize = boardSize / 8,
isLightSq = true;
for (let x = 0; x < width; x += squareSize) {
for (let y = 0; y < height; y += squareSize) {
if (isLightSq) boardCtx.fillStyle = lightSqColor;
else boardCtx.fillStyle = darkSqColor;
boardCtx.fillRect(x, y, squareSize, squareSize);
isLightSq = !isLightSq;
}
isLightSq = !isLightSq;
}
}
function drawPieces() {
let lastPosition = moves[moves.length - 1]; // get last element of moves array
boardCtx.fillStyle = "black"; // text placeholder
boardCtx.textBaseline = "top"; // text placeholder
boardCtx.font = "30px Verdana"; // text placeholder
for (let square in lastPosition) { // iterate through the most recent game state
if (lastPosition[square].piece) {
boardCtx.fillText(lastPosition[square].piece, lastPosition[square].x, lastPosition[square].y); // text placeholder
}
}
}
</script>
</head>
<body>
<canvas></canvas>
<canvas></canvas>
</body>
</html>

我无法弄清楚如何在跳过它后删除一块。 我对此感到非常困惑。 任何帮助将不胜感激。 我希望我的红色和黑色部分能够跳过敌人，然后它可以删除它。 我目前无法做到这一点，我也无法弄清楚能够做到这一点。 我想知道是否有人能够帮助我。 谢谢！

你非常接近，你的函数isValidMove已经在进行检测，我所做的只是返回跳过片段的返回：

return (jumpedPiece === "b") ? jumpedSq: false;

然后我们在函数句柄上相同条件下的变量中收集它像这样拖动：

if (jumped = isValidMove(square)) {

最后我们在句柄鼠标向上逻辑上删除它：

if (newBoard[jumped]) 
newBoard[jumped].piece = null

仅此而已，我希望这是清楚的。
现在其他人给出的注释是有效的，你应该考虑重构你的代码，使其更加面向对象并减少代码。

这是基于您的代码的工作解决方案：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Two-player Chess</title>
<style>
body {
margin: 0;
background-color: tomato;
}

canvas {
position: absolute;
display: block;
}
</style>
<script>
const boardSize = 400,
darkSqColor = "brown",
lightSqColor = "beige",
uiColor = "red",
pieces = {},
moves = [],
board = {};
var boardCanvas, boardCtx, uiCanvas, uiCtx, width, height,
dragging = false,
jumped = false,
dragFrom, dragTo;
document.addEventListener("DOMContentLoaded", init);
/* SETUP */
function init() {
boardCanvas = document.querySelector("canvas");
uiCanvas = boardCanvas.nextElementSibling;
boardCtx = boardCanvas.getContext("2d");
uiCtx = uiCanvas.getContext("2d");
width = boardCanvas.width = uiCanvas.width = boardSize;
height = boardCanvas.height = uiCanvas.height = boardSize;
uiCanvas.addEventListener("mousedown", handleMousedown);
uiCanvas.addEventListener("mousemove", handleMousemove);
uiCanvas.addEventListener("mouseup", handleMouseup);
setupPieces();
setupBoard();
drawBoard();
drawPieces();
}
function setupPieces() {
}
function setupBoard() {
let squareSize = boardSize/8;
board.a8 = { x: squareSize * 0, y: squareSize * 0, piece: null };
board.a7 = { x: squareSize * 0, y: squareSize * 1, piece: "r" };
board.a6 = { x: squareSize * 0, y: squareSize * 2, piece: null };
board.a5 = { x: squareSize * 0, y: squareSize * 3, piece: null };
board.a4 = { x: squareSize * 0, y: squareSize * 4, piece: null };
board.a3 = { x: squareSize * 0, y: squareSize * 5, piece: "b" };
board.a2 = { x: squareSize * 0, y: squareSize * 6, piece: null };
board.a1 = { x: squareSize * 0, y: squareSize * 7, piece: "b" };
board.b8 = { x: squareSize * 1, y: squareSize * 0, piece: "r" };
board.b7 = { x: squareSize * 1, y: squareSize * 1, piece: null };
board.b6 = { x: squareSize * 1, y: squareSize * 2, piece: "r" };
board.b5 = { x: squareSize * 1, y: squareSize * 3, piece: null };
board.b4 = { x: squareSize * 1, y: squareSize * 4, piece: null };
board.b3 = { x: squareSize * 1, y: squareSize * 5, piece: null };
board.b2 = { x: squareSize * 1, y: squareSize * 6, piece: "b" };
board.b1 = { x: squareSize * 1, y: squareSize * 7, piece: null };
board.c8 = { x: squareSize * 2, y: squareSize * 0, piece: null };
board.c7 = { x: squareSize * 2, y: squareSize * 1, piece: "r" };
board.c6 = { x: squareSize * 2, y: squareSize * 2, piece: null };
board.c5 = { x: squareSize * 2, y: squareSize * 3, piece: null };
board.c4 = { x: squareSize * 2, y: squareSize * 4, piece: null };
board.c3 = { x: squareSize * 2, y: squareSize * 5, piece: "b" };
board.c2 = { x: squareSize * 2, y: squareSize * 6, piece: null };
board.c1 = { x: squareSize * 2, y: squareSize * 7, piece: "b" };
board.d8 = { x: squareSize * 3, y: squareSize * 0, piece: "r" };
board.d7 = { x: squareSize * 3, y: squareSize * 1, piece: null };
board.d6 = { x: squareSize * 3, y: squareSize * 2, piece: "r" };
board.d5 = { x: squareSize * 3, y: squareSize * 3, piece: null };
board.d4 = { x: squareSize * 3, y: squareSize * 4, piece: null };
board.d3 = { x: squareSize * 3, y: squareSize * 5, piece: null };
board.d2 = { x: squareSize * 3, y: squareSize * 6, piece: "b" };
board.d1 = { x: squareSize * 3, y: squareSize * 7, piece: null };
board.e8 = { x: squareSize * 4, y: squareSize * 0, piece: null };
board.e7 = { x: squareSize * 4, y: squareSize * 1, piece: "r" };
board.e6 = { x: squareSize * 4, y: squareSize * 2, piece:  null };
board.e5 = { x: squareSize * 4, y: squareSize * 3, piece: null };
board.e4 = { x: squareSize * 4, y: squareSize * 4, piece: null };
board.e3 = { x: squareSize * 4, y: squareSize * 5, piece: "b" };
board.e2 = { x: squareSize * 4, y: squareSize * 6, piece: null };
board.e1 = { x: squareSize * 4, y: squareSize * 7, piece: "b" };
board.f8 = { x: squareSize * 5, y: squareSize * 0, piece: "r" };
board.f7 = { x: squareSize * 5, y: squareSize * 1, piece: null };
board.f6 = { x: squareSize * 5, y: squareSize * 2, piece: "r" };
board.f5 = { x: squareSize * 5, y: squareSize * 3, piece: null };
board.f4 = { x: squareSize * 5, y: squareSize * 4, piece: null };
board.f3 = { x: squareSize * 5, y: squareSize * 5, piece: null };
board.f2 = { x: squareSize * 5, y: squareSize * 6, piece: "b" };
board.f1 = { x: squareSize * 5, y: squareSize * 7, piece: null };
board.g8 = { x: squareSize * 6, y: squareSize * 0, piece: null };
board.g7 = { x: squareSize * 6, y: squareSize * 1, piece: "r" };
board.g6 = { x: squareSize * 6, y: squareSize * 2, piece: null };
board.g5 = { x: squareSize * 6, y: squareSize * 3, piece: null };
board.g4 = { x: squareSize * 6, y: squareSize * 4, piece: null };
board.g3 = { x: squareSize * 6, y: squareSize * 5, piece: "b" };
board.g2 = { x: squareSize * 6, y: squareSize * 6, piece: null };
board.g1 = { x: squareSize * 6, y: squareSize * 7, piece: "b" };
board.h8 = { x: squareSize * 7, y: squareSize * 0, piece: "r" };
board.h7 = { x: squareSize * 7, y: squareSize * 1, piece: null };
board.h6 = { x: squareSize * 7, y: squareSize * 2, piece: "r" };
board.h5 = { x: squareSize * 7, y: squareSize * 3, piece: null };
board.h4 = { x: squareSize * 7, y: squareSize * 4, piece: null };
board.h3 = { x: squareSize * 7, y: squareSize * 5, piece: null };
board.h2 = { x: squareSize * 7, y: squareSize * 6, piece: "b" };
board.h1 = { x: squareSize * 7, y: squareSize * 7, piece: null };
moves.length = 1; // empty out moves array
moves[0] = JSON.parse(JSON.stringify(board)); // deep copy of board
}
/* EVENT HANDLING */
function handleMousedown(e) {
if (dragFrom) {
dragging = true;
}
}
function handleMousemove(e) {
uiCtx.clearRect(0, 0, width, height);
if (dragging) {
handleDrag(e);
} else { // not dragging but hovering
handleHover(e);
}
}
function handleDrag(e) {
let squareSize = boardSize / 8,
player = whoseTurn(), // "b" or "r"
lastPosition = moves[moves.length - 1],
square = getSquareByXY(e.clientX, e.clientY); // find square from mousemove event object;        
if (jumped = isValidMove(square)) {
//currently, you can move a piecse onto ANY empty square (!lastPosition[square].piece) or an opponent's square (lastPosition[square].piece[0] !== player)
// if so, highlight square
uiCtx.lineWidth = 4;
uiCtx.strokeStyle = uiColor;
uiCtx.strokeRect(lastPosition[square].x + 2, lastPosition[square].y + 2, squareSize - 4, squareSize - 4);
// draw line from original square
uiCtx.lineWidth = 2;
uiCtx.beginPath();
let x1 = lastPosition[dragFrom].x + squareSize / 2,
y1 = lastPosition[dragFrom].y + squareSize / 2,
x2 = lastPosition[square].x + squareSize / 2,
y2 = lastPosition[square].y + squareSize / 2;
uiCtx.moveTo(x1, y1);
uiCtx.lineTo(x2, y2);
uiCtx.stroke();
dragTo = square;
} else {
dragTo = null;
}
}
function handleHover(e) {
let squareSize = boardSize / 8,
player = whoseTurn(), // "w" or "b"
lastPosition = moves[moves.length - 1],
square = getSquareByXY(e.clientX, e.clientY); // find square from mousemove event object;
// check if piece of player's color is on that square
if (lastPosition[square].piece && lastPosition[square].piece[0] === player) {
// if so, highlight square
uiCtx.lineWidth = 4;
uiCtx.strokeStyle = uiColor;
uiCtx.strokeRect(lastPosition[square].x + 2, lastPosition[square].y + 2, squareSize - 4, squareSize - 4);
dragFrom = square;
} else {
dragFrom = null;
}
}
function handleMouseup(e) {
console.log(dragTo)
if (dragging) {
if (dragTo === null) { //nothing happens if player tries to move to square piece is already on
dragFrom = null;
dragTo = null;
dragging = false;
return;
}
// make player move...
//change game state
let lastPosition = moves[moves.length - 1],
newBoard = JSON.parse(JSON.stringify(lastPosition)),
piece = newBoard[dragFrom].piece;
//move piece
newBoard[dragFrom].piece = null;
newBoard[dragTo].piece = piece;
//remove if jumped
if (newBoard[jumped]) 
newBoard[jumped].piece = null
//add another board to the moves array
moves.push(newBoard);
//update board/pieces display
drawBoard();
drawPieces();
//reset drag variables
dragFrom = null;
dragTo = null;
dragging = false;
}
}
function isValidMove(square) { //return true or false
let fromSq = dragFrom,
fromFile = fromSq[0], //"a", "b", etc.
fromRank = Number(fromSq[1]), //"3", "4", etc.
fromFileNum = fromFile.charCodeAt(0), //number representation of letter
movingPieceColor = moves[moves.length - 1][fromSq].piece,
toSq = square,
toFile = toSq[0], //"a", "b", etc.
toRank = Number(toSq[1]), //"3", "4", etc.
toFileNum = toFile.charCodeAt(0), //number representation of letter
pieceOnToSq = moves[moves.length - 1][toSq].piece; //null, "b", or "r"
//can't move onto square with own piece already on it
if (pieceOnToSq === movingPieceColor) return false;
//move onto empty square must be forward and diagonal
if (!pieceOnToSq) {
//moving one rank
if (movingPieceColor === "b" && toRank === fromRank + 1 && Math.abs(toFileNum - fromFileNum) === 1) return true;
if (movingPieceColor === "r" && toRank === fromRank - 1 && Math.abs(toFileNum - fromFileNum) === 1) return true;
//moving two ranks
if (movingPieceColor === "b" && toRank === fromRank + 2 && Math.abs(toFileNum - fromFileNum) === 2) {
//is there a red piece to jump over?
let jumpedSq = String.fromCharCode(fromFileNum + (toFileNum - fromFileNum) / 2) + (toRank - 1),
jumpedPiece = moves[moves.length - 1][jumpedSq].piece;
return (jumpedPiece === "r") ? jumpedSq: false;
}
if (movingPieceColor === "r" && toRank === fromRank - 2 && Math.abs(toFileNum - fromFileNum) === 2) {
//is there a black piece to jump over?
let jumpedSq = String.fromCharCode(fromFileNum + (toFileNum - fromFileNum) / 2) + (toRank + 1),
jumpedPiece = moves[moves.length - 1][jumpedSq].piece;
return (jumpedPiece === "b") ? jumpedSq: false;
}
}
return false;
}
/* HELPERS */
function whoseTurn() {
// if even number of moves in moves array, it's black's turn, otherwise red's
return moves.length % 2 === 0 ? "r" : "b";
}
function getSquareByXY(x, y) {
let squareSize = boardSize / 8,
lastPosition = moves[moves.length - 1];
for (let square in lastPosition) {
if (lastPosition[square].x <= x && lastPosition[square].x + squareSize >= x &&
lastPosition[square].y <= y && lastPosition[square].y + squareSize >= y) return square;
}
}
/* DRAWING */
function drawBoard() {
let squareSize = boardSize / 8,
isLightSq = true;
for (let x = 0; x < width; x += squareSize) {
for (let y = 0; y < height; y += squareSize) {
if (isLightSq) boardCtx.fillStyle = lightSqColor;
else boardCtx.fillStyle = darkSqColor;
boardCtx.fillRect(x, y, squareSize, squareSize);
isLightSq = !isLightSq;
}
isLightSq = !isLightSq;
}
}
function drawPieces() {
let lastPosition = moves[moves.length - 1]; // get last element of moves array
boardCtx.fillStyle = "black"; // text placeholder
boardCtx.textBaseline = "top"; // text placeholder
boardCtx.font = "35px Verdana"; // text placeholder
for (let square in lastPosition) { // iterate through the most recent game state
if (lastPosition[square].piece) {
boardCtx.fillText(
lastPosition[square].piece, 
lastPosition[square].x + 10 , 
lastPosition[square].y); 
}
}
}
</script>
</head>
<body>
<canvas></canvas>
<canvas></canvas>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium