How the Editor Works

Every game is made of shapes — cubes and circles you add yourself. Click + Cube or + Circle at the top to add one. Each shape gets its own tab, so you can click between them.

When a shape is selected, you'll see:

• Position and size — X, Y, Width/Height (or Size for circles), and Color. Change these and click Save & Run to see it move.
• The code editor — a small box of code that runs every single frame, about 60 times a second. This is the only code you write.
• A live preview — on the right. It updates every time you save.
• The cheat sheet — a strip along the bottom of the code editor listing everything you can type.

Every shape's code looks like this:

export function update(self, keys) {
    // your code goes here
}

self is this shape — the one whose tab you're on. keys tells you what's being pressed on the keyboard. You don't need to set these up — they're just there, every time.

Click Save & Run any time to see your changes. Made a shape you don't want anymore? Select its tab and click Delete next to the color picker.

The rest of these lessons go through everything you can do inside update() — moving, colors, bumping into things, messages, and more.