第13课：碰撞检测
进度 0/30
💥
碰撞检测
所有碰撞的幕后真相：矩形碰矩形
📖知识引入
📦判定盒：看不见的快递箱
每个游戏物体身上都套着一个隐形矩形，叫判定盒（Hitbox）。碰撞检测不管图案多漂亮，只问一句话：两个矩形重叠了吗？
🤝重叠=撞上了
两个矩形相遇只有四种姿势：完全分开、左右相交、上下相交、完全重叠。判断方法 surprisingly 简单：横竖方向都有交集，就算撞上。
🎯判定盒可以「手下留情」
为什么有时擦边不算撞？高手设计会把判定盒做得比图案小一圈：视觉上「擦到了」，判定上「没碰到」——玩家会觉得手感特别公平。
⚡一秒查60遍
游戏每一帧（每秒约60帧）都要检查所有物体两两是否碰撞。角色多的时候计算量不小，所以判定盒都是简单的矩形，算得飞快。
🤖碰撞函数一句话搞定
「帮我写一个矩形碰撞检测函数」——AI秒出标准答案，全世界的游戏都在用几乎同一份。会用、会改，比会背强。
💡
碰撞检测的真相：两个看不见的矩形碰没碰上！
🔍肉眼看不见的碰撞现场
// 矩形碰撞检测：全世界游戏都在用的四连问
function isCrash(a, b) {
return a.x + a.width > b.x && // A的右边超过B的左边
a.x < b.x + b.width && // A的左边没过B的右边
a.y + a.height > b.y && // A的下边超过B的上边
a.y < b.y + b.height; // A的上边没过B的下边
}
// 每帧检查：主角碰到金币了吗？
if (isCrash(player, coin)) {
score += 10; // 加分！
playSound('叮!'); // 音效！
coin.respawn(); // 金币换新位置
}主角和金币各自的判定盒：
金币的盒子
┌──────┐
│ 🪙 │
└─┬────┘
│ 撞上了！
┌───▼──┐
│ 🏃 │ <-主角的盒子
└──────┘判断两盒是否重叠， 只看四个条件：
A右边 > B左边？ ✔ A左边 < B右边？ ✔ A下边 > B上边？ ✔ A上边 < B下边？ ✔
四问全YES→撞上了！💥
任何一问NO→没撞，继续飞
判定盒「手下留情」的秘密：
图案大小： 🚶←──────→ 判定盒大小：🚶←───→ (小一圈)
子弹贴着衣角飞过—— 玩家：「好险！刺激！」 而不是：「明明没碰到吧？！」
🎯小测验
第1题：碰撞检测实际上检测的是？
第2题：为什么有些游戏擦边不算被撞？
第3题：「帮我写一个矩形碰撞函数」让AI写，合理吗？
📝本课知识点
- ✓每个物体都有隐形判定盒
- ✓重叠=碰撞，看四个条件
- ✓判定盒小一圈，手感更公平
- ✓每秒约60帧重复检测
- ✓碰撞函数可让AI代劳
第13课完成！继续探索下一课吧 🚀