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

Question

功能:

用户将从"指令"页面(第1页)导航到"游戏"页面(第2页)并播放设计的游戏."指令"页面包含用户指令列表和一个开始按钮,单击该按钮会将用户导航到"游戏"页面."Game"页面有一个淡入倒计时器,目的是通知用户游戏将在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();
    .....