他们是我可以使用参数设定可行的国际象棋棋子移动方式吗？

时间：2019-03-14 15:18:59

标签： javascript html parameters chess

我之前曾尝试问过这个问题，但并没有很好地表达出来，所以我再试一次。

我想要什么：

具有一个带有两个参数的功能，侧面（深色或白色）和数字（1-9）。在函数本身中，将有两个“ if”“函数”（一个是“ 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>

2 个答案:

答案 0 :(得分：0)

您的尝试有几个问题：

  • 请勿为每个作品创建单独的变量，例如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属性进行一些更改，但这需要完全不同的语法
  • ...其他有待改进的地方...

要解决这种情况，您需要从头开始，因为大部分设计和代码都应进行修改。

这是实现简单棋盘的一种方法。它为棋子，正方形和棋盘使用一个类。 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>

答案 1 :(得分：0)

这种男子气概的格式非常有用，有助于我更好地了解自己的目标。

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>

相关问题
最新问题