HTML节奏游戏中loadSong触发后if语句未执行问题求助

核心问题分析 #

你代码里的目标if语句是在页面脚本加载时仅执行一次，此时songStarted初始值为false，所以不会进入分支。哪怕点击begin按钮调用loadSong()将songStarted设为true，这个if语句也不会重新运行——它只是单次执行的判断，而非持续运行的逻辑。

具体修复步骤及完整代码 #

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FontDash: The Game</title>
</head>
<body>
    <style>
        button {
            margin: 0;
            padding: 0;
            display:inline;
            line-height: 0;
        }
    </style>
    <!-- 修复重复ID问题，将暂停按钮ID改为pauseBtn -->
    <button onclick="loadSong()" class="NOU" id="begin">begin</button>
    <button onclick="songPause()" class="NOU" id="pauseBtn">||</button>
    <script type="text/javascript">
        let clickCount = 0
        var audio = new Audio('Supernova.mp3');
        var songTimer = 0
        let songNotPaused = false
        let songNotFinished = true
        var songStarted = false
        var duration = 0;
        // 新增变量存储定时器实例
        let timerInterval = null;

        // 监听音频元数据加载事件，确保正确获取时长
        audio.addEventListener('loadedmetadata', function() {
            duration = Math.round(audio.duration);
        });

        function loadSong() {
            // 再次确认时长（防止元数据未加载完成）
            if (!duration) {
                duration = Math.round(audio.duration);
            }
            console.log(duration)
            document.getElementById("begin").disabled = true;
            songNotFinished = true
            songNotPaused = true
            songStarted = true
            audio.play();
            document.body.style.backgroundColor = "#ba6dc9";
            
            // 启动定时器，每秒递增songTimer
            timerInterval = setInterval(function() {
                if (songTimer < duration && songStarted && songNotPaused) {
                    songTimer++;
                    console.log(songTimer);
                }
            }, 1000);
        }

        function songPause() {
            if (songNotPaused && songStarted) {
                audio.pause();
                songNotPaused = false;
                // 暂停定时器
                clearInterval(timerInterval);
            } else if (songStarted && !songNotPaused) {
                audio.play();
                songNotPaused = true;
                // 恢复定时器
                timerInterval = setInterval(function() {
                    if (songTimer < duration && songStarted && songNotPaused) {
                        songTimer++;
                        console.log(songTimer);
                    }
                }, 1000);
            }
        }

        // 监听音频结束事件，更新状态并清除定时器
        audio.addEventListener('ended', function() {
            songNotFinished = false;
            songNotPaused = false;
            clearInterval(timerInterval);
            console.log("音乐播放结束");
        });

        function clickMax() {
            clickCount += 1
            console.log(clickCount)
            console.log(songTimer)
        }
        document.onclick = function(event) {
            // 排除按钮点击，避免重复触发clickMax
            if (event.target.tagName !== "BUTTON" && songNotPaused && songNotFinished && songStarted) {
                clickMax();
                console.log('clicked!');
            };
        }
    </script>
</body>
</html>

额外优化说明 #

• 新增了loadedmetadata事件监听，确保音频时长能正确获取，避免初始状态下duration为NaN的问题
• 修复了重复ID导致的按钮功能异常
• 给点击事件增加了排除按钮的判断，防止点击begin/pause按钮时触发clickMax
• 在音乐结束时自动清除定时器并更新状态，避免无效的计时逻辑

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