Incremental Lesson 5 - Timers

About this tutorial

Category: Javascript
Difficulty: Beginner
Lesson 5 - Timers.zip

Results

In lesson 4, we introduced the concept of variables to store information for later viewing or modification. This lesson, we will be introducing an element that is core to the incremental/idle game experience: Timers.

Timers are a fantastic way to automate tasks within a program, whether it's a game or a scientific simulation. We will be using our existing project and creating a timer to automatically increment our money value every second.

Open your javascript file. We won't be changing anything in CSS or HTML this lesson, as timers work behind the scenes. We're going to create a new function. Let's call it "Tick()". In case you can't remember, enter the function as below:

function Tick() {
 
}

Remember that { } indicates what the function should execute. We're going to add a familiar line to our function:

money = money + 1;

Surely there is a simpler way to add 1 to a variable though. There is! Let's replace that line with the following one:

money++;

This is a very simple line to understand. It takes the variable "money" and adds 1 to it. For example, if the value of money was 10 before this line, it would be 11 after it. You can do the same for subtracting one by replacing ++ with --. Before the line it would be 10, after, it would be 9. There are more mathematical shortcuts that we'll be using later on, but we'll discuss them as we come to them.

Now we need to change the display of our money variable. Add another line into your function:

document.getElementById("money").innerHTML = money;

Remember that we are accessing the "document", then we're looking for the element that has the CSS ID "money" and replacing ALL HTML within this element with our variable value.

Save your file and load the HTML page in your browser. Nothing's happening. That's because we need to set the timer to run.

Timers work like a variable in a way. You set a name for the timer, the functions that it needs to call, and the amount of time in milliseconds it should wait before running again. We'll use the name "Timer" for our timer. Enter the following line below the money variable declaration:

var Timer = window.setInterval(function(){Tick()}, 1000);

Notice how we still declare the Timer as a "var"? This allows us to change the timer later on if we need to stop it or change its speed. The text following the = may seem a little foreign to you, however.

window.estInterval tells javascript that we are creating a timer in the variable. "window" accesses the main document, while "setInterval" and its following text tell javascript how to set up the timer. You'll notice that there is a function call inside the setInterval brackets. This works the same as any other function (you can even split it over a number of lines with the { }). This allows us to either define code specifically within the timer or to "call" other functions to be run in its place.

To call a function, you are giving javascript the name of the function that you want to run. Notice how we just enter "Tick()" rather than the whole declaration line? We just need the identifying name to execute it.

After the function calls, you'll notice that there is a "," followed by 1000. The "," tells javascript that the function calls are finished, and that it now has to look for a duration for the timer. Remember that it's set in milliseconds (1000ms = 1 second), so we'll set it at 1000.

Save everything and load it back into your browser. Congratulations! You should find that the money display updates every second, adding 1 each time. You can still click to add more manually as well.