ゲームは状態を確認するために失敗し、バックグラウンドで起動し

Question

機能：

ユーザーは「ゲーム」のページ（2ページ目）に「命令」のページ（1ページ目）から移動して、ゲームをプレイします設計。 「指示」ページにはユーザーのための指示のリストと、クリックされるとユーザーを「ゲーム」ページに移動するスタートボタンがあります。 "ゲーム"ページにはフェードインのカウントダウンカウンタがあります。その目的は、ゲームが開始されるx秒後にゲームが開始されることをユーザーに通知することです。 したがって、フェードインカウントダウンカウンターは、ユーザーがゲームの開始前に「ゲーム」ページに入ったときにのみ開始されます。

問題：

フェードインカウンターは、ユーザーが「ゲーム」ページにナビゲートされる前であっても起動します。したがって、ユーザーが第1ページ「イントロダクションページ」にまだいるときは、第2ページの「ゲーム」ページのフェードインカウンターが起動します。

それは何されている必要があります：ユーザが第一のページからナビゲートしたときにのみ

述べた上で、問題が起きてはならない、フェードインカウンタ2ページ目では唯一のカウントダウンを開始する必要がありますが2ページ目。 2ページ目がz-index=2として設定されている間、したがって、第一ページがz-index=1として設定され、さらに、私が2ページ目に設定している

を私はz-indexとして各ページを設定している、：どのように行われてい

display:noneであるため、2番目のページは呼び出されたときにのみ表示されます。

さらに、グローバルブール変数var booleanplay== trueを宣言しました。私は<script>の中で、game（）機能を呼び出すように条件付きチェックを設定しました。したがって、正当な方法として、メソッドを実行する前に条件をチェックしておく必要があります。

私はあなたの閲覧用コードを添付しています。私は完全に知恵の終わりです。

コード：あなたはintervalを定義している

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タイマーの割り当てを、ページ深度の再シャッフルをトリガーする方法（例：page2()メソッド）に変更する必要があります。そのため、ページを切り替えるとタイマーが開始されます。

更新：

行：変数を初期化interval

、それにのsetIntervalタイマーを割り当てます。これはタイマーを開始し、なぜページが読み込まれるとすぐにゲームのカウントダウンが始まるのですか？

私がするそれを変更します：あなたは、 `VAR間隔=のsetInterval（関数（）{updateTimerを（

var interval; 

、その後page2()機能

function page2(){ 

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