Basic

What is beyond the canvas

Drawing is the easy half of a game. The hard half is the state: what is true right now, what makes it change, and what the rules allow. A game that only draws is a demo. A game has a loop where state, rules, and drawing meet, and the bugs live in the state.

What you will see

The whole world printed as one value. If it cannot be printed, state is tangled with paint.

About 1 min of reading

Try It

Separate state from paint in one file

Write the state as data

printf 'const world = { player: { x: 100, y: 100, vx: 0, vy: 0 }, items: [], t: 0 }; ' | tee game/state.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

One object that can be printed and read back. Nothing in it is a drawing call.

Write the rules as a pure step

printf 'function step(w) { w.player.x += w.player.vx; w.player.y += w.player.vy; return w; } ' | tee -a game/state.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

A function that reads and writes only the object. No canvas call inside it.

Write the draw as a reader

printf 'function draw(w) { /* ctx.fillRect(w.player.x, w.player.y, 16, 16) */ } ' | tee -a game/state.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

A function that only reads the object. It must not assign to w.

Print the state to prove it is readable

node -e 'const w=require("./game/state.js"); console.log(JSON.stringify(w.world))' 2>/dev/null || node -e 'console.log("state must be printable as JSON")'

Before you run it, say out loud what it will print. Then open the answer.

What it prints

The whole world printed as one value. If it cannot be printed, state is tangled with paint.

Do not store a position only in a drawing call. The rules need to read it, and a canvas cannot be read back.

Data Flow

Input to paint through state

1 Read the input for this frame

↓

2 Rules read state and produce new state

↓

3 Drawing reads the new state

↓

4 Paint is a function of state

Why this works

Where the bugs are

In the rules and the state, not the drawing. A wrong number in the state is a wrong game; a wrong number in the drawing is a wrong picture.

What a frame is not

A frame is not a unit of time. Frames vary in length, and anything that depends on frame count depends on the machine.

Examples

The three parts

State is the world as data. Rules read the state and change it. Drawing reads the state and paints it. Only the third part is the canvas.

Why state is data

If the position of a thing lives in a variable the drawing sets, the rules cannot read it back. State has to be readable, and that means separate from the paint.

The one loop

Read input, update state by the rules, draw the state. Every frame is those three steps in that order. The order is the thing that makes a game deterministic.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

Next Lesson

A state machine for anything with modes

A state machine for anything with modes →