Current Patterns in Interactive Programming Games

1. Location and Destination

The learner should always know where they are on the learning path, and what their destination is.

This one isn't specific to visual programming – it's a well-established principle of UX design that people need to know where they are, where they've been, and where they're headed.

Making this clear with a visual progress bar is common on learning platforms when we're trying to coax people through the long, hard journey of learning a new programming language or framework. It helps keep them motivated and feel a sense of regular progress.

---

2. Embodied Space over Symbols

Instead of one-dimentional abstract symbols and signs, use our embodied understanding of up, down, left, right, front, and back to map concepts to two-dimentional space.

3. Immersive Focus

4. Invitation to Explore

5. Direction Connections

Create a direct, instant association between syntax commands and their effects

This is very similar to Bret's 'Read the Vocabulary'

In traditional programming interfaces there's a significant lag between writing syntax, waiting for code to compile, and seeing the change in a browser or printed logs. It's often unclear what exactly changed, and what part of the code changed it.

6. Keep It In Context

7. Cry for Help

8. Revisit the Past

9. Put it in Your Pocket

10. Flow Over Time

11. Compare and Contrast

12. Brownie Points

---

Flexbox Froggy and Grid Garden

and

Grid Garden

are built by

Codepip

and both teach CSS layout techniques through live reactive demos. Every character you type into the code editor has an immediate reaction in the illustrated demo.
This shortens the lag between action and reaction we usually have to deal with when waiting for code to compile, and makes it easier to figure out what each command does.

The same company made

which takes a similar approach to teach CSS selectors. Every command you type instantly highlights what's being selected on the illustration.

Vim Adventures

uses the style of a platform game to help learners get comfortable with the essential commands of Vim. Making the metaphor of physical space more obvious by adding pathways and directions helps you think about Vim's interface as a spatial area instead of a regular linear text editor.

Method of Action

While not strictly programming-related, the Bezier Game, the Boolean Game, and the Kerning Game...