This is the status of our timer. If the timer is running and counting up, timerActive should be true. If the game is stopped and the timer is no longer running, timerActive should be false.
timerInterval
This is the number of milliseconds it takes for the timer to update & also the accuracy of our score.
The setInterval() function in Javascript "repeatedly calls a function or executes a code snippet, with a fixed time delay between each call". This means every 10 milliseconds (GameEnv.timerInterval), this.updateTimer() will run.
"This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()". The interval ID is stored in GameControl.intervalId when startTimer() is called. Additionally, the timerActive variable is set to true.
Updating the timer
updateTimer() {
const time = GameEnv.time
if (GameEnv.timerActive) {
const newTime = time + GameEnv.timerInterval
GameEnv.time = newTime
if (document.getElementById('timeScore')) {
document.getElementById('timeScore').textContent = (time/1000).toFixed(2)
}
}
},
How does it work?
Every time updateTimer() is called, the function will take our current time, 100 milliseconds for example, and add the interval of time to it, *100 + 10 milliseconds. It will then set the GameEnv.time variable to the new time. After the number is updated, it will display it by setting the textContent** of the element with the id "timeScore".
(time/1000).toFixed(2)
This large part of the code takes the time (in milliseconds) and turns it into seconds;
Divide the time by 1000 (milliseconds to seconds)
.toFixed(2); Since Javascript stores numbers in Binary, when we work with decimals, our numbers might appear different because they are trying to fit in the limited space (bits) they are given. (For example: 0.8 - 0.1 = 0.7000000000000001). To tackle this issue, we use .toFixed(2) to convert our number to fixed point notation to the 2nd decimal place (hundredths). This will change our example from 0.7000000000000001 to 0.7.
When stopTimer() is called, it will initially check if GameEnv.timerActive is false. If the timer is already stopped, we do not need to stop it again. This will prevent errors if it is called more than once. The first time it is called though, it will set GameEnv.timerActive to false and GameEnv.time to 0. After this, it will run clearInterval(this.intervalId). This takes the intervalId, and uses it to stop the setInterval() we started above.
GameEnv Variables
timerActive
This is the status of our timer. If the timer is running and counting up, timerActive should be true. If the game is stopped and the timer is no longer running, timerActive should be false.
timerInterval
This is the number of milliseconds it takes for the timer to update & also the accuracy of our score.
time
This is our time number (stored in milliseconds).
Starting the timer
Interval ID
The setInterval() function in Javascript "repeatedly calls a function or executes a code snippet, with a fixed time delay between each call". This means every 10 milliseconds (GameEnv.timerInterval), this.updateTimer() will run.
"This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()". The interval ID is stored in GameControl.intervalId when startTimer() is called. Additionally, the timerActive variable is set to true.
Updating the timer
How does it work?
Every time updateTimer() is called, the function will take our current time, 100 milliseconds for example, and add the interval of time to it, *100 + 10 milliseconds. It will then set the GameEnv.time variable to the new time. After the number is updated, it will display it by setting the textContent** of the element with the id "timeScore".
(time/1000).toFixed(2)
This large part of the code takes the time (in milliseconds) and turns it into seconds;
Divide the time by 1000 (milliseconds to seconds)
.toFixed(2); Since Javascript stores numbers in Binary, when we work with decimals, our numbers might appear different because they are trying to fit in the limited space (bits) they are given. (For example: 0.8 - 0.1 = 0.7000000000000001). To tackle this issue, we use .toFixed(2) to convert our number to fixed point notation to the 2nd decimal place (hundredths). This will change our example from 0.7000000000000001 to 0.7.
Stopping the Timer
How does it stop?
When stopTimer() is called, it will initially check if GameEnv.timerActive is false. If the timer is already stopped, we do not need to stop it again. This will prevent errors if it is called more than once. The first time it is called though, it will set GameEnv.timerActive to false and GameEnv.time to 0. After this, it will run clearInterval(this.intervalId). This takes the intervalId, and uses it to stop the setInterval() we started above.