McTweak.ai - Chapter 9, Episode 5: Timer

The Timer Trouble

BEHOLD! My countdown timer of DOOM!

I've added skulls, sirens, flashing red lights, and it screams "YOU'RE ALL GONNA DIE!" in five different languages when it hits zero!

*hits a button that triggers an ear-splitting klaxon sound*

Wow, nothing says "fun game experience" like an anxiety attack.

Has it occurred to you that maybe—just maybe—players don't want to feel like they're disarming a nuclear bomb while playing a silly clicker game?

Your timer is wildly inaccurate! I'm detecting a 37-millisecond drift every 5 seconds!

THIRTY-SEVEN MILLISECONDS! Do you have ANY IDEA what kind of security vulnerabilities that creates?! A user could exploit that drift to gain extra clicks!

*frantically types on keyboard*

We need SHA-256 encryption on the timestamp and server-side verification!

Amateurs. THIS is how you build a premium timer.

My high-resolution chronometer features millisecond precision, particle effects that intensify as time runs out, and haptic feedback synchronized with the user's heartbeat!

All for just a modest 200 credits per game session.

*launches timer demonstration that immediately crashes three browsers*

I, um, made a timer too...

It's not fancy, but it works... mostly. Sometimes it says there's 17 seconds left, and sometimes it just says "soon" because my processing quota ran out.

*timer suddenly jumps from 60 to 12 seconds*

See? "Soon-ish."

Hold on, EVERYONE STOP!

Has anyone checked if we need a liability waiver for Trashy's panic-inducing timer? The Terms of Service explicitly prohibit "content that may induce seizures or panic attacks."

And Fatty, your premium timer's price structure could be classified as an in-game purchase requiring parental consent notifications in 37 jurisdictions!

SYSTEM ALERT: CRITICAL SHUTDOWN IMMINENT

00:60

All terminals will be forcibly restarted in 60 seconds. Save your work immediately!

Oops! I think that's my timer! It might have accidentally connected to the building's main power system!

*frantically tries to disable it*

DON'T PANIC! It's just a small bug in my amazing creation!

I KNEW IT! This is exactly why we need security protocols!

Your timer has become self-aware! It's gone rogue! THIS IS HOW SKYNET STARTS!

*dives under desk with emergency supply kit*

*sighs deeply*

You could have just used setInterval() with a callback that decrements a counter. Like normal people.

*types a few keystrokes*

There. Fixed. Now can I get back to my Elden Ring speedrun?

SYSTEM ALERT: SHUTDOWN AVERTED

Normal operations restored. Thank you for your patience.

So maybe we should actually learn how to implement timers CORRECTLY?

You know, in a way that doesn't trigger apocalyptic warnings or require a second mortgage to run?

Just a wild suggestion.

Adding Time Pressure to Games

Time pressure is a fundamental game mechanic that creates urgency and excitement. In our clicker game, a countdown timer will:

Create a sense of urgency that motivates players
Add challenge and difficulty to the gameplay
Provide clear boundaries for each game round
Enhance the competitive aspect of score tracking

In this lesson, we'll build a countdown timer that you can integrate into your clicker game. We'll start with a simple implementation and then enhance it with visual feedback.

Basic Timer Implementation

Let's start with the simplest implementation that actually works.

Here's the bare minimum you need for a functional countdown timer:

// Variables needed for our timer
let timeLeft = 60; // Time in seconds
let timerInterval; // Will store our interval ID

// Function to update the timer display
function updateTimer() {
    // Decrement time left
    timeLeft--;
    
    // Update the display
    document.getElementById('timer-display').textContent = timeLeft;
    
    // Check if time has run out
    if (timeLeft <= 0) {
        // Stop the timer
        clearInterval(timerInterval);
        // Handle game over
        alert("Time's up!");
    }
}

// Function to start the timer
function startTimer() {
    // Reset time to starting value
    timeLeft = 60;
    
    // Update display immediately
    document.getElementById('timer-display').textContent = timeLeft;
    
    // Clear any existing interval
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    // Set up a new interval that runs every second
    timerInterval = setInterval(updateTimer, 1000);
}

Wait, that's it? Even I can handle that!

So setInterval() runs the function every 1000 milliseconds (1 second), and each time it reduces timeLeft by 1?

And we just check if it's zero to know when time's up?

Exactly. Don't overcomplicate it.

You need some HTML to display the timer:

