Member-only story
Creating a Game Loop in JavaScript
Let’s smooth out player movement with a recurring process.

Over the past several months I have been building a JavaScript game where a player wanders through procedurally-generated caverns.

The game uses the HTML Canvas API with two <canvas>
elements: one for the blue player and one for the cavern, enemies, and items. In my early versions, the player would move from tile to tile with no animated transitions.
To smooth out the gameplay, I recently switched to animated pixel-by-pixel movement. Rather than having the player move immediately to an adjacent tile, it would move one pixel at a time — and instead of always being aligned to its current tile, the player could sit between two or more tiles.