他们是我可以使用参数制作可行的国际象棋棋子移动集的一种方式吗？

【问题标题】：Is their a way I can make a workable chess pawn move set using parameters?他们是我可以使用参数制作可行的国际象棋棋子移动集的一种方式吗？
【发布时间】：2019-03-14 15:18:59
【问题描述】：

我之前尝试过问这个问题，但没有说得那么好，所以我再试一次。

我想要什么：

有一个接受两个参数的函数，side（深色或白色）和 number (1-9)。在函数本身中，将有两个“if”“函数”（一个是 'If'，第二个是 'if else'）都用于检查边和数字并运行它们可能是的任何“特殊”规则函数（示例：检查它是否是棋子的第一步，以查看它是否可以向上移动两个空格）。在 If 函数中，它们将是另外两个函数来检查 pawn 在哪一侧以查看它是否应该向上或向下移动。

问题：

我遇到了一个问题，谷歌控制台日志不会给我任何错误，并且该函数将运行 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>

【问题讨论】：

  • 您的if 条件没有意义：它们比较两个保证总是不同的字符串。你能添加你正在使用的 CSS 和 HTML 以及任何其他 JavaScript 吗？也许这会澄清你打算做什么。
  • 你在 ifs (side = 'dark') + 你有错别字 (== 'ture') 和 (side + 'Pawn' + number + '.firstPawnMove' == ' false') 永远不可能是真的
  • 另外，top: '-=' + 50 + 'px' 是无效的语句语法。
  • 很难知道从哪里开始；您似乎在混淆对象和代码，您多次添加诸如'Pawn' + number 之类的东西，这使得事情难以推理，您有无用的悬空表达式。您可能会在控制台中遇到语法错误，但这只是问题集的一部分。您可能想退后一步，让更小的代码部分正常工作，而不是一次将所有内容都放在页面上并想知道哪里出了问题。
  • 恕我直言，使用二维数组来表示棋盘并用棋盘对象填充会更简单。您可以为每种类型定义一个函数，并返回它们可以移动到的下一个索引。因此索引 (1,0) 处的第一个棋子将移动 (+1,+0) 到索引 (2, 0)，马可以使用 (+2, +1) 从 (0, 2) 移动到索引 (2 , 3) 或其他方向。然后你只需重新渲染整个电路板。这将使您不必为每个单独的部分编写无尽的 if/else 块，并且不必手动计算类似的位置：绝对偏移量。

标签： javascript html parameters chess


【解决方案1】：

您的尝试存在几个问题：

  • 不要为每个部分创建单独的变量，例如darkPawn1。而是将这些对象放在棋盘的数组表示中。
  • firstPawnMove 获取字符串值“ture”，这有点奇怪（您是否打算使用“true”？）。首先，您可以在 JavaScript 中使用布尔值（true 不带引号）。其次，你会想要记录每件作品的当前位置，当你拥有它时，你真的不需要 不再是firstPawnMove，因为它可以直接从棋子的当前位置及其颜色推导出来。
  • 为片段对象赋予color 属性
  • if (side + 'Pawn' + number + '.firstPawnMove' == 'false') { 是错误的条件。它永远是错误的。您可能打算动态访问其中一个变量，例如 darkPawn1，但由于我建议远离该变量概念，这一点不再相关
  • if (side = 'dark') { 将 'dark' 分配给 side。你打算这样做==。
  • top: '-=' + 50 + 'px' 不是有效的 JavaScript。您可能打算对某些 CSS 属性进行一些更改，但这需要完全不同的语法
  • ...其他几个可以改进的地方...

要解决这种情况，您需要从头开始，因为无论如何您的大部分设计和代码都应该修改。

这是实现简单棋盘的一种方法。它使用 Piece、Square 和 Board 的类。 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); }
&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

  • 感谢您提供结构良好的反馈。我是整个网站的新手，并会努力改进。我的代码看起来如此糟糕的原因主要是因为我和我只在空闲时间做这些编码工作。再次感谢您，您提供了很大的帮助，如果我遇到任何问题，我一定会通知您！
  • 我唯一要问的是，您是否可以更好地了解代码的方式，如果不是 100% 没问题，但有人可以向我发送一个可以帮助我的网站链接。我问的唯一原因是因为我不是一个伟大的程序员和自学的男子汉（我仍然使用一些网站）。
  • Stack Overflow 的目的不是解决关于在哪里可以找到教程等问题，但我认为你可以从接受代码挑战中学到很多东西。只需使用这些关键词进行搜索，成为会员并开始编写简单的挑战。然后将您的代码与其他人提交的代码进行比较。看看你在哪里可以做得更好，......等等。通过这种方式，您可以非常快速地提高您的技能。结合阅读一些关于特定技术的教程（如面向对象编程、函数式编程、模块化编程等）。
【解决方案2】：

这种男子气概作为一种格式非常有效，帮助我更好地了解我应该追求的目标。

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); }
&lt;div id="container"&gt;&lt;/div&gt;

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); }
&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-16
    • 1970-01-01
    • 1970-01-01
    • 2017-03-20
    • 2013-05-24
    • 2016-07-06
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode