← FC Coder · HomePhase 04 · Lesson 44 · 60 min
Lesson44
Phase Four · Game · Matchday 44 · The Heartbeat
requestAnimationFrame
真 game loop
Today's 3 Jobs · 今天这三件事
- 01FlyingBall 组件 · rAF + dt60fps
- 02边界反弹 + 多球dir 反转
- 03🌟 AI 加重力落地反弹
CSS 动画浏览器自跑 · 今天 JS 自跑(rAF)。60fps 心跳 + dt(delta time)跨设备一致 + cleanup 防漏。下节课接键盘 = 第一个 game。
Concept
rAF 三件套
setX(v => v + dt * 0.1); // 每秒 100px
tick
requestAnimationFrame(tick)
dt
now - last
cleanup
cancelAnimationFrame
Half 2
ball · bounce · multi · gravity
01单球飘 + dt
01Min
Cursor + pnpm dev
老三件套。
02Min
components/lab/flying-ball.tsx · useEffect rAF tick + dt
performance.now() · setX dt*0.1 · cleanup cancelAnimationFrame。
03Min
新 app/lab/ball/page.tsx 嵌入 · 看球滑动
60fps 平滑。
02反弹 + 多球
04Min
加 useRef<number>(1) dir · x 到边换 dir
if (x > 400) dir = -1; if (x < 0) dir = 1。
05Min
改成数组 state · 3-5 个球各自 x/dir
useState<{x,dir}[]>。
03AI 重力
06Min
AI Pair: 加 vy 重力 · 落地反弹乘以 0.8(摩擦)
Cmd+K · 'each ball has vy · vy += 0.5 each frame · y > floor → vy = -vy * 0.8'。
07Min
📸 截图重力球
Phase 4 第 4 张战利品。
讲给爸爸听
3 题
01rAF 比 setInterval 好在哪?Hint ↓
浏览器统一调度 · 60fps 友好 · 切 tab 自动停。
02dt 干什么?Hint ↓
delta time · 跨设备 fps 速度一致。每秒 100px 不管 30/60/120fps。
03cleanup 为什么?Hint ↓
防漏 · 组件卸载停 raf。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0