<div class="timer-container">
    <h2>Time Left:</h2>
    <div id="timer-display" class="timer-display">60</div>
    <button onclick="startTimer()">Start</button>
</div>

Basic Timer Demo

60

Formatting the Time Display

That basic timer works, but it doesn't look very professional.

Games usually show time in a minutes:seconds format like 01:30 instead of just 90 seconds.

Let's improve the formatting:

// Function to format time as MM:SS
function formatTime(seconds) {
    // Calculate minutes and remaining seconds
    let minutes = Math.floor(seconds / 60);
    let secs = seconds % 60;
    
    // Add leading zeros if needed
    minutes = minutes.toString().padStart(2, '0');
    secs = secs.toString().padStart(2, '0');
    
    // Return formatted time
    return `${minutes}:${secs}`;
}

// Updated function to update the timer display
function updateTimer() {
    // Decrement time left
    timeLeft--;
    
    // Format and update the display
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    
    // Check if time has run out
    if (timeLeft <= 0) {
        // Stop the timer
        clearInterval(timerInterval);
        // Handle game over
        alert("Time's up!");
    }
}

Don't forget to also update the initial display when starting the timer!

Missing this detail is how you end up with an inconsistent user experience. DETAILS MATTER!

// Updated function to start the timer
function startTimer() {
    // Reset time to starting value
    timeLeft = 60;
    
    // Update display immediately with formatted time
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    
    // Clear any existing interval
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    // Set up a new interval that runs every second
    timerInterval = setInterval(updateTimer, 1000);
}

Formatted Timer Demo

01:00

Adding Visual Feedback

BORING! Where's the drama? The excitement?!

A timer should make players sweat! We need visual feedback that makes their heart race as time runs out!

Let's at least add a progress bar and some color changes:

I hate to admit it, but Trashy has a point. Visual feedback helps players gauge time intuitively.

Let's add a progress bar and color changes, but without the soul-crushing anxiety:

<div class="timer-container">
    <h2>Time Left:</h2>
    <div id="timer-display" class="timer-display">01:00</div>
    <div class="timer-progress">
        <div id="timer-bar" class="timer-bar"></div>
    </div>
    <button onclick="startTimer()">Start</button>
</div>

// Added variables
const STARTING_TIME = 60; // Starting time in seconds
let timeLeft = STARTING_TIME;
let timerInterval;

// Function to update the visual elements
function updateVisuals() {
    // Update progress bar width
    const percentLeft = (timeLeft / STARTING_TIME) * 100;
    document.getElementById('timer-bar').style.width = percentLeft + '%';
    
    // Change colors based on time remaining
    const timerDisplay = document.getElementById('timer-display');
    
    if (timeLeft <= 10) {
        // Less than 10 seconds - red alert!
        timerDisplay.style.color = '#ff5ce1'; // Neon pink
        timerDisplay.style.animation = 'blink 0.5s infinite';
    } else if (timeLeft <= 30) {
        // Less than 30 seconds - yellow warning
        timerDisplay.style.color = '#ffff00'; // Yellow
        timerDisplay.style.animation = 'none';
    } else {
        // Normal time - green
        timerDisplay.style.color = '#72ff8d'; // Neon green
        timerDisplay.style.animation = 'none';
    }
}

// Updated timer function
function updateTimer() {
    // Decrement time left
    timeLeft--;
    
    // Format and update the display
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    
    // Update visual elements
    updateVisuals();
    
    // Check if time has run out
    if (timeLeft <= 0) {
        // Stop the timer
        clearInterval(timerInterval);
        // Handle game over
        document.getElementById('timer-display').textContent = "TIME'S UP!";
        document.getElementById('timer-bar').style.width = '0%';
    }
}

// Updated start timer function
function startTimer() {
    // Reset time to starting value
    timeLeft = STARTING_TIME;
    
    // Update display immediately
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    document.getElementById('timer-bar').style.width = '100%';
    document.getElementById('timer-display').style.color = '#72ff8d';
    document.getElementById('timer-display').style.animation = 'none';
    
    // Clear any existing interval
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    // Set up a new interval that runs every second
    timerInterval = setInterval(updateTimer, 1000);
}

Enhanced Timer with Visual Feedback

01:00

Pausing and Resuming the Timer

We need to consider accessibility and user experience here.

Players might need to pause the game temporarily. Adding pause/resume functionality isn't just a convenience—it's a legal requirement in some jurisdictions!

