他们是我可以使用参数制作可行的国际象棋棋子移动集的方法吗?
Is their a way I can make a workable chess pawn move set using parameters?
我之前试过问过这个问题,但措辞不太好,所以我再试一次。
我想要的:
有一个函数接受两个参数,面(深色或白色)和数字 (1-9)。在函数本身中,将有两个 "if" "functions"(一个是 'If',第二个是 'if else'),它们都用于检查边和数字以及 运行考虑任何“特殊”规则的功能(例如:检查棋子的第一步是否是棋子的第一步,以查看它是否可以向上移动两个空格)。在 If 函数中,它们将是另外两个函数来检查 pawn 在哪一侧,以查看它是应该向上移动还是向下移动。
问题:
我 运行 遇到一个问题,其中 google 控制台日志不会给我任何错误,并且函数会 运行 If 函数。因此我无法知道问题是什么。
代码:
var darkPawn1 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn2 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn3 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn4 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn5 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn6 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn7 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn8 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn9 = {
stats: 'in',
firstPawnMove: 'ture'
};
var moveCheck = function(side, number) {
var pawnInfo = side + 'Pawn' + number;
var pawnTest = pawnInfo + '.firstPawnMove'
console.log('log check:' + side + ' ' + number);
console.log('Pawn Move Check' + ' ' + (pawnInfo + '.firstPawnMove'));
if (side + 'Pawn' + number + '.firstPawnMove' == 'false') {
if (side = 'dark') {
top: '-=' + 50 + 'px'
}
else if (side = 'white') {
top: '+=' + 50 + 'px'
}
} else if (side + 'Pawn' + number + '.firstPawnMove' == 'ture') {
if (side = 'dark') {
top: '-=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
else if (side = 'white') {
top: '+=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
}
};
document.getElementById('darkPawnButton1').onclick = moveCheck('dark', '1');
#darkChessPlayerId {}
#darkBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkQueen {
height: 50px;
width: 50px;
position: absolute;
}
#darkKing {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn1 {
top: 270px;
left: 7px;
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn9 {
height: 50px;
width: 50px;
position: absolute;
}
<!-- White Side Peaces -->#whiteBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteQueen {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKing {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn1 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn9 {
height: 50px;
width: 50px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id='playFieldId' src="http://4.bp.blogspot.com/_zJfGdkTGq6U/R6coIhq4e7I/AAAAAAAAAD4/joyxFXtLZRw/s400/chessboard.jpg" />
<button id='boxesAnimationId'>
Click to run password animation puzzle
</button>
<button id='darkPawnButton1'>
test move PAWN
</button>
<div id='darkChessPlayerId'>
<img id='darkBishop1' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkBishop2' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkKnight1' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkKnight2' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkTower1' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkTower2' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkQueen' src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png" />
<img id='darkKing' src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png" />
<img id='darkPawn1' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn2' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn3' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn4' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn5' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn6' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn7' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn8' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn9' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
</div>
<div id='whiteChessPlayerId'>
<img id='whiteBishop1' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteBishop2' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteKnight1' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteKnight2' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteTower1' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteTower2' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteQueen' src="https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png" />
<img id='whiteKing' src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png" />
<img id='whitePawn1' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn2' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn3' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn4' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn5' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn6' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn7' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn8' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn9' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
</div>
您的尝试存在几个问题:
- 不要像
darkPawn1
那样为每个片段创建单独的变量。而是将这些对象放在棋盘的数组表示中。
firstPawnMove
得到字符串值 "ture",这有点奇怪(你打算 "true" 吗?)。首先,您可以在 JavaScript 中使用布尔值(true
不带引号)。其次,你会想要注册每件作品的当前位置,当你拥有它时,你真的不需要
firstPawnMove
了,因为这可以直接从 pawn 的当前位置及其颜色得出。
- 给片对象一个
color
属性
if (side + 'Pawn' + number + '.firstPawnMove' == 'false') {
是一个错误的条件。它永远是假的。您可能打算动态访问其中一个变量,例如 darkPawn1
,但正如我建议摆脱该变量概念一样,这一点不再相关
if (side = 'dark') {
将 'dark'
分配给 side
。你打算做 ==
.
top: '-=' + 50 + 'px'
无效 JavaScript。您可能打算对某些 CSS 属性 应用一些更改,但这需要完全不同的语法
- ...其他一些可以改进的地方...
要解决这种情况,您需要从头开始,因为您的大部分设计和代码无论如何都应该修改。
这是实现简单棋盘的一种方法。它使用 class 表示棋子、方块和棋盘。 Board 实例有 Square 实例,而 Square 实例又可能有 Piece 实例,也可能没有。
一些方法允许渲染、执行移动和获取移动列表。
这当然只是一个开始。您必须将其扩展到其他检查、功能、用户交互等。
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>
这种男子气概作为一种格式非常有效,帮助我更好地了解我的目标。
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>
我之前试过问过这个问题,但措辞不太好,所以我再试一次。
我想要的:
有一个函数接受两个参数,面(深色或白色)和数字 (1-9)。在函数本身中,将有两个 "if" "functions"(一个是 'If',第二个是 'if else'),它们都用于检查边和数字以及 运行考虑任何“特殊”规则的功能(例如:检查棋子的第一步是否是棋子的第一步,以查看它是否可以向上移动两个空格)。在 If 函数中,它们将是另外两个函数来检查 pawn 在哪一侧,以查看它是应该向上移动还是向下移动。
问题:
我 运行 遇到一个问题,其中 google 控制台日志不会给我任何错误,并且函数会 运行 If 函数。因此我无法知道问题是什么。
代码:
var darkPawn1 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn2 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn3 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn4 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn5 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn6 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn7 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn8 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn9 = {
stats: 'in',
firstPawnMove: 'ture'
};
var moveCheck = function(side, number) {
var pawnInfo = side + 'Pawn' + number;
var pawnTest = pawnInfo + '.firstPawnMove'
console.log('log check:' + side + ' ' + number);
console.log('Pawn Move Check' + ' ' + (pawnInfo + '.firstPawnMove'));
if (side + 'Pawn' + number + '.firstPawnMove' == 'false') {
if (side = 'dark') {
top: '-=' + 50 + 'px'
}
else if (side = 'white') {
top: '+=' + 50 + 'px'
}
} else if (side + 'Pawn' + number + '.firstPawnMove' == 'ture') {
if (side = 'dark') {
top: '-=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
else if (side = 'white') {
top: '+=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
}
};
document.getElementById('darkPawnButton1').onclick = moveCheck('dark', '1');
#darkChessPlayerId {}
#darkBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkQueen {
height: 50px;
width: 50px;
position: absolute;
}
#darkKing {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn1 {
top: 270px;
left: 7px;
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn9 {
height: 50px;
width: 50px;
position: absolute;
}
<!-- White Side Peaces -->#whiteBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteQueen {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKing {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn1 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn9 {
height: 50px;
width: 50px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id='playFieldId' src="http://4.bp.blogspot.com/_zJfGdkTGq6U/R6coIhq4e7I/AAAAAAAAAD4/joyxFXtLZRw/s400/chessboard.jpg" />
<button id='boxesAnimationId'>
Click to run password animation puzzle
</button>
<button id='darkPawnButton1'>
test move PAWN
</button>
<div id='darkChessPlayerId'>
<img id='darkBishop1' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkBishop2' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkKnight1' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkKnight2' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkTower1' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkTower2' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkQueen' src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png" />
<img id='darkKing' src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png" />
<img id='darkPawn1' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn2' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn3' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn4' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn5' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn6' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn7' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn8' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn9' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
</div>
<div id='whiteChessPlayerId'>
<img id='whiteBishop1' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteBishop2' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteKnight1' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteKnight2' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteTower1' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteTower2' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteQueen' src="https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png" />
<img id='whiteKing' src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png" />
<img id='whitePawn1' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn2' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn3' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn4' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn5' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn6' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn7' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn8' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn9' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
</div>
您的尝试存在几个问题:
- 不要像
darkPawn1
那样为每个片段创建单独的变量。而是将这些对象放在棋盘的数组表示中。 firstPawnMove
得到字符串值 "ture",这有点奇怪(你打算 "true" 吗?)。首先,您可以在 JavaScript 中使用布尔值(true
不带引号)。其次,你会想要注册每件作品的当前位置,当你拥有它时,你真的不需要firstPawnMove
了,因为这可以直接从 pawn 的当前位置及其颜色得出。- 给片对象一个
color
属性 if (side + 'Pawn' + number + '.firstPawnMove' == 'false') {
是一个错误的条件。它永远是假的。您可能打算动态访问其中一个变量,例如darkPawn1
,但正如我建议摆脱该变量概念一样,这一点不再相关if (side = 'dark') {
将'dark'
分配给side
。你打算做==
.top: '-=' + 50 + 'px'
无效 JavaScript。您可能打算对某些 CSS 属性 应用一些更改,但这需要完全不同的语法- ...其他一些可以改进的地方...
要解决这种情况,您需要从头开始,因为您的大部分设计和代码无论如何都应该修改。
这是实现简单棋盘的一种方法。它使用 class 表示棋子、方块和棋盘。 Board 实例有 Square 实例,而 Square 实例又可能有 Piece 实例,也可能没有。 一些方法允许渲染、执行移动和获取移动列表。
这当然只是一个开始。您必须将其扩展到其他检查、功能、用户交互等。
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>
这种男子气概作为一种格式非常有效,帮助我更好地了解我的目标。
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);
.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }
<div id="container"></div>