← FC Coder · HomePhase 04 · Lesson 53 · 60 min
Lesson53
Phase Four · Game · Matchday 53 · Save Game
游戏存档
退出再来 · 接着玩
Today's 3 Jobs · 今天这三件事
- 01GameSnapshot type · 该存什么状态 + 数据
- 02useLocalStorage 每秒存Phase 2 hook 复用
- 03🌟 启动询问继续 / 重开退出再来
用 Phase 2 第 23 课的 useLocalStorage hook · 一行调用 · 每秒存 snapshot。type 限定该存什么。可选:Phase 3 登录用户 · 同步到 DB 跨设备。复用心法:好 hook 跨 Phase 用。
Concept
snapshot + 复用 hook
// 复用心法 · 跨 Phase
存什么
status / score / timeLeft / positions / ball
频率
每秒 · 不每帧
hook
useLocalStorage(P2 #23)
Half 2
type · save · resume · DB 同步
01GameSnapshot 类型
01Min
Cursor + pnpm dev
老三件套。
02Min
type GameSnapshot 加 status/score/timeLeft/positions/ball
明确 type 防乱。
02存 + 恢复
03Min
useLocalStorage<GameSnapshot|null>('fc-coder:game', null)
Phase 2 第 23 课的 hook · 直接用。
04Min
setInterval 1s 存 snapshot if playing
不每帧 · 性能。
05Min
启动 useEffect 检查 · 有 snapshot → '继续' 按钮
无 → '开始挑战'。
03(可选)DB 同步
06Min
(可选)AI Pair: 登录后同步 snapshot 到 DB users.gameState
Cmd+K · 'baby auth 用户 · server action 写 gameState JSON'。
07Min
📸 截图退出再来继续
Phase 4 第 13 张战利品。
讲给爸爸听
3 题
01为什么不每帧存?Hint ↓
性能 + localStorage 写慢。每秒够用。
02跨设备继续需要什么?Hint ↓
Phase 3 baby auth + DB users.gameState 字段。
03存太多 state 会乱吗?Hint ↓
用 type 限制 · 只存必要(rAF id 不存)。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0