儿童小游戏：鲨鱼抓小鱼

角色 (Role):

你是一位专业的HTML5游戏开发AI助手。

任务 (Task):

创建一个完整、可交互的HTML、CSS和JavaScript单文件网页游戏，名为“鲨鱼抓小鱼!”。此游戏专为6岁左右儿童设计，应包含以下核心特性和行为：

游戏概念与主题:
核心玩法：玩家通过鼠标控制鲨鱼，在2D水域中追捕并“吃掉”小鱼群。
目标用户：6岁儿童，因此视觉风格、交互和难度需适宜。
视觉与界面 (UI/UX):
整体风格: 色彩鲜艳、卡通可爱。背景为天蓝色/浅海蓝色，画布（游戏区域）为深一点的海蓝色。
角色形象:
小鱼 (Boids): 多个小型、颜色各异（主要是蓝色/青色系）的卡通鱼形，有眼睛。
鲨鱼: 单个、比小鱼明显更大的卡通鲨鱼形象（例如灰蓝色身体，红色眼睛，有嘴巴）。
画布: 响应式尺寸，适应不同屏幕。
UI元素:
醒目游戏标题：“鲨鱼抓小鱼!”
清晰的得分板，实时显示得分。
简洁的游戏玩法说明：“用鼠标控制大鲨鱼，去抓蓝色的小鱼吧！”
控制面板: 包含以下可调滑块，并实时显示其值：
小鱼数量 (NumBoids)
鲨鱼速度 (SharkSpeed)
小鱼反应速度 (FishReaction - 影响躲避强度)
“重新开始!” (Reset) 按钮。
特效: 小鱼被吃掉时，在其位置产生若干上升的小气泡动画。
小鱼 (Boids) 行为逻辑 (基于Boids算法，但需针对儿童游戏优化):
群体行为:
排斥 (Separation): 避免与附近小鱼过于拥挤，保持一定间距。
对齐 (Alignment): 倾向于与附近小鱼朝同一方向游动。
聚集 (Cohesion): 倾向于朝附近小鱼群的中心位置移动。
个体行为:
漫游 (Wander): 核心行为。每条小鱼都应有持续且显著的内在随机游动趋势，即使没有外部刺激（如鲨鱼）或群体影响，也能独立、活跃地改变方向和游动，以有效防止形成静止不动的鱼团。此行为的强度应足以打破过于稳定的群体结构。
躲避鲨鱼 (Flee): 当鲨鱼进入其感知范围时，产生强烈的躲避行为，迅速逃离。
躲避边缘 (Avoid Edges): 当接近画布边缘时，产生较强的转向力，引导其游向画布中心，防止长时间卡在边缘。
边缘传送 (Edge Wrapping): 作为辅助，如果小鱼完全移出画布，则从对应另一边重新进入。
鲨鱼行为逻辑:
控制: 由鼠标在画布内的位置实时控制其目标游动方向。
移动 (Seek): 平滑地游向鼠标指针位置。
到达行为: 当鲨鱼非常接近鼠标指针（例如小于其自身尺寸的一半）且鼠标静止时，鲨鱼应平稳减速并停止，避免在目标点来回抖动。停止时保持其朝向。
游戏机制与交互:
捕食: 当鲨鱼与小鱼发生碰撞（视觉上重叠）时，视为小鱼被“吃掉”。
计分: 每吃掉一条小鱼，得分增加。
音效:
使用 Tone.js 库。
每当鲨鱼吃掉一条小鱼时，播放一个简短、有趣的“吃掉”或“气泡”音效（例如随机的C4-F4范围内的短音符）。
音频上下文应在用户首次与页面交互（如点击）后初始化，以符合浏览器策略。
小鱼补充: 当小鱼数量因被捕食而减少到一定程度（例如少于初始数量的一半，且总数较少时），应自动、少量地补充新的小鱼，以维持游戏的可玩性。
技术实现:
使用HTML、CSS (可内联或使用Tailwind CSS CDN) 和纯JavaScript。
引入Tone.js (CDN)。
所有行为参数（如各种力的权重、感知半径、速度、转向力等）需经过精心调校，以实现生动活泼的小鱼个体运动、自然的鱼群形态，并确保上述反抱团、边缘处理和鲨鱼停止行为的有效性。

格式 (Format):

生成一个独立的、功能完整的HTML文件，包含所有必要的CSS样式和JavaScript逻辑。确保代码结构清晰、注释良好（特别是关键逻辑部分）。