游戏无法检查条件并在后台启动
Game fails to check condition and starts in the background
功能:
用户将从 "Instruction" 页面(第 1 页)导航到 "Game" 页面(第 2 页)并玩设计的游戏。 "Instruction" 页面有一个用户说明列表和一个开始按钮,单击该按钮会将用户导航到 "Game" 页面。 "Game" 页面有一个淡入倒计时计数器,目的是通知用户游戏将在 x 秒后开始,之后游戏将开始。
因此,淡入倒计时只会在用户进入 "Game" 页面时开始,在游戏开始之前。
问题:
淡入计数器甚至在用户导航到 "Game" 页面之前就开始了。因此,当用户仍在第 1 页:"Introduction Page" 时,第 2 页:"Game" 页面的淡入计数器将开始变为 运行。
本来应该是什么:
上述问题应该不会发生,只有当用户从第一页导航到第二页时,第二页的淡入计数器才应该开始倒计时。
已完成:
我把每一页都设置为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>
您定义的地方 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();
.....
功能:
用户将从 "Instruction" 页面(第 1 页)导航到 "Game" 页面(第 2 页)并玩设计的游戏。 "Instruction" 页面有一个用户说明列表和一个开始按钮,单击该按钮会将用户导航到 "Game" 页面。 "Game" 页面有一个淡入倒计时计数器,目的是通知用户游戏将在 x 秒后开始,之后游戏将开始。 因此,淡入倒计时只会在用户进入 "Game" 页面时开始,在游戏开始之前。
问题:
淡入计数器甚至在用户导航到 "Game" 页面之前就开始了。因此,当用户仍在第 1 页:"Introduction Page" 时,第 2 页:"Game" 页面的淡入计数器将开始变为 运行。
本来应该是什么:
上述问题应该不会发生,只有当用户从第一页导航到第二页时,第二页的淡入计数器才应该开始倒计时。
已完成:
我把每一页都设置为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>
您定义的地方 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();
.....