无法删除事件监听器

Question

我正处于编写我的第一个 JavaScript 游戏跳棋的早期阶段。 在玩家移动之后，我试图通过循环包含他们的棋子的节点列表并在 forEach 回调函数中执行 removeEventListener 来从他们的所有棋子中删除事件侦听器。 这是与我用来添加事件侦听器的方法相同，所以我不明白为什么它不能用于删除它们。但是，我能够从当前作品中删除事件侦听器，这是棋盘上两个潜在的“移动到”方块。

我仍然缺少游戏中的许多功能，并且需要进行大量重构，因此请原谅这个凌乱的代码。现在，我有 x 和 0 作为游戏棋子，当你测试它时，“x”棋子先走。此外，板上的每个方块都有一个唯一的 ID 用于识别，例如。 1-3（第一个数字是行，第二个数字是列）。在浏览器中检查元素可能会最好地解释我如何设计电路板布局/正方形 ID。

const boardSpaces = [
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8],
    [1, 2, 3, 4, 5, 6, 7, 8]
]

// Generate Game Board
boardSpaces.forEach(function (row, rowIndex) {
    row.forEach(function (space) {
        spaceHTML = `<div class="space" id="${rowIndex + 1}-${space}"></div>`

        document.getElementById(`row${rowIndex + 1}`).insertAdjacentHTML('beforeend', spaceHTML);
        if (space % 2 === 0 && (rowIndex + 1) % 2 !== 0 || space % 2 !== 0 && (rowIndex + 1) % 2 === 0) {
            document.getElementById(`${rowIndex + 1}-${space}`).style.backgroundColor = 'red';
            document.getElementById(`${rowIndex + 1}-${space}`).classList.add('active');
        } else {
            document.getElementById(`${rowIndex + 1}-${space}`).classList.add('inactive');
        }

    })
})

// Identify all active spaces
const activeSpaces = document.querySelectorAll('.active');

// Identify all starter spaces
activeSpaces.forEach(function (space) {
    const idCopy = space.id.slice().split('');
    if (+idCopy[0] >= 6 || +idCopy[0] <= 3) space.classList.add('starter_space');
})
const starterSpaces = document.querySelectorAll('.starter_space');

// Separate starter spaces into Player 1 or Player 2 classification
starterSpaces.forEach(space => {
    const idCopy = space.id.slice().split('');
    if (+idCopy[0] >= 6) {
        space.classList.add('Player1');
        space.textContent = 'x';
    } else if (+idCopy[0] <= 3) {
        space.classList.add('Player2');
        space.textContent = '0';
    }
}
)

// Store Player pieces into variables
let player2Pieces = document.querySelectorAll('.Player2');
let player1Pieces = document.querySelectorAll('.Player1');

// Set the active player
let activePlayer = 'player1'



