Every browser game, no matter how simple, is driven by a loop: a function that runs over and over, updating the positions and states of game objects and then redrawing the screen. This is the game loop, and it is the heartbeat of the project you are building in this module. Without it, a Canvas drawing is just a static picture; with it, the same drawing code becomes animation.
In JavaScript, the preferred way to drive that loop is requestAnimationFrame. Unlike setInterval or setTimeout, it asks the browser to call your function right before the next repaint, which produces smoother motion, synchronizes with the display's refresh rate, and pauses automatically when the tab is hidden. You will write a core loop function that clears the canvas, updates game state, draws everything, and then schedules itself again. You will also learn to store the loop's ID so you can stop it for pausing or for a game-over screen.
The subtler issue is timing. Because different machines and monitors run at different frame rates, movement expressed as "add 5 pixels per frame" will run faster on some computers than others. The fix is delta time: measure how much real time passed since the last frame and scale movement by it. As you watch these videos, pay attention to three things — how the loop schedules itself, where in the loop state is updated versus drawn, and how timestamps are used to make motion independent of frame rate.
This video walks through a template built to display frames per second in the browser, and in doing so compares requestAnimationFrame with the older setInterval approach to timed animation. Expect discussion of why frame rates vary, how FPS is measured by tracking elapsed time between frames, and what each scheduling method does differently. The context is a Tumult Hype template, but the underlying JavaScript concepts are the ones you will use in your own loop.
It directly addresses the requestAnimationFrame versus setInterval decision at the center of this topic, and the FPS counter angle makes frame timing concrete, which is the foundation for understanding delta time and frame-rate independence.
A focused tutorial on JavaScript animation fundamentals that builds up an animated example using requestAnimationFrame. It covers the basic structure of an animation function that updates values and then re-schedules itself, which is exactly the shape of a core game loop. The short runtime keeps it close to the essential mechanics rather than wandering into unrelated features.
It is the most direct match for the subtopics on introducing requestAnimationFrame, writing the core loop function, and updating state each frame, presented as a hands-on coding walkthrough you can follow along with.
This video explains how the Source game engine handles ticks — the fixed-interval updates that advance simulation state — and why tick rate affects gameplay behavior. It references the well-known "Fix Your Timestep" article, which is the standard reference on separating simulation updates from rendering frames. The examples come from commercial games, but the problem being described is the same one your delta-time code solves.
It gives useful context for why frame-rate independence matters beyond the browser, showing real consequences when update timing is tied to frame rate, and it points you toward the canonical timestep reference.
Together these videos support MO2 most directly: the requestAnimationFrame tutorials show how to write a self-scheduling loop that updates and redraws every frame, while the FPS and tick-rate videos explain the timing measurements behind frame-rate independence. Because the loop is where updates happen, this material also underpins MO4, since collision checks, scoring, and win/loss tests all live in the update phase you are learning to structure here, and MO5, since the loop is the component that ties drawing, input, and game logic into one running program.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.