时间戳

首页 > 解决方案 > 棋盘Java脚本建议需要

javascript - 棋盘Java脚本建议需要

问题描述

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

我认为我需要创建更好的数据结构，但我不知道如何迭代我的数据结构以定位板上的所有部分。这是该项目的codepen 链接。

例如，这是我将骑士棋子放在棋盘上的功能。 

   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");

   }

标签： javascriptforeachstructurechess

解决方案

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

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
            }
        }    }            
    }
}

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

推荐阅读