Spiel nicht

Question

Funktionalität Zustand und beginnt im Hintergrund zu überprüfen:

Des Benutzer wird von der „Befehl“ Seite (erste Seite) zu der „Game“ Seite (2. Seite) navigieren und das Spiel spielen entworfen. Die Seite "Anweisungen" enthält eine Liste mit Anweisungen für Benutzer und eine Startschaltfläche, die beim Klicken auf die Seite "Spiel" navigiert. "Spiel" Seite hat einen Einblend-Countdown-Zähler, Zweck ist, Benutzer zu benachrichtigen, dass das Spiel in x Sekunden startet, nach dem das Spiel beginnt. Der Countdown-Zähler für die Einblendung beginnt also erst, wenn sich die Nutzer vor Spielbeginn auf der "Spiel" -Seite befinden.

Probleme:

Der Fade-in-Schalter beginnt, noch bevor Benutzer auf das "Spiel" Seite navigiert werden. Wenn sich die Benutzer noch auf der ersten Seite befinden: "Einführungsseite", wird der Einblendzähler auf der zweiten Seite: "Spiel" -Seite gestartet.

Was soll es gewesen sein:

Die obige Problem angegeben sollte nicht der Fall sein, die Fade-in-Schalter in der zweiten Seite nur Countdown starten sollte nur, wenn der Benutzer von der ersten Seite zu der navigiert 2. Seite.

Was getan wurde:

ich jede Seite festgelegt haben als z-index damit die erste Seite als z-index=1 eingestellt wird, während die zweite Seite als z-index=2 gesetzt, außerdem habe ich die zweite Seite auf be display:none, daher wird die 2. Seite nur beim Aufruf angezeigt.

Darüber hinaus habe ich eine globale boolesche Variable var booleanplay== true deklarieren, und innerhalb meiner <script>, habe ich die bedingte Überprüfung auf die Spiel() -Funktion aufrufen aufgerufen. Zu Recht hätte es die Bedingung überprüfen müssen, bevor es die Methode ausführt.

Ich habe den Code für Ihre Durchsicht ... bitte helfen. Ich bin total am Ende.

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

wo Sie interval sind definiert, startet den Timer. Sie müssen also die Zuweisung des Timers interval zu der Methode verschieben, die die Umrechnung der Seitentiefe auslöst (d. H. page2()). Wenn Sie also die Seiten wechseln, wird der Timer gestartet.

Update:

Die Linie:

initialisiert die Variable interval und weist ihm den setInterval Timer. Dies startet den Timer, weshalb der Countdown des Spiels beginnt, sobald die Seite geladen wird.

Ich würde es sein, ändern:

var interval; 

und dann die setInterval Zuordnung bewegen in die page2() Funktion

function page2(){ 

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