Learning how to create code that 'pauses' my game
After much work (and frustration) this morning, I realized that my main problem was not understanding what the variable elapsedtime collects. This variable monitors, as the name indicates, the current elapsed time of the game between each time the tick() function runs. What I had thought, was that elapsedtime was the total time the game had been played. Due to this misunderstanding, I kept trying to make adjustments to that variable, not realizing that the actual value of that number never increased (as I had presumed). Therefore it never made any difference in my attempts to pause the game.
Thus I changed tactics. What I ended up doing was creating a new variable called gameisrunning. This variable simply holds two values, true and false. The value is changed based on pressing the spacebar. This is determined within my keypress() jQuery function. If you press the spacebar, the value changes to true. If you press it again it changes back to false.
In my tick() function, I created an if block that checks the current value of gameisrunning. True to it’s name if gameisrunning == true, the functions shipopacity(), shipmovement(), problemtype(), kersplaty(), particlerotation(), and newproblemy() are processed. If gameisrunning == false then none of the normal game functions will be processed, and thus the game is for all intents and purposes ‘paused’.
As mentioned previously, the variable gameisrunning is changed in my $(window).keypress () function(remember that a dollar sign ‘$’ in front of functions like this means it is a jQuery function). Here is the function:
$(window).keypress(function(e) {
if(e.keyCode == 32) {
if(!gameisrunning){
$("#paused").css({'display':'none'});
$("#startgame").css({'display':'none'});
$("#problem1").css({'display':'block'});
$("#problem2").css({'display':'block'});
$("#problem3").css({'display':'block'});
gameisrunning = true;
}else {
gameisrunning = false;
$("#begin").css({'display':'none'});
$("#problem1").css({'display':'none'});
$("#problem2").css({'display':'none'});
$("#problem3").css({'display':'none'})
$("#paused").css({'display':'block'});
}
}
});
To use the keypress function from jQuery, you need to know the keyCode identifier of the key you want (in my case spacebar = 32). Then I create an if block that asks if my variable gameisrunning is false (in many programming languages !gameisrunning is the same thing as stating gameisrunning is false). If it’s false and the spacebar has just been pressed, then my piece of html div #paused doesn’t show up, my #startgame div is also not displayed, and the problems can be displayed. If gameisrunning is true and the spacebar is pressed, then the #paused div is displayed, all the functions mentioned above stop processing, and my problems are not visible. It also resets gameisrunning to false.
Specific problems I faced: I seem to continue to have difficulties in coming up with using a variable with true/false to help process code. There have been several times now when that has been the most effective way to solve the problem, but when thinking of solutions it isn’t coming to mind.
I also feel that I better understand what the data is that some of my variables are collecting. I can tell that this may be a problem of mine, and something I will have to stay aware of in the future.
What helped me: I took the time to reorganize my code. My tick() function had been huge, but I simplified it down to being a function that simply ran a bunch of smaller functions. This helped hugely in being able to understand what was happening and when. Imagine that, compartmentalizing your subject matter helps you to more easily identify where the problem is. Who knew?!?