This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

The Game Loop drives a game by repeating three steps: 1) handles input, 2) updates game state (like movement), and 3) renders visuals. This cycle runs many times per second for smooth gameplay. In web games, requestAnimationFrame() maintains fluid motion.

Additional Context

Example Game: Space Invaders

Process Input: Detect player’s key presses to move the spaceship left or right and shoot lasers.
Update State: Move the spaceship and lasers based on input, update alien positions, and check for collisions.
Render Scene: Draw the spaceship, lasers, aliens, and scores on the screen.
Application: The game loop runs repeatedly, allowing for smooth movement of the spaceship and lasers, and updating alien positions in real-time. requestAnimationFrame() ensures the game runs at the optimal frame rate, providing a fluid and engaging experience for the player.

Credit shared with @koulik_hota_826b4a7c11b8c