← FC Coder · HomePhase 04 · Lesson 48 · 60 min
Lesson48
Phase Four · Game · Matchday 48 · 30 Seconds
计分 + 倒计时
30 秒挑战
Today's 3 Jobs · 今天这三件事
- 01game status: idle/playing/ended三态
- 02rAF 计时 30 秒挑战60fps 平滑
- 03🌟 结束界面 · 终分 + 重置再来一次
状态机心法继续 · 游戏三态 idle/playing/ended。rAF 计时(比 setInterval 平滑)+ 终分屏 + 再来一次按钮。这节课你能给爸爸挑战分数了。
Concept
状态机 + 派生 timeLeft
// 心法传承 · 派生不存重复
三态
idle · playing · ended
派生
timeLeft = 30 - elapsed
结束
elapsed ≥ 30 → setStatus('ended')
Half 2
status · timer · UI · 难度
01三态 + 计时
01Min
Cursor + pnpm dev
老三件套。
02Min
type GameStatus = 'idle' | 'playing' | 'ended'; useState<GameStatus>('idle')
状态机心法。
03Min
rAF 内算 elapsed · setTimeLeft · 0 → ended
startTimeRef · now - start。
02三态 UI 切换
04Min
三态 UI: idle 按钮 / playing 游戏区 / ended 终分
条件渲染。
05Min
球门进球 +5 · 球员碰球 +1
改 47 课逻辑。
03AI 难度选择
06Min
AI Pair: 难度选择(30/60/90s)
Cmd+K · '加 difficulty state · 影响初始 timeLeft'。
07Min
📸 截图 ended 终分
Phase 4 第 8 张战利品。
讲给爸爸听
3 题
01为什么 timeLeft 用 rAF 不 setInterval?Hint ↓
60fps 平滑 · setInterval 会飘(浏览器节流)。
02status 三态 vs 一堆 boolean?Hint ↓
状态机心法 · 不漏边界(46 课传下来)。
03再来一次怎么重置?Hint ↓
setStatus('idle') · setScore(0) · setTimeLeft(30)。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0