javascript - JavaScript 中的随机数学游戏

Question

我正在尝试用 JS 做一个数学游戏，如下所示：

简单级别：此级别包含 5 个问题，包含三个数字，例如 1 + 2；每题计算2分。如果学生得了 7 分，他会通过动人的动画和成功的音乐向他表示祝贺，如果他没有得到及格分数，则会听到失落的声音。

我想展示他从正确答案中得到的分数。

像这个示例输出：你输了，得到了 0/5，类似的东西。

我已经这样做了，但没有得到我想要的输出，我认为 if 语句中有错误。

这是我的 HTML 代码

    <section>
        <h1>Math Addition Quiz Game</h1>
        <div class="centerdiv">
            <div class="insertBox">
                <div class="box1">
                    <p id="v1"> </p>
                    <p class="text-center justify-content-center" id="final"></p>
                    <p class="text-center justify-content-center" id="final1"></p>

                </div>
                <div class="box1">
                    <p id="operator">+</p>
                </div>
                <div class="box1">
                    <p type="text" id="v2"></p>
                </div>
            </div>
            <div class="middleBox">
                <input type="text" id="answ">
            </div>
            <div class="sentBox">
                <button onclick="jsGame()" class="mb-3" id="submit"> Check Answer</button> <br>
                <button onclick="Restart()" class="mb-3"id="restart" > Restart </button> 
                <button onclick="Main()" id="Main"> Back To Main Menu</button>
            </div>
        </div>
    </section>

这是 Java 脚本代码

        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;
        var count = 0;
        var wrong = 0;
        var score = 0;
        document.getElementById('v1').value = n1;
        document.getElementById('v2').value = n2;
        document.getElementById('restart').style.visibility = "hidden";
        document.getElementById('Main').style.visibility = "hidden";
        let ans = n1 + n2;
        const jsGame = () => {
            var usera = document.getElementById('answ').value;
            if (usera == ans) {
                audio.play();
                wrong = 0; //wrong answers
                score++;
                count++; //correct answers
                GenerateRandom();
            }
            else {    
                //sad.play();
                wrong = wrong+1;
                document.getElementById('answ').value = " ";
                alert(`Correct Answer is ${ans} Try Again. `);
            }

            if (score == 5) {
                level.play();
                Visible();
                var s = 10 - wrong;
                if (s >= 5) {
                level.play();
                    document.getElementById("final").innerHTML = `you win and got ${s}/10`
                    document.getElementsById('submit').style.visibility = "hidden";
                    document.getElementById('operator').style.visibility = "hidden";
                }else{
                    sad.play();
                    document.getElementById('answ').value = " ";
                    document.getElementById("final").innerHTML = `you lose and got ${wrong}/10`

                }
            }  
        
        };

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

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

        var audio = new Audio('../Congratulations-sound.mp3');
        var sad = new Audio('../sad.wav');
        var level = new Audio('../level.wav')


    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";

    }

我希望你能帮助我，任何修改或更好地添加代码请帮助我。谢谢你。

这是我所做的演示。

github中的demo

所有代码的 Github 中的 repo

标签： javascriptfunctiondom