如何更改或添加用JavaScript创建的元素的类？ 吃豆子变主题鬼

如何解决如何更改或添加用JavaScript创建的元素的类？ 吃豆子变主题鬼

我正在为学校开发一个简单的吃豆人游戏。 （HTML，CSS，Vanilla JavaScript），我希望能够更改游戏的主题（从空间到花卉主题）。更改背景已经可以了，但是现在我希望当您从主题切换时，鬼影也能重新显示。

我从html中的简单网格开始，并在Javascript中添加了所有功能。鬼是在数组中制成的。

SELECT column_name,generation_expression
FROM informatION_SCHEMA.COLUMNS
WHERE TABLE_NAME = 'salaries'

要更改主题，您必须单击一个按钮，因为我具有这些功能；

<div class="grid"></div>

const grid = document.querySelector('.grid');

class Ghost {
    constructor(className,startIndex,speed) {
        this.className = className
        this.startIndex = startIndex
        this.speed = speed
        this.currentIndex = startIndex
        this.timerId = NaN
    }
}

const ghosts = [
    new Ghost('alien1',212,650),new Ghost('alien2',700),new Ghost('alien3',830),new Ghost('alien4',900)
];

 const moveGhost = ghost => {
    const directions = [-1,+1,width,-width]
    let direction = directions[Math.floor(Math.random() * directions.length)]

    ghost.timerId = setInterval(function () {
        //Check if the next Box does not contains 'wall' or another ghost
        if (!squares[ghost.currentIndex + direction].classList.contains('wall') && !squares[ghost.currentIndex + direction].classList.contains('ghost')) {
            //If it does not contains one of these to,the ghost can move here
            //Delete all related ghost classes
            squares[ghost.currentIndex].classList.remove(ghost.className,'ghost','scared-alien','flower')

            //Change the currentIndex to the next Box
            ghost.currentIndex += direction

            //Draw the ghost in the nex/new Box
            squares[ghost.currentIndex].classList.add(ghost.className,'ghost')

            //If it contains 'ghost' or 'wall' move into another direction
        } else direction = directions[Math.floor(Math.random() * directions.length)]


        //If ghost is scared
        if (ghost.isScared) {
            squares[ghost.currentIndex].classList.add('scared-alien')
        }

        //If ghost is scared and bumps into
        if (ghost.isScared && squares[ghost.currentIndex].classList.contains('pac-man')) {
            squares[ghost.currentIndex].classList.remove(ghost.className,'scared-alien')
            ghost.currentIndex = ghost.startIndex
            score += 100
            squares[ghost.currentIndex].classList.add(ghost.className,'ghost')
        }
        checkForGameOver()
    },ghost.speed)
} 

单击按钮时，如何添加Ghost的className或更改Ghost的className（alien.1，alien2，...更改为flowre1，flower2，...）？因此，我可以添加另一个css样式来更改幻影在网格上的外观。