5

Functionality:

User to play a time-based game in game page. There will be a countdown timer that will keep track of the game duration, hence, when the counter =0, it will do a check and assess if the user has satisfy the game condition.

The Game conditions are as follows:

1.) if the counter is equal to 0 and the speed is more than 20ms, it will advance to the next page

else

2.) it will navigate to the "Gameover" page and user will have to acknolwedge the the gameover page which will then navigate back again to the game starting page

And when User fails the game and restarts the game, the counter is suppose to be reset such that it will be counted as a brand new game.

What I have done:

I have done, the counter and have also recorded the speed and it is displaying on the game page. Secondly, I have also set the conditional statements to check on the conditions(counter == 0 && speed>20), which is suppose the navigate the user to the correct pages, respectively.

Issue: User is able to navigate to the correct pages after the end of the game, hence the conditional checks that has been done is correct. However, for users who failed the game and has to restart the game, the timer is not reset to the initial value; for e.g counter=10. Meaning, when the counter=0 from the previous game try, it is still set at counter = 0, i do understand that is because I have set it as clearInterval(rollingInterval) , hence it clears the counter and the speed is not reset to 0.00ms but the previous speed is still being displayed.

However, I would like to ask how am I able to reset the counter back to counter =10 as well as to reset the speed = 0.00ms when the user restarts the game??

I have attached the code for your perusal:

function Page2() {
  $("#page1").hide();
  $("#page2").show();
}

//script for div id =page2
function MainGame(){
               var numOfSpin = 0,
                distanceCovered = 0,
                counter = 0,
                timer = 10;
               var rollingInterval;
                
                $("#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 Spin00"+i+".png");
                            }
                            if ( i >= 10 && i < 100 ) {
                                $("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin0"+i+".png");
                            }
                            if ( i >= 100 && i < 1000 ) {
                                $("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin"+i+".png");
                               
                                $("#scrollerDiv").scrollTop(0);
                                numOfSpin++;
                                distanceCovered += 0.59;
                                console.log(distanceCovered);
                                console.log(numOfSpin);
                            }
                        }
                    }
   
                })
        
               rollingInterval = setInterval(function() {
                    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');
                   
                    //Ernest_Lee 13/11/15: Set Conditional Checks; user satisfy game condition, advance to next page, else navigate to the "GameOver" Page.
                    if ( counter == 10 && speed >20) {
                        console.log("Count");
                        clearInterval(rollingInterval);
                        $("#page2").hide();
                        $("#page3").show();
                    }else if( counter == 10 && speed <20) {
                        clearInterval(rollingInterval);
                        $("#page2").hide();
                        $("#GameOver").show();
                    }
                }, 1000)
               
           }
function RevertPage() {
  $("#GameOver").hide();
  $("#page1").show();
}
  ::-webkit-scrollbar {
    display: none;
  }
  /*CSS styling for fadein counter */
  #content {
    position: fixed;
    top: 850px;
    left: 250px;
    font-family: SFNewRepublic;
    font-size: 250px;
    color: orange;
    opacity: 2;
  }
  .img-wrapper {
    overflow: hidden;
    position: relative;
    display: inline-block;
  }
  .img-wrapper roll {
    width: 400px;
    height: auto;
  }
  .img-wrapper scroller {
    width: 200px;
    height: 500px;
  }
  /*Creating & Centering the gauge*/
  #canvas {
    display: inline-block;
    position: fixed;
    top: 700px;
    left: 200px;
    width: 300px;
    margin: 100px auto;
  }
  #Counter {
    display: inline-block;
    position: fixed;
    top: 700px;
    left: 650px;
    width: 300px;
    margin: 100px auto;
  }
  /*Custom font for numbers*/
  @font-face {
    font-family: SFNewRepublic;
    src: url("font/sfnewrepublic/SF_New_Republic.ttf");
  }
  /*Image set in Scroller & rolling-pin*/
  #scrollerDiv {
    position: fixed;
    top: 1150px;
    left: 200px;
    background-color: transparent;
    height: 650px;
    width: 750px;
    overflow: auto;
    /*                z-index:1;*/
    z-index: 2;
  }
  #invisibleElement {
    height: 2490px;
    width: 1000px;
  }
  /*Function: NEW for Speed and Counter Text*/
  #speedSpan {
    color: #55380b;
    font-family: SFNewRepublic;
    font-size: 50px;
    position: fixed;
    align-content: center;
    top: 900px;
    left: 298px;
  }
  #timeSpan {
    color: #55380b;
    font-family: SFNewRepublic;
    font-size: 80px;
    position: fixed;
    top: 900px;
    left: 760px;
  }
  .container {
    width: 750px;
    height: 300px;
    align-content: center;
    clear: both;
  }
  .container input {
    width: 400px;
    height: 90px;
    clear: both;
  }
  /* Game Page CSS Styling */
  /*Game Page1 CSS Styling*/
  #page1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  /*Game Page2 CSS Styling*/
  #page2 {
    top: 0;
    left: 0;
    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="http://atextures.com/paper-scroll-background-five/" 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%;">

  <span id="speedSpan">0.00 m/s</span>
  <span id="timeSpan">10 s</span>

  <img id="roller" style="position: relative; top:1100px; width: 100%" src="http://atextures.com/paper-scroll-background-five/" />
  <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="http://atextures.com/paper-scroll-background-five/">

  <div id="scrollerDiv">
    <p id="invisibleElement"></p>
  </div>
</div>