// Start game
const gamePlay = function () {


    if (activePlayer === 'player2') {
        player2Pieces = document.querySelectorAll('.Player2');

        player2Pieces.forEach(function (piece) {

            const player2GamePlay = function () {
                let potentialMove, potentialMove2;
                const idCopy = piece.id.slice().split('');
                const moveSpace = document.getElementById(`${+idCopy[0] + 1}-${+idCopy[2] - 1}`);
                const moveSpace2 = document.getElementById(`${+idCopy[0] + 1}-${+idCopy[2] + 1}`);
                if (moveSpace)
                    if (!moveSpace.classList.contains('Player2'))
                        potentialMove = moveSpace;

                if (moveSpace2)
                    if (!moveSpace2.classList.contains('Player2'))
                        potentialMove2 = moveSpace2;

                piece.style.border = '1px solid yellow';
                if (potentialMove)
                    potentialMove.style.backgroundColor = 'yellow';

                if (potentialMove2)
                    potentialMove2.style.backgroundColor = 'yellow';

                ///////////////////////////////////////////////////////////////////////////////////////
                const potentialListener = () => {
                    potentialMove.textContent = '0';
                    potentialMove.classList.add('Player2');
                    piece.textContent = '';
                    piece.style.border = '1px solid black';
                    piece.classList.remove('Player2');

                    potentialMove.style.backgroundColor = 'red';

                    if (potentialMove2)
                        potentialMove2.style.backgroundColor = 'red';


                    piece.removeEventListener('click', player2GamePlay)
                    potentialMove?.removeEventListener('click', potentialListener);
                    potentialMove2?.removeEventListener('click', potentialListener2);

                    player2Pieces = document.querySelectorAll('.Player2');
                    player2Pieces.forEach(function (playerPiece) { playerPiece.removeEventListener('click', player2GamePlay) })

                    activePlayer = 'player1'

                    gamePlay();

                }
                potentialMove?.addEventListener('click', potentialListener)
                ///////////////////////////////////////////////////////////////////////////////////////
                const potentialListener2 = () => {
                    potentialMove2.textContent = '0';
                    potentialMove2.classList.add('Player2');
                    piece.textContent = '';
                    piece.style.border = '1px solid black';
                    piece.classList.remove('Player2');

                    potentialMove2.style.backgroundColor = 'red';

                    if (potentialMove)
                        potentialMove.style.backgroundColor = 'red';

                    piece.removeEventListener('click', player2GamePlay)
                    potentialMove?.removeEventListener('click', potentialListener);
                    potentialMove2?.removeEventListener('click', potentialListener2);

                    player2Pieces = document.querySelectorAll('.Player2');
                    player2Pieces.forEach(function (playerPiece) { playerPiece.removeEventListener('click', player2GamePlay) })

                    activePlayer = 'player1';

                    gamePlay();
                }
                potentialMove2?.addEventListener('click', potentialListener2)
                ///////////////////////////////////////////////////////////////////////////////////////
            }

            piece.addEventListener('click', player2GamePlay)
        })


    } else {
        player1Pieces = document.querySelectorAll('.Player1');

        player1Pieces.forEach(function (piece) {

            const player1GamePlay = function () {
                let potentialMove, potentialMove2;
                const idCopy = piece.id.slice().split('');
                const moveSpace = document.getElementById(`${+idCopy[0] - 1}-${+idCopy[2] - 1}`);
                const moveSpace2 = document.getElementById(`${+idCopy[0] - 1}-${+idCopy[2] + 1}`);
                if (moveSpace)
                    if (!moveSpace.classList.contains('Player1'))
                        potentialMove = moveSpace;

                if (moveSpace2)
                    if (!moveSpace2.classList.contains('Player1'))
                        potentialMove2 = moveSpace2;

                piece.style.border = '1px solid yellow';
                if (potentialMove)
                    potentialMove.style.backgroundColor = 'yellow';

                if (potentialMove2)
                    potentialMove2.style.backgroundColor = 'yellow';

                ///////////////////////////////////////////////////////////////////////////////////////
                const potentialListener = () => {
                    potentialMove.textContent = 'x';
                    potentialMove.classList.add('Player1');
                    piece.textContent = '';
                    piece.style.border = '1px solid black';
                    piece.classList.remove('Player1');

                    potentialMove.style.backgroundColor = 'red';

                    if (potentialMove2)
                        potentialMove2.style.backgroundColor = 'red';


                    piece.removeEventListener('click', player1GamePlay)
                    potentialMove?.removeEventListener('click', potentialListener);
                    potentialMove2?.removeEventListener('click', potentialListener2);

                    player1Pieces = document.querySelectorAll('.Player1');
                    player1Pieces.forEach(function (playerPiece) { playerPiece.removeEventListener('click', player1GamePlay) })

                    activePlayer = 'player2'

                    gamePlay();

                }
                potentialMove?.addEventListener('click', potentialListener)
                ///////////////////////////////////////////////////////////////////////////////////////
                const potentialListener2 = () => {
                    potentialMove2.textContent = 'x';
                    potentialMove2.classList.add('Player1');
                    piece.textContent = '';
                    piece.style.border = '1px solid black';
                    piece.classList.remove('Player1');

                    potentialMove2.style.backgroundColor = 'red';

                    if (potentialMove)
                        potentialMove.style.backgroundColor = 'red';

                    piece.removeEventListener('click', player1GamePlay)
                    potentialMove?.removeEventListener('click', potentialListener);
                    potentialMove2?.removeEventListener('click', potentialListener2);

                    player1Pieces = document.querySelectorAll('.Player1');
                    player1Pieces.forEach(function (playerPiece) { playerPiece.removeEventListener('click', player1GamePlay) })

                    activePlayer = 'player2';

                    gamePlay();
                }
                potentialMove2?.addEventListener('click', potentialListener2)
                ///////////////////////////////////////////////////////////////////////////////////////
            }

            piece.addEventListener('click', player1GamePlay)
        })
    }
}




gamePlay();

.space {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    float: left;
}

.row {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
    <title>Checkers</title>
</head>

<body>
    <div id="board">
        <div id="row8" class="row"></div>
        <div id="row7" class="row"></div>
        <div id="row6" class="row"></div>
        <div id="row5" class="row"></div>
        <div id="row4" class="row"></div>
        <div id="row3" class="row"></div>
        <div id="row2" class="row"></div>
        <div id="row1" class="row"></div>
    </div>
    <script src="script.js"></script>
</body>

</html>