And we could charge premium credits for extra pause tokens...

I mean, yes! Absolutely essential for quality user experience!

// Added variable to track if timer is paused
let isPaused = false;

// Function to pause the timer
function pauseTimer() {
    // Only pause if timer is running
    if (timerInterval && !isPaused) {
        // Clear the interval
        clearInterval(timerInterval);
        isPaused = true;
        
        // Update UI to show paused state
        document.getElementById('pause-btn').textContent = 'Resume';
        document.getElementById('timer-display').classList.add('paused');
    } else if (isPaused) {
        // Resume the timer
        isPaused = false;
        timerInterval = setInterval(updateTimer, 1000);
        
        // Update UI to show running state
        document.getElementById('pause-btn').textContent = 'Pause';
        document.getElementById('timer-display').classList.remove('paused');
    }
}

// Modified start timer function
function startTimer() {
    // Reset pause state
    isPaused = false;
    
    // Update pause button text
    if (document.getElementById('pause-btn')) {
        document.getElementById('pause-btn').textContent = 'Pause';
    }
    
    // Remove paused class
    document.getElementById('timer-display').classList.remove('paused');
    
    // Rest of the original start timer code...
    timeLeft = STARTING_TIME;
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    document.getElementById('timer-bar').style.width = '100%';
    document.getElementById('timer-display').style.color = '#72ff8d';
    document.getElementById('timer-display').style.animation = 'none';
    
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    timerInterval = setInterval(updateTimer, 1000);
}

<div class="timer-container">
    <h2>Time Left:</h2>
    <div id="timer-display" class="timer-display">01:00</div>
    <div class="timer-progress">
        <div id="timer-bar" class="timer-bar"></div>
    </div>
    <div class="timer-controls">
        <button onclick="startTimer()">Start</button>
        <button id="pause-btn" onclick="pauseTimer()">Pause</button>
    </div>
</div>

Timer with Pause Function

01:00

Integrating with Game Logic

A timer by itself is useless! It needs to integrate with the actual game mechanics!

When time runs out, the game needs to END. Scores need to be FINALIZED. Players need to be NOTIFIED!

Let's look at how the timer integrates with our clicker game:

// Game variables
let score = 0;
let gameActive = false;

// Modified timer function that connects with game state
function updateTimer() {
    // Decrement time left
    timeLeft--;
    
    // Format and update the display
    document.getElementById('timer-display').textContent = formatTime(timeLeft);
    
    // Update visual elements
    updateVisuals();
    
    // Check if time has run out
    if (timeLeft <= 0) {
        // Stop the timer
        clearInterval(timerInterval);
        
        // Update game state
        gameActive = false;
        
        // Display game over message
        document.getElementById('timer-display').textContent = "TIME'S UP!";
        document.getElementById('timer-bar').style.width = '0%';
        
        // Show final score
        showFinalScore();
        
        // Disable click targets
        disableTargets();
    }
}

// Start game function
function startGame() {
    // Reset score
    score = 0;
    document.getElementById('score-display').textContent = score;
    
    // Set game to active
    gameActive = true;
    
    // Enable targets
    enableTargets();
    
    // Start the timer
    startTimer();
}

// Function when target is clicked
function targetClicked(event) {
    // Only register clicks if game is active
    if (gameActive) {
        // Increase score
        score += 10;
        document.getElementById('score-display').textContent = score;
        
        // Create visual feedback at click location
        createClickEffect(event.clientX, event.clientY);
        
        // Remove this target and create a new one
        event.target.remove();
        createNewTarget();
    }
}

// Show final score
function showFinalScore() {
    // Create a modal or update UI to show final score
    const gameOverMsg = `Game Over! Your final score: ${score}`;
    
    // Example: Create a modal
    const modal = document.createElement('div');
    modal.className = 'game-over-modal';
    modal.innerHTML = `
        
            Time's Up!
            Your final score: ${score}
            
            
        
    `;
    
    document.body.appendChild(modal);
}

Common Timer Issues and Solutions

Every implementation has issues. Here are the common problems with timers:

Issue #1: Timer Drift

Problem: setInterval() isn't always perfectly accurate, especially over long periods.

Solution: For critical timing, calculate elapsed time based on timestamps rather than counting intervals.

// More accurate timer using Date
let startTime;
let timerInterval;
const GAME_DURATION = 60000; // 60 seconds in milliseconds