<div id="GameOver" align="center" style=" background-image: url(Image/GameOver.png);background-repeat: no-repeat;width: 100%;height: 100%;display: none;">
  <input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="OK" src="http://depositphotos.com/1045357/stock-photo-ok-button.html" onclick="RevertPage()" />
</div>

<!-- begin snippet: js hide: false -->
Luke
  • 982
  • 1
  • 7
  • 27
  • `clearInterval(rollingInterval)` is called in an abstract function, which has its own scope. I think the issue is that the abstract function has no return value, so calling `rollingInterval = setInterval(function() {...})` does not update rollingInterval in the outer scope. Try adding `return rollingInterval`. – noumenal Nov 16 '15 at 14:31
  • @noumenal sorry but what do you mean?? I tried adding return rollingInterval and it doesn't seem to be working too – Luke Nov 16 '15 at 14:39
  • I have tried running your code, but it seems not to work. I think you need to separate the function calls into different functions. A function named $ is not very meaningful and is most often reserved for jQuery. I would suggest refactoring the code by renaming the functions, so that each function has a clear name - a verb. This means that instead of nesting the functions they should be written after each other, for example: `function1(){ } function2(){ function1(); } ` By doing so, you will have a better understanding of the chain of events. – noumenal Nov 16 '15 at 19:26
  • @noumenal. May I know how is it not working?? cause, when I tested it, the function of the countdown and detection of speed were working. However, the setInterval function is not working only when users have to navigate back to the game page a second time. Reason why is used `$(function(){...})`, is so that the function within will only be implemented when document is ready.But, I will try out your suggestion and update again – Luke Nov 17 '15 at 02:37
  • For starters, I don't have access to the images, but nothing seems to be happening when clicking Submit Query. – noumenal Nov 17 '15 at 17:31
  • @noumenal, Alright, I have managed to fixed the above bug. However, I have an issue which arise from the fix, hope you are still available to help. At this point in time, I have managed to reset both the time and speed. However, when user replays, the timer is already running, hence, I would like to ask, how do I only start the timer only when user is in the game page again? I have set the rollingInterval=setInterval(updateTimer,3000); in function revertPage() instead and have also set the initial variables to facilitate the re-start. Do really appreciate if you could help – Luke Nov 18 '15 at 03:16

2 Answers2

1

Tried to reset the counter and speed values when you get "Game over"?

}else if(counter==10&&speed<20){
     $("#page2").hide();
     $("#GameOver").show();
     counter=0; // make counter value equal to 0
     speed=0; // speed also
     clearInterval(rollingInterval)
}
  • Nope!! I have already tried that before, and it ain't working. – Luke Nov 16 '15 at 09:08
  • what else could we do about it? – Luke Nov 16 '15 at 09:36
  • I need to see more part of the code and try to help you, this is because the error is probably not in this part. –  Nov 16 '15 at 12:50
  • does it matter that the method call is done in document.ready?? since it is only called once?? – Luke Nov 16 '15 at 14:14
  • No, I wanna see what's into these "...", or it'd be greater to start a fast chat in Stackoverflow. –  Nov 16 '15 at 14:19
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95244/discussion-between-pro-hands-and-luke). –  Nov 16 '15 at 14:22
  • I have try your suggestions and have made the following observations: 1.) I have managed to reset the speed, you will need to add in `numOfSpin = 0; distanceCovered = 0;` into the conditional checks as well. 2.) The initial countdown will be very jumbled, meaning, the countdown will happen in this way: 10..8...6..4...3..1..same for the fadein countdown counter too.3.) I could somehow reset the counter but it doesn't start at 10 – Luke Nov 17 '15 at 10:10
  • Alright, I have managed to fixed the above bug. However, I have a new issue, hope you are still available to help. At this point in time, I have managed to reset both the time and speed. However, when user replays, the timer is already running, hence, I would like to ask, how do I only start the timer only when user is in the game page again? I have set the `rollingInterval=setInterval(updateTimer,3000);` in `function revertPage()` instead. Do really appreciate if you could help – Luke Nov 18 '15 at 03:14
  • @Luke When you aren't at the game playing page, you just should clear the interval. Another logic is to create a boolean (global variable) that may be called `playing`, it could be `true` while you're playing, and `false` when you aren't playing the game. So in the interval function, before doing anything, check if the boolean `playing` is `true` (`if(playing){...}`), and when you finish the game or get game over, make this boolean `false`, and when you start the game, it's `true`. –  Nov 18 '15 at 10:26
  • Hand, I have tried using the boolean method, but it is still not functioning in accordance to boolean condition. I have declared a global boolean variable as `boolean(playing = true)`... and set a condition of 'if (playing){ Game()}'. however, at this point, the counter is still counting before the game is actually re-started. This doesn't happen when the user first play the game. – Luke Nov 19 '15 at 06:10
1

very simply, I did a refresh of the entire page. Hence, this is how I did it to reset the counter and all the other settings:

location.reload();

The following line is placed within: function RevertPage(){..}. therefore, the code will be like:

function RevertPage() { 
//navigate user to game page immediately.
//Refresh entire LaunchPage
location.reload();
console.log("GameFail Navigate");
}
Luke
  • 982
  • 1
  • 7
  • 27
  • I didn't know that it does exists this function, really. This is more pratice that change the values manually. –  Nov 24 '15 at 10:50
  • 1
    @ProHands, Yeap it does!!Learnt something new for me!!=) – Luke Nov 26 '15 at 10:36