Robot Loop Programmer Game — Free HTML CSS JS Snippet

Sequencing, loops, and debugging are the first three ideas in programming, and all three are far easier to feel than to read about. This snippet is a small visual programming game built around exactly those ideas: the player assembles a program from Forward, Turn-left and Turn-right blocks, raises the repeat count on any block, presses Run, and watches a robot execute the program one step at a time across a grid of walls toward a flag. When the robot crashes, the block that was executing is highlighted — which is the whole debugging loop in miniature.

Repeat counts instead of a repeat block

Rather than a nested loop construct, each block carries a times count that the player raises by clicking it. F ×4 is a loop, expressed in the way beginners meet loops first: "do this thing four times". It also creates a genuine optimisation pressure, because every level shows a par block count — solving a spiral with eight separate Forward blocks works but misses par, while four blocks with counts clears it. That gap between "it works" and "it is concise" is the loop lesson, made visible without any syntax to learn.

Expansion, then interpretation

expand() flattens the block list into a list of single steps, each remembering the index of the block it came from. The interpreter then walks that flat list on a setInterval, applying one step per tick — which is what makes the execution watchable rather than instantaneous, and is also how a real stepping debugger works. Because each step retains its source block index, the UI can highlight the currently executing block and, on a crash, mark the exact block that failed. Separating expansion from execution keeps both halves simple: the interpreter never has to think about repeat counts, and the expander never has to think about walls.

Direction as modular arithmetic

Heading is stored as an integer 0-3 indexed into a DIRS table of row/column deltas. Turning right is (dir + 1) % 4 and turning left is (dir + 3) % 4 — adding three rather than subtracting one, which avoids the negative-modulo trap where (0 - 1) % 4 evaluates to -1 in JavaScript rather than 3. The robot's on-screen rotation comes from the same integer via rotate(dir * 90deg), so the sprite can never point somewhere the model disagrees with.

Failure that names the cause and the culprit

applyStep() returns a result object rather than a boolean: { ok: false, why: 'Hit a wall' } or 'Drove off the edge'. The runner stops the interval immediately on a failure, adds a crash class to the robot, marks the offending block red, and prints both the reason and the block number. Distinguishing the two failure modes matters pedagogically — driving off the edge means the program went too far, hitting a wall means it turned too late, and those are different fixes.

A step ceiling as a runaway guard

Because repeat counts can reach nine per block, a program can easily describe hundreds of steps. MAX_STEPS rejects any program whose expanded length exceeds the ceiling before execution begins, which is both a practical guard against a several-minute animation and an honest introduction to the idea that a loop needs a bound. Levels are plain ASCII maps — . floor, # wall, S start, G goal — parsed at load, so adding a level means drawing one, not writing coordinates.