游戏无法检查条件并在后台启动

Question

功能：

用户将从“说明”页面（第 1 页）导航到“游戏”页面（第 2 页）并玩设计的游戏。 “说明”页面有一个用户说明列表和一个开始按钮，单击该按钮将引导用户到“游戏”页面。 “游戏”页面有一个淡入倒计时，目的是通知用户游戏将在x秒后开始，之后游戏将开始。 因此，淡入倒计时只会在用户进入“游戏”页面时，在游戏开始前开始。

问题：

淡入计数器甚至在用户导航到“游戏”页面之前就开始了。因此，当用户还在第 1 页：“介绍页”时，第 2 页：“游戏”页中的淡入计数器将开始运行。

应该是什么：

上述问题不应该发生，只有当用户从第一页导航到第二页时，第二页中的淡入计数器才应该开始倒计时。

做了什么：

我将每一页设置为z-index，因此第一页设置为z-index=1，而第二页设置为z-index=2，此外，我将第二页设置为display:none，因此只有调用时才会显示第二页。

此外，我已经声明了一个全局布尔变量var booleanplay== true，并且在我的<script> 中，我设置了条件检查以调用game() 功能。因此，理所当然地，它应该在运行该方法之前检查条件。

我已附上代码供您阅读。请帮忙。我完全束手无策。

代码：

function Page2() {
    var BooleanPlay = true;

    $("#page1").hide();
    $("#page2").show();
    //To check if the game is being played, will call MainGame method, else wouldnt start MaiinGame and reset counter and speedto original value
    if (BooleanPlay == true) {
        console.log("Game Reset");
        rollingInterval = setInterval(updateTimer, 20000);
        clearInterval(rollingInterval);
    }

}


var count = 5;

//Fade-in Countdown counter function
function updateTimer() {
    if (count > 0) {
        $("#content").fadeOut('slow', function () {
            $("#content").text(count);
            $("#content").fadeIn();
            count--;
        });
    } else if (count == 0) {
        $("#content").fadeOut('slow', function () {
            $("#content").text("Start!!");
            $("#content").fadeIn();
            count--;
            // after the fade-in counter, will call the mainGame() function
            MainGame();
            console.log("MainGame()");
        });
    } else {
        $("#content").fadeOut();
        clearInterval(interval);
    }
}
var interval = setInterval(function () {
    updateTimer()
}, 2000)

    function MainGame() {
        var numOfSpin = 0,
            distanceCovered = 0,
            counter = 0,
            timer = 10;

        $("#scrollerDiv").scroll(function () {
            var height = $("#scrollerDiv").scrollTop();
            for (var i = 0; i < 250; i++) {
                if (height > i * 10) {
                    if (i >= 0 && i < 10) {
                        $("#roller").attr("src", "Image/Rolling_pin/rolling pin_0000" + i + ".png");
                    }
                    if (i >= 10 && i < 100) {
                        $("#roller").attr("src", "Image/Rolling_pin/rolling pin_000" + i + ".png");
                    }
                    if (i >= 100 && i < 1000) {
                        $("#roller").attr("src", "Image/Rolling_pin/rolling pin_00" + i + ".png");
                        $("#scrollerDiv").scrollTop(0);
                        numOfSpin++;
                        distanceCovered += 0.59;
                        console.log(distanceCovered);
                        console.log(numOfSpin);
                    }
                }
            }
        })

        rollingInterval = setInterval(function () {
            console.log("rollingInterval");
            counter = counter + 1;
            timer = timer - 1;
            speed = distanceCovered / counter;
            speed2dec = speed.toFixed(2);
            //document.getElementById("speedSpan").innerHTML = speed2dec + "<br/>"+"ms";
            $('#speedSpan').html(speed2dec + '<br>ms');
            //document.getElementById("timeSpan").innerHTML = timer + "s"
            $('#timeSpan').html(timer + ' s');

            if (counter == 10 && speed > 20) {
                console.log("Count");
                clearInterval(rollingInterval);
                $("#page2").hide();
                $("#page3").show();
            } else if (counter == 10 && speed < 20) {
                numOfSpin = 0;
                distanceCovered = 0;
                counter = 0;
                timer = 10;
                $("#page2").hide();
                $("#GameOver").show();
                //clearInterval(rollingInterval);
            }
        }, 1000)
    }

#page1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#page2 {
    top: 0;
    left: 0;
    z-index: 2;
}
#scrollerDiv {
    position: fixed;
    top: 1150px;
    left: 200px;
    background-color: transparent;
    height: 650px;
    width: 750px;
    overflow: auto;
    z-index: 2;
}

<div id="page1" align="center" style="background-image: url(Image/Page1.png); width:100%; height:100%;">
    <input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="Point" src="Image/Click_to_start_button.png" onclick="Page2()" />
</div>
<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">
    <div id='content'></div>
    <canvas id="canvas" width="300" height="300"></canvas>
    <canvas id="Counter" width="300" height="300"></canvas>
    <p id="speedSpan">0.00
        <br>ms</p>
    <p id="timeSpan">10 s</p>
    <img id="roller" style="position: absolute; top:470px; left: 0px; width: 100%" src="Image/Rolling_pin/rolling%20pin_00000.png" />
    <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="Image/Scroll.png">
    <div id="scrollerDiv">
        <p id="invisibleElement"></p>
    </div>
</div>

Answer 1

您定义interval 的位置正在启动计时器。因此，您需要将interval 计时器的分配移动到触发页面深度重新洗牌的任何方法（即page2() 方法）。这样当您切换页面时，它就会启动计时器。

更新：

行：

var interval = setInterval(function() {
  updateTimer()
}, 2000)

初始化变量interval 并为其分配setInterval 计时器。这会启动计时器，因此为什么会在页面加载后立即开始游戏倒计时。

我会把它改成：

var interval;

然后将 setInterval 赋值移动到page2() 函数中

function page2(){

    interval = var interval = setInterval(function() {
        updateTimer()
    }, 2000);
    $("#page1").hide();
    $("#page2").show();
    .....