gioco non riesce a controllare lo stato e inizia in background

Question

Funzionalità:

utente navigherà dalla pagina "Istruzione" (1a pagina) per il "Gioco" Pagina (2 ° pagina) e giocare il gioco progettato. La pagina "Istruzioni" contiene un elenco di istruzioni per gli utenti e un pulsante di avvio che, una volta cliccato, indirizza gli utenti alla pagina "Gioco". La pagina "Gioco" ha un conto alla rovescia in dissolvenza, lo scopo è di notificare agli utenti che il gioco inizierà tra x secondi, dopodiché inizierà il gioco. Quindi, il conto alla rovescia per il fade-in inizierà solo quando gli utenti sono nella pagina "Gioco", prima dell'inizio del gioco.

Issues:

Il fade-in contatore inizia ancor prima che gli utenti vengono navigati alla pagina "Game". Pertanto, quando gli utenti sono ancora nella prima pagina: "Pagina di introduzione", il contatore di dissolvenza nella seconda pagina: la pagina "Gioco" inizierà a girare.

Che avrebbe dovuto essere:

Il problema sopraindicato non dovrebbe accadere, il fade-in in 2 ° pagina dovrebbe iniziare solo il conto alla rovescia solo quando l'utente ha navigato dal 1 ° pagina alla 2a pagina.

Cosa è stato fatto:

ho impostato ogni pagina come z-index, di conseguenza, il 1 ° pagina è impostato come z-index=1 mentre la 2 ° pagina è impostato come z-index=2, inoltre, ho impostato il 2 ° pagina essere display:none, quindi la seconda pagina verrà visualizzata solo quando chiamata.

Inoltre, ho dichiarato una variabile booleana globale var booleanplay== true e all'interno del mio <script>, ho impostato il controllo condizionale per chiamare la funzionalità di gioco(). Quindi, giustamente, dovrebbe aver controllato la condizione prima di eseguire il metodo.

Ho allegato il codice per il vostro esame ... per favore. Sono totalmente alla fine.

Codice:

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

in cui si sta definendo interval sta iniziando il timer. Pertanto, dovrai spostare il compito del timer interval in qualsiasi metodo che attivi il rimpasto della profondità della pagina (ad esempio il metodo page2()). In questo modo, quando cambi pagina, avvia il timer.

Aggiornamento:

La linea:

inizializza la variabile interval e lo assegna il timer setInterval. Ciò avvia il timer, quindi perché il conto alla rovescia del gioco inizia non appena la pagina viene caricata.

vorrei cambiare per essere:

var interval; 

e quindi spostare l'assegnazione setInterval nella funzione page2()

function page2(){ 

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