खेल की स्थिति की जांच करने में विफल रहता है और पृष्ठभूमि में शुरू होता है

Question

कार्यक्षमता:

उपयोगकर्ता "खेल" पृष्ठ (2 पेज) करने के लिए "निर्देश" पृष्ठ (1 पृष्ठ) से नेविगेट जाएगा और खेल खेलते हैं बनाया गया है। "निर्देश" पृष्ठ में उपयोगकर्ताओं के लिए निर्देशों की एक सूची है और एक प्रारंभ बटन जो क्लिक किए जाने पर उपयोगकर्ताओं को "गेम" पृष्ठ पर नेविगेट करेगा। "गेम" पेज में फीका-इन उलटी गिनती काउंटर है, इसका उद्देश्य उपयोगकर्ताओं को सूचित करना है कि गेम एक्स सेकंड में शुरू होगा, जिसके बाद गेम शुरू होगा। इसलिए, फीड-इन उलटी गिनती काउंटर केवल तब शुरू होगा जब उपयोगकर्ता गेम के प्रारंभ होने से पहले "गेम" पृष्ठ में हों।

मुद्दे:

फीका-इन काउंटर से पहले ही उन "खेल" पृष्ठ पर भेज रहे हैं शुरू होता है। इसलिए, जब उपयोगकर्ता अभी भी पहले पृष्ठ में हैं: "परिचय पृष्ठ", दूसरे पृष्ठ में फीका-इन काउंटर: "गेम" पृष्ठ चलना शुरू हो जाएगा।

यह क्या किया जाना चाहिए था:

ऊपर मुद्दा कहा हो रहा हो नहीं करना चाहिए, फेड-में 2 पेज में काउंटर केवल उलटी गिनती शुरू कर देना चाहिए तभी होता है जब उपयोगकर्ता के लिए 1 पृष्ठ से नेविगेट है दूसरा पृष्ठ

क्या किया गया है:

मैं प्रत्येक पृष्ठ के रूप में z-index, इसलिए, 1 पेज z-index=1 के रूप में सेट कर दिया जाता है, जबकि 2 पेज z-index=2 के रूप में सेट किया गया है की स्थापना की है, इसके अलावा, मैं करने के लिए 2 पेज की स्थापना की है display:none हो, इसलिए दूसरा पृष्ठ केवल तभी प्रदर्शित किया जाएगा जब कॉल किया जाएगा।

इसके अलावा, मैंने वैश्विक बूलियन चरघोषित किया है, और मेरे <script> के भीतर, मैंने गेम() कार्यक्षमता पर कॉल करने के लिए सशर्त जांच सेट की है। इसलिए, सही तरीके से, यह विधि को चलाने से पहले स्थिति पर जांच करनी चाहिए थी।

मैंने आपकी जानकारी के लिए कोड संलग्न किया है .. कृपया मदद करें। मैं पूरी तरह से wits अंत में हूँ।

कोड:

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 तय कर रहे हैं टाइमर शुरू कर रहा है। तो आपको interval टाइमर के असाइनमेंट को स्थानांतरित करने की आवश्यकता होगी, जो भी आपके पेज गहराई को फिर से बदलता है (यानी page2() विधि)। ताकि जब आप पेज स्विच करते हैं तो यह टाइमर शुरू करता है।

अद्यतन:

लाइन:

चर interval initialises और यह setInterval टाइमर प्रदान करती है। यह टाइमर शुरू करता है, इसलिए पेज लोड होने पर गेम उलटी गिनती क्यों शुरू होती है।

मैं इसे बदल जाएगा होने के लिए:

var interval; 

और फिर page2() समारोह में setInterval काम के लिए कदम

function page2(){ 

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