JavaScript随机数学加法小游戏开发bug排查与优化求助

问题排查与修改方案 #

已知问题列表 #

• 核心逻辑错误：答对题目时执行了wrong = 0，会清空之前所有错误次数统计，最终得分计算完全错误
• 流程不符合规则：当前逻辑是累计答对5题才结束游戏，而需求是固定共5道题，不管对错答完即结束
• 代码笔误：document.getElementsById('submit')多了字符s，正确方法为getElementById，此处会触发JS报错导致按钮隐藏逻辑失效
• 得分逻辑不符合需求：需求要求每题2分、≥7分获胜，输出格式示例为you lose and got 0/5，原有计算逻辑10 - wrong不符合该规则
• 冗余代码：给p标签（#v1、#v2）设置value属性无意义，p标签不存在原生value属性
• 音效重复播放：获胜逻辑中level.play()重复调用两次

调整后的JavaScript代码 #

// 初始化变量
let n1 = Math.floor(Math.random()*10+1)
let n2 = Math.floor(Math.random() * 10 + 1)
document.getElementById('v1').innerHTML = n1;
document.getElementById('v2').innerHTML = n2;
let questionCount = 0; // 已答题数，初始0
let correctCount = 0; // 答对题数
document.getElementById('restart').style.visibility = "hidden";
document.getElementById('Main').style.visibility = "hidden";
let ans = n1 + n2;

// 音效实例
const audio = new Audio('../Congratulations-sound.mp3');
const sad = new Audio('../sad.wav');
const level = new Audio('../level.wav')

const jsGame = () => {
    const usera = document.getElementById('answ').value.trim();
    // 空值判断避免无效提交
    if(usera === '') {
        alert('请输入答案');
        return;
    }
    questionCount++; // 每提交一次计数+1

    if (usera == ans) {
        audio.play();
        correctCount++;
    } else {    
        sad.play();
        alert(`Correct Answer is ${ans} Try Again. `);
    }
    document.getElementById('answ').value = "";

    // 答完5题结束游戏
    if (questionCount == 5) {
        level.play();
        Visible();
        const totalScore = correctCount * 2; // 每题2分计算总分
        if (totalScore >= 7) {
            // 可按需求调整输出格式，示例为符合要求的x/5格式
            document.getElementById("final").innerHTML = `you win and got ${correctCount}/5`
        }else{
            document.getElementById("final").innerHTML = `you lose and got ${correctCount}/5`
        }
        return;
    }
    // 没答完5题就生成下一题
    GenerateRandom();
};

function GenerateRandom() {
    n1 = Math.floor(Math.random() * 10 + 1)
    n2 = Math.floor(Math.random() * 10 + 1)
    document.getElementById('v1').innerHTML = n1;
    document.getElementById('v2').innerHTML = n2;
    ans = n1 + n2;
}

function Restart() {
    window.location.reload();
}
function Main() {
    location.href="./game.html";
}

function Visible() {
    document.getElementById('v1').style.visibility = "hidden";
    document.getElementById('v2').style.visibility = "hidden";
    document.getElementById('answ').style.visibility = "hidden";
    document.getElementById('submit').style.visibility = "hidden";
    document.getElementById('operator').style.visibility = "hidden";
    document.getElementById('restart').style.visibility = "visible";
    document.getElementById('Main').style.visibility = "visible";
}

额外优化建议 #

• 增加输入限制：给答案输入框加type="number"限制只能输入数字，避免非数值提交
• 增加当前题数提示：比如页面显示第X题/共5题，方便用户了解进度
• 音效预加载：可以在页面加载完成后再初始化音效，避免部分浏览器播放失败

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