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

功能：

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

问题：

甚至在用户被导航到“游戏”页面之前，淡入计数器就会启动。因此，当用户仍在第一页：“简介页”时，第二页“游戏”页中的淡入计数器将开始运行

应该是什么：

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

已完成的操作：

我将每页设置为

z-index

，因此，第一页设置为

z-index=1

，而第二页设置为

z-index=2

，此外，我将第二页设置为

display:none

，因此第二页仅在调用时显示

此外，我声明了一个全局布尔变量

var booleanplay==true

，并且在

中，我设置了条件检查以调用game（）功能。因此，它应该在运行方法之前检查条件

我已附上代码供您阅读..请帮助。我完全不知所措

代码：

函数第2页（）{
var BooleanPlay=true；
$（“#第1页”）.hide（）；
$（“#第2页”）.show（）；
//要检查游戏是否正在进行，将调用MainGame方法，否则将不会启动MainGame并将计数器和速度重置为原始值
如果（布尔播放==真）{
控制台日志（“游戏重置”）；
rollingInterval=setInterval（updateTimer，20000）；
清除间隔（滚动间隔）；
}
}
var计数=5；
//淡入倒计时计数器功能
函数updateTimer（）{
如果（计数>0）{
$（“#内容”）.fadeOut（'slow'，function（）{
$（“#内容”）。文本（计数）；
$（“#内容”）.fadeIn（）；
计数--；
});
}否则如果（计数==0）{
$（“#内容”）.fadeOut（'slow'，function（）{
$（“#内容”）.text（“开始！！”；
$（“#内容”）.fadeIn（）；
计数--；
//在淡入计数器之后，将调用mainGame（）函数
主要游戏（）；
console.log（“MainGame（）”）；
});
}否则{
$（“#内容”）.fadeOut（）；
间隔时间；
}
}
var interval=setInterval（函数（）{
updateTimer（）
}, 2000)
函数main game（）{
var numospin=0，
距离覆盖=0，
计数器=0，
定时器=10；
$（“#scrollerDiv”）。滚动（函数（）{
变量高度=$（“#scrollerDiv”）.scrollTop（）；
对于（变量i=0；i<250；i++）{
如果（高度>i*10）{
如果（i>=0&&i<10）{
$（“#roller”）.attr（“src”、“Image/Rolling#pin/Rolling pin_0000”+i+”.png”）；
}
如果（i>=10&&i<100）{
$（“#roller”）.attr（“src”，“Image/Rolling#pin/Rolling pin_000”+i+”.png”）；
}
如果（i>=100&&i<1000）{
$（“#roller”）.attr（“src”，“Image/Rolling#pin/Rolling pin_00”+i+”.png”）；
$（#scrollerDiv”）.scrollTop（0）；
numospin++；
覆盖距离+=0.59；
控制台日志（距离覆盖）；
console.log（numospin）；
}
}
}
})
rollingInterval=setInterval（函数（）{
console.log（“rollingInterval”）；
计数器=计数器+1；
定时器=定时器-1；
速度=覆盖距离/计数器；
speed2dec=固定速度（2）；
//document.getElementById（“speedSpan”）.innerHTML=speed2dec+“
”+“ms”；
$（“#speedSpan'）.html（speed2dec+”
ms'）；
//document.getElementById（“timeSpan”）.innerHTML=timer+“s”
$（'#timeSpan'）.html（timer+'s'）；
如果（计数器==10和速度>20）{
控制台日志（“计数”）；
清除间隔（滚动间隔）；
$（“#第2页”）.hide（）；
$（“#第3页”）.show（）；
}否则如果（计数器==10和速度<20）{
numospin=0；
距离覆盖=0；
计数器=0；
定时器=10；
$（“#第2页”）.hide（）；
$（“#GameOver”）.show（）；
//清除间隔（滚动间隔）；
}
}, 1000)
}

#第1页{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
#第2页{
排名：0；
左：0；
z指数：2；
}
#卷轴{
位置：固定；
顶部：1150px；
左：200px；
背景色：透明；
高度：650px；
宽度：750px；
溢出：自动；
z指数：2；
}

0.00

ms
10秒

定义间隔的地方是启动计时器。因此，您需要将

间隔

计时器的赋值移动到触发页面深度重新洗牌的任何方法（即

page2（）

方法）。因此，当你切换页面时，它会启动计时器

更新：

该行：

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

在

var interval;

function page2(){

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