Member-only story

Creating a Game Loop in JavaScript

Let’s smooth out player movement with a recurring process.

Nevin Katz
Better Programming
6 min readAug 15, 2022

--

Image by storyset on freepik

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

A screenshot of a game level, where the player is the blue square in the center. Enemies are in red.

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.

--

--

Nevin Katz
Nevin Katz

Written by Nevin Katz

Developer at EDC. I write about web development and biology. Subscribe at https://buttondown.email/nevkatz for article roundups.

No responses yet

What are your thoughts?