Question

我在使我的应用正常运行时遇到了一些麻烦。这是一个琐事应用程序，带有一个简单的倒数计时器。我的问题是当setInterval()运行时我想重置游戏（重新加载页面）时，它可以工作。但是，如果setInterval()被clearInterval()停止并且我的游戏结束元素显示，如果我按下Reset并希望调用location.reload()，则页面将自动再次启动计时器。这是我似乎找不到的某种循环问题，但也许您的专业人士可以在我的代码中发现该错误。

我试图以多种方式重构代码以隔离该错误，但我似乎找不到它。

// DOM ELEMENTS ========================================================

const startReset    = document.getElementById("startReset");
const scoreValue    = document.getElementById("score");
const timer         = document.getElementById("timer");
const timerValue    = document.getElementById("timerValue");
const gameOver      = document.getElementById("gameOver");
const correct       = document.getElementById("correct");
const wrong         = document.getElementById("correct");


// GLOBAL GAME VARIABLES ===============================================

let playing = false;
let score;
let action;
let timeRemaining;

// GAME OPERATIONS =====================================================

// Start/Reset Game
startReset.onclick = function() {
    // Reset Game
    if(playing === true) {

        // Reload page
        location.reload();

    } 
        // Start Playing
        else {
            // Change mode from not playing to playing
            playing = true;

            // Take Away Game Over Element
            gameOver.style.visibility = "hidden";

            // Change start button to reset button
            startReset.innerHTML = "Reset Game";

            // Put score back to 0
            score = 0;

            // Update HTML with score
            scoreValue.innerHTML = score;

            // Display timer
            timer.style.display = "block";
            timeRemaining = 60;

            // Start Countdown
            startCountdown();
        }
}

// Start Countdown Function
const startCountdown = () => {
    // Set timer
    action = setInterval(function(){
        // reduce time by 1 sec
        timeRemaining -= 1;
        // update html
        timerValue.innerHTML = timeRemaining;
        // check if time is out
        if(timeRemaining === 0) {
            stopCountdown();
            gameOver.style.visibility = "visible";
            timer.style.display = "none";
            correct.style.display = "none";
            wrong.style.display = "none";
            playing = false;
        }
    }, 100);
};

// Stop Countdown Function
const stopCountdown = () => {
    clearInterval(action);
};
=============================================================
    <body>
        <div id="logoContainer">
            <img src="./images/gotLogo.png">
            </div>

        <div id="container">

            <div id="scoreCounter">
                Score: <span id="score">0</span>
            </div>

            <div id="correct">Correct</div>

            <div id="wrong">Try Again</div>

            <div id="question">
                <p>Click Start to Begin!</p>
            </div>

            <div id="instruction">
                Click on the correct answer!
            </div>

            <div id="choices">

                <div id="choice1" class="choice"></div>
                <div id="choice2" class="choice"></div>
                <div id="choice3" class="choice"></div>
                <div id="choice4" class="choice"></div>

            </div>

            <div id="startReset">
                Start Game
            </div>

            <div id="timer">
                Time Remaining: <span id="timerValue">60</span> sec
            </div>

            <div id="gameOver">
                <p>GAME OVER!</p>
                <p>YOUR SCORE IS: <span id="finalScore">0</span></p>
            </div>
        </div>

    <script src="app.js" type="text/javascript"></script>
    </body>

</html>

我希望在Game Over出现后点击“重置游戏”以重新加载页面并强制单击新的以启动游戏，但是，它会重新加载页面并自动重启计时器。如果我在计时器运行时单击Reset Game，它将按预期运行。

Answer 1

找到答案。也许这会帮助别人。

在我的startCountdown（）函数中，在if语句中，我最初重置play = false，这使我在开始/重置游戏中声明的onclick函数的条件逻辑短路了。拿走它可以使游戏正常运行！

如何使用clearInterval（）和location.reload（）？

1 个答案: