Javascript Can'；我不明白为什么对象会在代码中更改

我目前正在学习javascript，而且只是一个乞丐（第一个月，所以代码很不成熟）。我正试图纯粹在javascript上编写一些tic-tac-toe游戏，它应该是这样的，但我不明白为什么它不起作用

我有一个处理几乎所有逻辑的类游戏。游戏气体两个玩家，每个人也一个班

一个游戏完全按照它应该的方式进行

当我启动另一个游戏并重新加载棋盘鼠标悬停事件时，其行为非常奇怪。它应该将带有当前播放器符号的背景图像分配给li元素。当player1处于活动状态时，所有内容都应该处于活动状态，但当player2处于活动状态时，事件函数将触发两次，活动玩家值将发生变化。 我想不出来。第一个剧本很理想。我将非常感激任何帮助 （函数StartName和endgame只是设置了正确的html标记）

职业玩家{
构造函数（id、isTurn、css、img）{
this.id=id；
this.isTurn=isTurn；
this.css=css；
this.img=img；
}
检查状态（方框）{
设点=[]；设所有点=0；
for（设i=0；i{
if（e.target.className=='box'）{
/*if（document.querySelector（'a'）。innerText=='New
game'&&game.player.id=='player2'）{
console.log（game.player.img）；
} */
e、 target.style.backgroundImage=game.player.img；
}
})
框。addEventListener（'mouseout'，（e）=>{
if（e.target.className=='box'）{
//if（document.querySelector（'a'）.innerText！=“新游戏”）{
e、 target.style.backgroundImage='none'；
// }
}
}) 
Box.addEventListener（'单击'，（e）=>{
if（e.target.className=='box'）{
e、 target.removeAttribute（'style'）；
e、 target.className='box'+game.css；
让status=game.player.checkStatus（例如target.parentNode）；
如果（状态！=“游戏”）{
if（document.querySelector（'a'）.innerText=='newgame'）{
控制台日志（状态）；
}
结局（状态）；
游戏。转身='player1'；
}
否则{
game.shiftTurn（）；
game.updateLi（）；
}
//控制台日志（状态）；
}
})
})
});

您是否也可以发布HTML，也许是在一个实时片段中，以便重现您的问题？（需要使用）也许你在开始一个新游戏时注册了两次eventListener，试着第三次开始，看看该行为是否扩展到

鼠标上方的3个动作。如果是这样，请从开始游戏中删除
addEventListener
，或者在添加另一个之前检查是否有事件。
    class Player {
    constructor(id, isTurn, css, img) {
        this.id = id;
        this.isTurn = isTurn;
        this.css = css;
        this.img = img;
    }

    checkStatus(boxes){
        let point=[]; let allpoint=0;
        for (let i=0; i< boxes.children.length; i++){
            let li = boxes.children[i];
            if (li.className.includes(this.css)) {
                point.push(i);
            }
            if (li.className!='box'){
                allpoint++;
            }
        }
        for (let i=0; i<winCombo.length; i++) {
            let st = winCombo[i].every(val => point.includes(val));
            if (st === true) {
                return this.id;
            }
        }
        if (allpoint == 9) {
            return 'tie';
        }
        return 'game';
    }
    }

    class Game {
    constructor(players) {
        this.players = players;
    }
    get player() {
        for (let i=0; i< this.players.length; i++) {
            if (this.players[i].isTurn === true)
                return this.players[i];
        }
    }
    get css() {
        return this.player.css;
    }
    shiftTurn() {
        for (let i=0; i< this.players.length; i++) {
            this.players[i].isTurn = !this.players[i].isTurn;
        }
    }

    set turn(id) {
        for (let i=0; i< this.players.length; i++) {
            if (this.players[i].id === id) {
                this.players[i].isTurn = true;
            }
            else {
                this.players[i].isTurn = false;
            }
        }
    }

    updateLi() {
        const playersLi = document.querySelectorAll('.players');
        for (let i=0; i<playersLi.length; i++) {
            playersLi[i].className='players';
        }
        const li = document.querySelector(`#${this.player.id}`);
        li.className='players active';
    }
    }


       document.querySelector('a').addEventListener('click', () => {

        startGame(); 
        const boxes = document.querySelector('.boxes');
        const game = new Game([new Player('player1', true, 'box-filled-1', 
        `url(../img/o.svg)`), new Player('player2', false, 'box-filled-2', 
        `url(../img/x.svg)`)]); 

        game.updateLi();     


        boxes.addEventListener('mouseover', (e) => {
            if (e.target.className=='box') {
           /*  if (document.querySelector('a').innerText=='New 
                  game'&&game.player.id=='player2'){
                    console.log(game.player.img);
                } */
                    e.target.style.backgroundImage=game.player.img;
            }
        })

        boxes.addEventListener('mouseout', (e) => {
            if (e.target.className=='box') {
               // if (document.querySelector('a').innerText!='New game'){
                   e.target.style.backgroundImage='none';
               // }
            }
        }) 

        boxes.addEventListener('click', (e) => {
            if (e.target.className=='box') {
                e.target.removeAttribute('style');
                e.target.className='box '+game.css;  
                let status = game.player.checkStatus(e.target.parentNode);

                if (status != 'game') {
                    if (document.querySelector('a').innerText=='New game'){
                        console.log(status);
                    }
                    endGame(status);
                    game.turn='player1';
                }
                else {
                    game.shiftTurn();
                    game.updateLi();
                }

              //  console.log(status);
            }
        })
         })
         });