Tic-Tac-Toe游戏音乐播放/暂停按钮失效问题求助

问题描述 #

我是计算机科学与工程专业大一学生，刚接触JavaScript。在开发Tic-Tac-Toe游戏项目时，遇到音乐播放/暂停按钮无法正常工作的问题：点击按钮无法实现音乐播放与暂停的切换。

问题原因分析 #

代码存在两个核心错误：

1. 元素获取方式错误：document.getElementsByClassName('play')返回的是HTMLCollection元素集合，而非单个DOM元素，无法直接绑定点击事件。
2. Font Awesome类名不匹配：HTML中使用的是fa-circle-play/fa-circle-pause类名，但JS逻辑里操作的是fa-play-circle/fa-pause-circle，类名不一致导致图标切换失效。

修复方案 #

修改JavaScript中音乐按钮的处理逻辑，修正元素获取方式和类名：

修复后的完整JavaScript代码 #

console.log(" Tic Tac Toe");
let music = new Audio("/tic tac toe/tic tac toe/music.mp3");
let audioTurn = new Audio("/tic tac toe/tic tac toe/ting.mp3");
let gameover = new Audio("/tic tac toe/tic tac toe/gameover.mp3");
let turn = "X";
let isgameover = false;
// 改用querySelector获取单个播放按钮元素
let button = document.querySelector('.play');


// 切换玩家回合
const changeTurn = ()=>{
    return turn === "X"? "0": "X";
}

// 检查获胜条件
const checkWin = ()=>{
    let boxtext = document.getElementsByClassName('boxtext');
    let wins = [
        [0, 1, 2, 5, 5, 0],
        [3, 4, 5, 5, 15, 0],
        [6, 7, 8, 5, 25, 0],
        [0, 3, 6, -5, 15, 90],
        [1, 4, 7, 5, 15, 90],
        [2, 5, 8, 15, 15, 90],
        [0, 4, 8, 5, 15, 45],
        [2, 4, 6, 5, 15, 135],
    ]
    wins.forEach(e =>{
        if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
            document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
            isgameover = true
            document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
            document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`
            document.querySelector(".line").style.width = "20vw";
        }
    })
}

// 游戏核心逻辑
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element =>{
    let boxtext = element.querySelector('.boxtext');
    element.addEventListener('click', ()=>{
        if(boxtext.innerText === ''){
            boxtext.innerText = turn;
            turn = changeTurn();
            audioTurn.play();
            checkWin();
            if (!isgameover){
                document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
            } 
        }
    })
})

// 重置按钮逻辑
reset.addEventListener('click' , ()=>{
    let boxtexts = document.querySelectorAll('.boxtext');
    Array.from(boxtexts).forEach(element => {
        element.innerText = ""
    });
    turn = "X";
    isgameover = false
    document.querySelector(".line").style.width = "0";
    document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
    document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"
    }
)

// 修复后的音乐播放/暂停逻辑
button.addEventListener('click', ()=>{
    if(music.paused){
        music.play();
        button.classList.remove("fa-circle-play");
        button.classList.add("fa-circle-pause");
    }
    else{
        music.pause();
        button.classList.add("fa-circle-play");
        button.classList.remove("fa-circle-pause"); 
    }
});

关键修改点 #

1. 将let button = document.getElementsByClassName('play');替换为let button = document.querySelector('.play');，确保获取到单个可操作的DOM元素。
2. 将JS中操作的Font Awesome类名从fa-play-circle/fa-pause-circle改为fa-circle-play/fa-circle-pause，与HTML中的类名保持一致。

内容的提问来源于stack exchange，提问作者Jaydeep Deshpande