← FC Coder · HomePhase 04 · Lesson 46 · 60 min
Lesson46
Phase Four · Game · Matchday 46 · States and Edges
状态机 baby
idle / running / jumping
Today's 3 Jobs · 今天这三件事
- 01PlayerState union: idle/running/jumping三态
- 02transition 纯函数 + dispatchPhase 25 心法
- 03🌟 ai-elements 状态图可视化节点 + 边
哈兰德能动 · 但永远一姿势。今天三态:idle / running / jumping + 转移规则。纯函数 transition(第 25 课心法)+ ai-elements/node 可视化。状态机是游戏 AI / 工作流 / UI 流程的根。
Concept
状态 + 转移
type PlayerState = 'idle' | 'running' | 'jumping';
idle
站着
running
方向键
jumping
空格 · 0.5s 落
Half 2
type · wire · 状态图
01Union type + transition
01Min
Cursor + pnpm dev
老三件套。
02Min
type PlayerState = 'idle' | 'running' | 'jumping'
union type。
03Min
纯函数 transition(current, event) → next
switch on event。jump → jumping · land → idle · move → running(if !jumping) · stop → idle。
02键盘 dispatch · 不同样式
04Min
KeyboardGame 加 state + dispatch in keydown/keyup
ArrowKey → move/stop · Space → jump · setTimeout 500ms → land。
05Min
不同 state 不同 className
idle 默认 · running scale-95 · jumping scale-125 -translate-y-4。
03AI 状态图
06Min
AI Pair: 用 ai-elements/node + edge 显示状态图
Cmd+K · '3 节点(idle/running/jumping)+ 4 边 · 当前 state 高亮'。
07Min
📸 截图状态机
Phase 4 第 6 张战利品。
讲给爸爸听
3 题
01状态机 vs 单 boolean?Hint ↓
多状态 + 转移规则 · 不漏边界(比 isRunning + isJumping 组合靠谱)。
02transition 纯函数好处?Hint ↓
测试 + 25 课心法 · 同输入同输出。
03ai-elements/node 看什么?Hint ↓
状态图 · 当前 state 高亮 · 边显示转移规则。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0