Game fails to check condition and starts in the background

Question

Functionality:

User will navigate from the "Instruction" Page (1st Page) to the "Game" Page (2nd Page) and play the game designed. "Instruction" Page has a list of instructions for users and a start button that when clicked will navigate users to the "Game" page. "Game" Page has got a fade-in countdown counter, purpose is to notify users that game will start in x seconds, after which game will start. Hence, fade-in countdown counter will only start when users are in the "Game" page, before the commencement of the game.

Issues:

The fade-in counter starts even before users are navigated to the "Game" page. Therefore, when users are still in the 1st page: "Introduction Page", the fade-in counter in the 2nd page: "Game" page will start to run.

What it should have been:

The above issue stated shouldn't be happening, the fade-in counter in the 2nd page should only start countdown only when user has navigated from the 1st page to the 2nd page.

What has been done:

I have set each page as z-index, hence, the 1st page is set as z-index=1 while the 2nd page is set as z-index=2, furthermore, I have set the 2nd page to be display:none, hence the 2nd page will only be displayed when called.

Furthermore, I have declare a global boolean variable var booleanplay== true, and within my <script>, I have set the conditional check to call on the game() functionality. Hence, rightfully, it should have checked on the condition before it runs the method.

I have attached the code for your perusal..please help. I am totally at wits end.

Code:

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

where you're defining interval is starting the timer. So you'll need to move the assignment of the interval timer, to whatever method triggers your page depth reshuffle (i.e. page2() method). So that when you switch pages it starts the timer.

Update:

The line:

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

initialises the variable interval and assigns it the setInterval timer. This starts the timer, hence why the game countdown begins as soon as the page loads.

I would change it to be:

var interval;

and then move the setInterval assignment into the page2() function

function page2(){

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