← FC Coder · HomePhase 04 · Lesson 41 · 60 min
Lesson41
Phase Four · Game · Matchday 41 · Pick The Renderer
Phase 4 启动
选 DOM 不选 Canvas
Today's 3 Jobs · 今天这三件事
- 01决策 DOM vs Canvas · DOM 胜学曲线
- 02transform 平移 PlayerCard demoGPU 友好
- 03🌟 AI Pair 模式上线P4 起
骨架 plan D10:DOM + CSS animation。学曲线 0 · 60fps 几百元素够用。Canvas 留给 Phase 5 物理 / WebGL。AI 升级 Pair(plan D14)。今天写选型文档 + 拖拽 demo。
Concept
DOM vs Canvas 对比
.player { transform: translate(100px, 50px); }
学习
DOM 0 / Canvas 高
节点
DOM 几百 / Canvas 几千
调试
DOM DevTools / Canvas 黑盒
Half 2
选型 · demo · AI Pair
01选型 + 文档
01Min
Cursor + pnpm dev
老三件套。
02Min
白板列 DOM vs Canvas 4 行对比
学习成本 / 节点上限 / 调试 / 性能。DOM 胜。
03Min
写 docs/decisions/p4-renderer.md 记录
1 页决策日志 · Phase 4 全程依据。
02DraggablePlayerCard demo
04Min
写 <DraggablePlayerCard /> · transform translate(x, y)
鼠标按下记起点 · mousemove 更新 transform · mouseup 停。
05Min
📸 拖拽顺滑 · 截图
看 60fps · 不卡。
03AI Pair 体验
06Min
AI Pair:让 AI 写一个 <Rotatable />(滚轮转角度)
Cmd+K 给 AI 提示 · 它写 · 爸爸看关键(只看选型)· 实现细节 AI 多。
07Min
📸 截图 + decision doc
Phase 4 第 1 张战利品。
讲给爸爸听
3 题
01DOM vs Canvas 选?Hint ↓
DOM(学曲线 0 / 调试容易 / 够用)。
02transform 为什么不 left/top?Hint ↓
GPU 加速 · 60fps 友好。
03AI Pair 和 Supervised 差?Hint ↓
Pair 不需爸爸逐行。关键决策仍看。
温度计
给「选 DOM」打分
今天难度Difficulty
0
今天开心Fun
0