← FC Coder · HomePhase 04 · Lesson 45 · 60 min
Lesson45
Phase Four · Game · Matchday 45 · You Are The Player
键盘 + 第一个 game
Arrow 控制哈兰德
Today's 3 Jobs · 今天这三件事
- 01keydown/keyup Set 装按下集合多键同时
- 02速度向量 + rAF 移动vx vy 累加
- 03🌟 Arrow 键控制哈兰德第一个 game
球自己飘 → 你按键控制。Set 装按下键(多键同时)+ 速度向量 vx/vy + rAF 移动 + 边界 clamp。第一个真 game · 控制哈兰德在场上跑。
Concept
Set + 速度向量
// useRef keys · 不触发重渲
记按下
new Set<string>()
速度
if(keys.has('ArrowLeft')) vx -= 1
位置
setPos(p => {x: p.x + vx*dt*0.3, ...})
Half 2
听 · 算 · 渲染 · 双玩家
01键盘监听
01Min
Cursor + pnpm dev
老三件套。
02速度 + rAF 移动
02Min
components/lab/keyboard-game.tsx · useState pos + useRef keys Set
addEventListener keydown/keyup · Set.add/delete。
03Min
rAF tick 算 vx/vy · setPos clamp 边界
Math.max/min。dt 0.3 = 300px/sec。
04Min
app/game/page.tsx 嵌入 · Arrow 键控制
🌟 第一个 game。
05Min
同时按 ↑+→ 看斜着移动
Set 支持多键。
03AI WASD 第二玩家
06Min
AI Pair: 加 WASD 第二玩家(蓝色 福登)
Cmd+K · '加 player2 用 WASD' · AI 复制逻辑改键名。
07Min
📸 截图双玩家移动
Phase 4 第 5 张战利品。
讲给爸爸听
3 题
01Set 不用单变量?Hint ↓
同时按多键支持。↑+→ 斜着。
02ref 和 state 差?Hint ↓
ref 不触发重渲 · 适合按下集合。state 用 setPos 触发渲染。
03transition-none 为什么?Hint ↓
每帧 setPos · 不要 CSS 再叠加平滑(会跳)。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0