球体的交互魔法 - 鼠标与条件判断

概念介绍

上一节课我们让球动了起来，现在我们要让球能够响应我们的操作！交互是游戏和创意编程的核心，它让你的作品能够与用户对话。在p5.js中，最常用的交互方式就是鼠标操作。

学习目标

• 掌握鼠标事件：mousePressed(), mouseMoved(), mouseDragged()
• 学会距离计算：dist()函数检测两点距离
• 理解条件交互：if语句判断鼠标与球的关系
• 学习交互状态：点击、悬停、拖拽的不同反应
• 创建真正的交互体验

---

🖱️ 鼠标事件基础

鼠标位置变量

p5.js提供了几个有用的鼠标位置变量：

• mouseX - 鼠标当前X坐标
• mouseY - 鼠标当前Y坐标
• pmouseX - 上一帧鼠标X坐标
• pmouseY - 上一帧鼠标Y坐标

🔄 与基础课程的连接

还记得基础课程中学的条件判断吗？

• 基础课程：if (score > 100) { console.log("胜利"); }
• 交互课程：if (distance < 30) { ball.color = "red"; }

现在条件判断不再是抽象的，而是控制具体的交互效果！

---

📏 距离计算

使用dist()函数

dist(x1, y1, x2, y2) 计算两点之间的距离：

手动计算距离（了解原理）

---

🎯 鼠标事件函数

mousePressed() - 点击事件

鼠标状态变量

---

💻 实践练习

练习1：点击变色 🎨

点击球时改变颜色：

练习2：悬停变大 🔍

鼠标悬停时球变大：

练习3：拖拽球 ✋

可以拖动球的位置：

练习4：点击创建球 ➕

点击画布创建新球：

练习5：双击删除球 ❌

双击删除最近的球：

练习6：状态切换球 🔄

点击球切换不同状态：

练习7：力场球 ⚡

球周围有力的场，影响其他小球：

练习8：交互场景 🎮

创建一个完整的交互场景：

---

🎯 本课重点总结

核心概念

• ✅ 鼠标位置：mouseX, mouseY获取当前鼠标坐标
• ✅ 距离计算：dist()函数计算两点间距离
• ✅ 碰撞检测：通过距离判断是否"碰到"球
• ✅ 鼠标事件：mousePressed(), mouseDragged(), mouseReleased()

交互类型

• ✅ 点击事件：鼠标点击时的响应
• ✅ 悬停检测：鼠标是否在球上方
• ✅ 拖拽操作：按下并移动鼠标
• ✅ 状态管理：跟踪球的交互状态

与基础课程的连接

• ✅ 条件判断：if语句在交互检测中的应用
• ✅ 布尔逻辑：true/false状态控制交互
• ✅ 数据结构：对象存储复杂的球状态

---

🚀 下一步

恭喜你！你已经学会了让球能够与你交互！你掌握了：

• 🖱️ 鼠标交互：点击、悬停、拖拽的完整处理
• 📏 距离检测：用dist()函数实现碰撞检测
• 🎮 状态管理：跟踪和管理交互状态
• 🎨 视觉反馈：根据交互状态改变外观

下一课我们将学习：

• 🔄 循环应用：用for循环管理多个球
• 📦 数组管理：球的家族和群体行为
• 🎯 批量操作：同时控制多个球
• 🌊 群体效果：创建令人惊叹的球群动画

准备好从一个球扩展到球的世界了吗？

p5.js官方参考

• Reference: Mouse
• Reference: dist()
• Reference: mousePressed()
• Reference: mouseDragged()
• Reference: mouseReleased()
• Reference: doubleClicked()