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>
