动态生成棋盘和 FEN 字符串生成的棋子运动

Question

我目前正在尝试用 JavaScript、HTML 和 CSS 制作一个国际象棋游戏。我已经创建了生成棋盘的代码，以及将 FEN 字符串解释为国际象棋位置的代码。但是，我只需要一种能够让棋子移动的方法。

我很确定如何从逻辑上做到这一点，但是我真的不明白如何将它实现到代码中。以下是我认为应该遵循的步骤：

1. 确定移动的部件是什么以及它在什么位置
2. 从作品当前占用的位置删除类名（我通过 background:url() 在 CSS 中渲染图像）
3. 计算这件作品要去哪里
4. 将班级名称添加到作品要去的地方

我了解解决方案，但是我不确定如何将该解决方案实施到我已有的代码中，它在这里：

class Grid {
    constructor (length, height) {
        this.length = length;
        this.height = height;
    }
    render() {
        let total = this.length * this.height;
        for (let i = 1; i <= total; i++) {
            const whiteSquare = document.createElement('div');
            whiteSquare.style.cssText = 'height:50px;width:50px;background-color:#ff9c9c;display:inline-block;padding:10px;';
            whiteSquare.id = `${i}`;
            whiteSquare.classList = 'ws';
            const blackSquare = document.createElement('div');
            blackSquare.style.cssText = 'height:50px;width:50px;background-color:#fa6666;display:inline-block;padding:10px;';
            blackSquare.id = `${i}`;
            blackSquare.classList = 'bs';
            const br = document.createElement('br');
            document
                .getElementById('board')
                .appendChild(i % 2 === Math.ceil(i / this.length) % 2
                    ? whiteSquare
                    : blackSquare
                );
            if (i % this.length == 0) document.getElementById('board').appendChild(br);
        }
    }
}

class Piece {
    constructor (type, color, place) {
        this.type = type;
        this.color = color;
        this.place = place;
    }
    render() {
        document.getElementById(`${this.place}`).classList.add(`${this.color}-${this.type}`);
    }
}

class Board {
    constructor() {
        this.grid = new Grid(8, 8);
        this.grid.render();
    }
    fenPos(str) {
        str.split('');
        let row = 0;
        let column = 0;
        for(let i = 0; i < str.length; i++) {
            let num = ((row * 8) + (column))
            console.log(num)
            switch (str[i]) {
                case '/':
                    row += 1;
                    column = -1;
                    break;
                case '1':
                    break;
                case '2':
                    column += 1;
                    break;
                case '3':
                    column += 2;
                    break;
                case '4':
                    column += 3
                    break;
                case '5':
                    column += 4;
                    break;
                case '6':
                    column += 5;
                    break;
                case '7':
                    column += 6;
                    break;
                case '8':
                    column += 7;
                    break;
                case 'k':
                    new Piece('king', 'black', num + 1).render();
                    break;
                case 'K':
                    new Piece('king', 'white', num + 1).render();
                    break;
                case 'q':
                    new Piece('queen', 'black', num + 1).render();
                    break;
                case 'Q':
                    new Piece('queen', 'white', num + 1).render();
                    break;
                case 'r':
                    new Piece('rook', 'black', num + 1).render();
                    break;
                case 'R':
                    new Piece('rook', 'white', num + 1).render();
                    break;
                case 'n':
                    new Piece('knight', 'black', num + 1).render();
                    break;
                case 'N':
                    new Piece('knight', 'white', num + 1).render();
                    break;
                case 'b':
                    new Piece('bishop', 'black', num + 1).render();
                    break;
                case 'B':
                    new Piece('bishop', 'white', num + 1).render();
                    break;
                case 'p':
                    new Piece('pawn', 'black', num + 1).render();
                    break;
                case 'P':
                    new Piece('pawn', 'white', num + 1).render();
                    break;
            }
            column += 1;
        }
    }
}

const startPosition = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR';


const board = new Board().fenPos(startPosition);

我应该把它放到一个全局作用域函数中，还是把它放在我拥有的某个类中？我还需要弄清楚玩家将如何选择要移动的棋子以及棋子的去向。

我不是要一个简单的解决方案来解决我的问题，我只需要一些关于我应该从这里去哪里的指示。

注意我不担心合法/非法的举动。我只关心玩家如何移动棋子。

TL;DR：我需要移动棋子，我不确定如何将我能想到的解决方案实现到代码中。