← FC Coder · HomePhase 04 · Lesson 47 · 60 min
Lesson47
Phase Four · Game · Matchday 47 · Collide
碰撞检测 baby
AABB · 4 个不等式
Today's 3 Jobs · 今天这三件事
- 01collides 纯函数 · AABB 4 不等式矩形对矩形
- 02球 + 边界 + 球员碰撞反弹 / 进球
- 03🌟 加球门 · 真进球得分
能跑能跳但穿墙穿球员 —— 今天接上碰撞。AABB(轴对齐矩形)· 4 个不等式 · 纯函数。球边界反弹 · 球员撞球得分 · 加球门。
Concept
AABB 4 不等式
type Box = { x: number; y: number; w: number; h: number }
纯
function collides(a, b)
4 不等式
a.x < b.x+b.w && a.x+a.w > b.x && ...
效果
球碰墙反弹 · 球碰球员得分
Half 2
AABB · 球 · 球门 · 多球
01AABB 函数
01Min
Cursor + pnpm dev
老三件套。
02Min
lib/game.ts · export function collides(a, b: Box): boolean
4 个不等式。纯函数。
02球 + 边界 + 球员
03Min
game 加 ball state · rAF 更新 x/y
vx/vy 速度 · 边界反弹 *= -1。
04Min
if (collides(ballBox, playerBox)) setScore + 重置球
得分。重置随机位置。
03球门 + AI 多球
05Min
加球门(右边矩形)· 球进球门大分
+5。
06Min
AI Pair: 加 4 个球同时
Cmd+K · '改成 4 球 · 每个独立状态'。
07Min
📸 截图进球瞬间
Phase 4 第 7 张战利品。
讲给爸爸听
3 题
01AABB 是什么?Hint ↓
轴对齐矩形检测 · 4 个不等式。
02为什么不用真圆?Hint ↓
圆 / 多边形数学复杂。AABB 90% 场景够用。
03collides 为什么是纯函数?Hint ↓
易测。心法。25 课传下来的。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0