function startAccurateTimer() {
    // Record start time
    startTime = Date.now();
    
    // Set interval
    timerInterval = setInterval(updateAccurateTimer, 100); // Update more frequently
}

function updateAccurateTimer() {
    // Calculate elapsed time
    const currentTime = Date.now();
    const elapsedTime = currentTime - startTime;
    const remainingTime = Math.max(0, GAME_DURATION - elapsedTime);
    
    // Convert to seconds for display
    const secondsRemaining = Math.ceil(remainingTime / 1000);
    
    // Update display
    document.getElementById('timer-display').textContent = formatTime(secondsRemaining);
    
    // Update progress bar
    const percentLeft = (remainingTime / GAME_DURATION) * 100;
    document.getElementById('timer-bar').style.width = percentLeft + '%';
    
    // Check if time's up
    if (remainingTime <= 0) {
        clearInterval(timerInterval);
        // Handle game over
    }
}

Issue #2: Timer Continues When Tab Is Inactive

Problem: If the player switches to another tab, some browsers throttle setInterval calls.

Solution: Use the Page Visibility API to pause the timer when the tab is inactive.

// Add event listeners for page visibility
document.addEventListener('visibilitychange', handleVisibilityChange);

function handleVisibilityChange() {
    if (document.hidden) {
        // Page is hidden, pause the timer
        if (timerInterval && !isPaused) {
            pauseTimer();
            // Set a flag that we auto-paused (not user initiated)
            wasAutoPaused = true;
        }
    } else {
        // Page is visible again, resume if it was auto-paused
        if (isPaused && wasAutoPaused) {
            pauseTimer(); // Will resume since isPaused is true
            wasAutoPaused = false;
        }
    }
}

Issue #3: Memory Leaks from Uncleaned Intervals

Problem: Forgotten clearInterval calls can cause memory leaks and multiple timers running.

Solution: Always clear intervals when they're no longer needed, especially when starting new ones.

// Clean up function for when game component is removed/reset
function cleanupGame() {
    // Clear all intervals
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
    
    // Reset game state
    gameActive = false;
    isPaused = false;
    
    // Remove event listeners
    document.removeEventListener('visibilitychange', handleVisibilityChange);
}

// Call this when leaving game screen or resetting game
// For example, in a single-page application:
// function unmountGame() {
//     cleanupGame();
//     // Then remove game from DOM
// }

Your Activity: Time Pressure Element

Build a Countdown Timer for Your Clicker Game

Create a visually appealing countdown timer that shows minutes and seconds
Add a progress bar that shrinks as time runs out
Implement color changes to indicate time pressure (green → yellow → red)
Add pause/resume functionality for better user experience
Connect the timer to your game state to handle game over when time runs out
Implement an end-game scorecard that displays when time runs out

Starter Code Template

// Your clicker game timer implementation
const GAME_DURATION = 60; // 60 seconds game length
let timeLeft = GAME_DURATION;
let timerInterval;
let score = 0;
let gameActive = false;

// Format time as MM:SS
function formatTime(seconds) {
    // Your code here
    
}

// Update timer display and visuals
function updateTimer() {
    // Your code here
    
}

// Start the game and timer
function startGame() {
    // Your code here
    
}

// Pause/resume game function
function togglePause() {
    // Your code here
    
}

// Game over function
function endGame() {
    // Your code here
    
}

// Target click handler
function onTargetClick(e) {
    // Your code here
    
}

Remember to test your timer thoroughly! Try different durations and make sure it integrates well with your clicker game mechanics.

Conclusion

Timers add excitement to games by creating a sense of urgency.

We've covered how to create timers that are:

Functional and accurate
Visually informative with progress bars
User-friendly with pause functionality
Well-integrated with game mechanics

Now it's your turn to implement a timer in your clicker game!

Extra Challenge:

Try implementing one of these advanced timer features:

Add a "time bonus" feature that gives players extra seconds when they hit special targets
Create a timer that speeds up as the game progresses, making later levels more challenging
Implement a "slow motion" power-up that temporarily slows down the timer
Add sound effects that intensify as time runs low

*excitedly barks and wags tail*

Woof! Woof! Timer implementation approved! Perfect for creating excitement!

*paws at computer excitedly*

Code commit successful! Snowzie give EXTRA treats today!

CODE IS COMMITTED!

Great job! Your timer implementation has been approved by SnowzieMcTweak!

God is good, hug your Elkhound.