Chessboard Java 脚本咨询需要

Question

我需要优化我的棋盘代码 (JS)，以避免为同一棋子（如棋子和其他棋子）复制太多行代码。

我认为我需要创建更好的数据结构，但我不知道如何迭代我的数据结构来定位 board.This 上的所有部分是这个项目的 codepen link。

例如，这是我在棋盘上放置马棋子的功能。

   function addKnight() {
        //piece create function
        var KnightFirst = oneKnight[8];
        var KnightSecond = oneKnight[15];
        var KnightThird = oneKnight[48];
        var KnightFour = oneKnight[55];

        pieceKnight1 = document.createElement("i");
        pieceKnight1.classList.add("fas");
        pieceKnight1.classList.add("fa-chess-knight");
        pieceKnight2 = document.createElement("i");
        pieceKnight2.classList.add("fas");
        pieceKnight2.classList.add("fa-chess-knight");
        pieceKnight3 = document.createElement("i");
        pieceKnight3.classList.add("fas");
        pieceKnight3.classList.add("fa-chess-knight");
        pieceKnight4 = document.createElement("i");
        pieceKnight4.classList.add("fas");
        pieceKnight4.classList.add("fa-chess-knight");

        KnightFirst.appendChild(pieceKnight1);
        KnightSecond.appendChild(pieceKnight2);
        pieceKnight2.classList.add("color");
        KnightThird.appendChild(pieceKnight3);
        KnightFour.appendChild(pieceKnight4);
        pieceKnight4.classList.add("color");

   }

Answer 1

我会做这样的事情。这不是完整的代码，只是结构。

var piece = {
    x, y,
    type,
    color,
    sprite: new Image(),

}
var pieces = [];

function addPieces () {

    if (i < 16) {
    for (let i = 0; i < 32; i++) {
        for (let j = 0; j < 16; j++) {
            pieces.push(piece);
            pieces[i].type = "pawn";

            if (j < 4) {
                //set position for white pawns
            } else {
                //set position for black pawns
            }
        } }

        if (i >= 16 && i < 20) {
        for (let j = 0; j < 4; j++) {
            pieces.push(piece);
            pieces[i].type = "knight";

            if (j < 2) {
                //set position for white knights
            } else {
                //set position for black knights
            }
        }}
        if (i >= 20 && i < 24) {
        for (let j = 0; j < 4; j++) {
            pieces.push(piece);
            pieces[i].type = "rook";

            if (j < 2) {
                //set position for white rooks
            } else {
                //set position for black rooks
            }
        }}

        if (i >= 24 && i < 28) {
        for (let j = 0; j < 4; j++) {
            pieces.push(piece);
            pieces[i].type = "bishop";

            if (j < 2) {
                //set position for white bishops
            } else {
                //set position for black bishops
            }
        }}

        if (i >= 28 && i < 30) {
        for (let j = 0; j < 2; j++) {
            pieces.push(piece);
            pieces[i].type = "queen";

            if (j < 1) {
                //set position for white queen
            } else {
                //set position for black queen
            }
        }}

        if (i >= 30 && i < 32) {
        for (let j = 0; j < 2; j++) {
            pieces.push(piece);
            pieces[i].type = "king";

            if (j < 1) {
                //set position for white king
            } else {
                //set position for black king
            }
        }    }            
    }
}

您可以为每一帧的更新应用相同类型的函数，但这由您决定。希望这对您有所帮助！

Chessboard Java 脚本咨询需要

Chessboard Java script advice need

javascript

foreach

chess

structure