A game is like a flipbook! It runs at 60 frames per second (FPS), meaning the computer redraws the entire screen 60 times every single second. Inside game.js, the loop does three things repeatedly:

function gameLoop() {
    updatePositions();  // 1. Move players, obstacles, and backgrounds
    checkCollisions();  // 2. Did we touch a coin? Did we hit a train?
    drawEverything();   // 3. Clear canvas and paint new positions
    requestAnimationFrame(gameLoop); // Repeat 60 times/sec!
}

How does the computer know if you collected a coin or hit a train? It draws invisible boundary boxes (AABB) around everything and checks if they overlap using standard X, Y coordinates:

function isOverlapping(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

To make jump gravity look real, we use velocity and acceleration. Jumping sets velocity to negative (upward movement). Each frame, gravity slowly increases velocity (downward pull) until the player lands on the track!

player.y += player.velocityY;  // Update Y coordinate
player.velocityY += gravity;   // Pull down by gravity