Why the kiosk hid the courier in this JavaScript game

Market Run — Sun, 08 Nov 2026 14:56:48 +0000

AI can generate a working game before you understand its engine. When a character suddenly disappears behind a kiosk, knowing which part of the code to inspect becomes useful.

In Market Run, the courier below is standing in front of a fruit kiosk. You can see their shoes, but the rest of the character is hidden. Before changing the movement or collision code, freeze the two objects and inspect how the engine draws them.

The blue dot marks the courier's feet. The red dot marks the kiosk's ground anchor. Both dots stay in the same place between these pictures. The draw order changes.

Predict the next frame

Canvas paints a sprite over the pixels already on the canvas. In this scene, the courier's feet are at screen y = 188 and the kiosk's ground anchor is at y = 168. Screen y increases downward. The courier's feet are lower on the screen, so the courier should appear in front.

Consider this deliberately reversed comparator, with the courier as a and the kiosk as b:

objects.sort((a, b) => b.foot.y - a.foot.y);

168 - 188 gives -20. The courier sorts first. The engine draws the courier, then paints the kiosk over them. The shoes stick out beyond the kiosk artwork, which explains the left-hand picture.

Now use the rule from the working depth lab:

objects.sort((a, b) => a.foot.y - b.foot.y);
for (const object of objects) object.draw(object.foot);

The comparison now gives +20. The kiosk draws first and the courier draws last. The world positions have not changed; which pixels survive the frame has changed.

foot is the projected ground anchor, not the top edge of the image. That distinction matters because a tall kiosk and a short character can have very different image heights while standing on the same ground plane.

Check your explanation with another position

Move the courier behind the kiosk, to screen y = 148. Keep the kiosk at 168. Predict which object should draw last before running the scene.

The ascending sort draws the courier first and the kiosk second. Hard-coding the player to draw last would fix the first picture and break this one.

This is a useful debugging routine when working with AI-generated code:

Describe the visible failure precisely.
Freeze unrelated state, such as movement.
Identify the rule that could explain the frame.
Predict the result of one change.
Make that change and repeat the same experiment.
Try a second case that could prove your explanation wrong.

The comparator changes visibility. It does not make a solid kiosk passable, change the character's position or fix collision detection.

Where this rule stops being enough

Sorting whole sprites works for this small ground-plane example. A canopy that must cover a character while its base stays behind them may need separate draw pieces. Bridges, multiple floors and complex overlapping geometry need more explicit rendering rules.

The useful habit is to connect a rule in the code to an observable result, then recognize the cases the rule does not cover.

Try the free interactive kiosk lesson and switch the draw order yourself.

From one rendering rule to a reusable engine

This example is part of our Build a Game Engine from Scratch in JavaScript book and source bundle, published under the Market Run brand. It is for people who already know basic JavaScript and are new to game development.

The goal is to understand the engine underneath a game: how it reads input, advances time, checks movement, sorts sprites and draws a frame. That understanding gives you a way to inspect and change code produced by AI.

The current $19 bundle includes all four PDF books, matching source code and three playable games:

Market Run: a delivery game for learning the engine foundations. Start with Edition 2 and its six browser labs.
Outpost Defense: a tower-defense game that applies the shared engine to combat, waves and resources in Edition 3.
Signal Runner: a platformer that adds jump feel, moving platforms, hazards and checkpoints in Edition 4.
Edition 1: the original, smaller Market Run book and source, included for comparison.

Edition 4's combined source contains all three games using one shared engine directory, with each game's rules kept separate. Use each book with its matching source archive.

Play all three games and read the free sample chapter before deciding whether the bundle fits you.

Disclosure: this article promotes our own book and source bundle. It was drafted with AI assistance; the code explanation was checked against the shipped depth lab, and the images come from the running example.

DEV Community: Market Run

Why the kiosk hid the courier in this JavaScript game

Predict the next frame

Check your explanation with another position

Where this rule stops being enough

From one rendering rule to a reusable engine