圈地大作战AI · Claude 3.5

核心玩法循环与机制

逐刻玩法：

• 玩家控制一个彩色方块，在一个平坦的 3D 竞技场中以恒定速度持续移动
• 在屏幕任意位置滑动即可改变方向（360° 自由移动，不受网格限制）
• 离开自己的彩色领地会在身后拉出一条脆弱的"活动轨迹"
• 返回自己的领地以闭合环路，并占领其内部的一切（洪水填充算法）
• 躲避敌方的活动轨迹（即死），同时设法切断它们的轨迹以将其淘汰
• 与 3-5 个遵循相同规则的 AI 机器人竞争
• 当玩家的领地达到 100% 或死亡时，本局结束

进阶与吸引力：

• 领地百分比不断更新，制造紧张感和目标
• 实时排行榜展示竞争排名
• 风险/回报的平衡：更大的环路 = 更多领地，但脆弱轨迹也更长
• 策略深度：何时扩张、何时保守，何时去猎杀敌方轨迹

胜负条件：

• 胜利：占领竞技场的 100%（带数据统计的胜利画面）
• 失败：撞上敌方的活动轨迹（死亡画面显示最终百分比，含"再玩一次"按钮）
• 机器人死亡后重生；玩家从一小块领地重新开始

可重复游玩性：

• 对局节奏快（通常 2-5 分钟）
• AI 交互带来涌现式玩法
• 记录个人最佳百分比
• 每局采用不同的策略

起步范围

首个版本必须包含：

• 3D 竞技场（50x50 瓦片网格），带边界墙
• 玩家方块，具有持续移动和滑动转向
• 领地归属系统（本方领地 vs. 中立）
• 活动轨迹的渲染与追踪
• 环路闭合检测与洪水填充占领
• 碰撞检测：玩家 vs. 敌方轨迹（死亡）、玩家 vs. 边界（弹开/停止）
• 3 个具有基础行为的 AI 机器人（用小环路扩张，避开长轨迹）
• HUD：领地百分比计数器（顶部居中）、简洁排行榜（右上角）
• 死亡画面，含最终百分比和"再玩一次"按钮
• 简洁的视觉风格：平面着色的瓦片、彩色方块、轨迹丝带
• 镜头：低角度等距视角跟随玩家，带轻微延迟

推迟到未来迭代：

• 高级 AI 行为（猎杀轨迹、策略性撤退）
• 道具或特殊能力
• 多种竞技场尺寸或形状
• 外观自定义（方块皮肤、轨迹特效）
• 音效与背景音乐
• 领地占领的粒子特效
• 教程或新手引导流程

游戏视角

3D 等距/抬高俯视

• 镜头以约 45° 角俯视竞技场
• 抬高到足以展现瓦片和方块的 3D 纵深感
• 并非完全平面俯视——略带透视以强调 3D
• 镜头以平滑插值跟随玩家方块（带轻微延迟以增添精致感）
• 固定缩放级别（首个版本无需双指缩放）

游戏世界与关卡设计

竞技场布局：

• 50x50 的瓦片网格（共 2500 块瓦片）
• 每块瓦片在 3D 空间中为 1 单位见方
• 四条边缘均有可见的墙壁围合
• 平坦的游戏表面位于 y=0
• 所有瓦片初始均为中立（浅灰/白色）

起始位置：

• 玩家在随机的边缘位置生成，带 3x3 的本方领地
• 3 个 AI 机器人在其他边缘位置生成（均匀分布）
• 生成点之间保持最小距离以防止立即冲突

视觉分区：

• 中立领地：浅灰/白色瓦片（未占领）
• 已占领领地：以玩家/机器人颜色平面着色的瓦片（略微抬高，y=0.1）
• 活动轨迹：与颜色匹配的细窄抬高丝带（y=0.2）
• 边界墙：环绕四周的简单白/灰色墙壁（高度 = 2 单位）

编辑模式设计

可编辑属性：

• 玩家颜色：玩家方块和领地的 RGB 取色器
• 机器人数量：滑块（1-5 个机器人）
• 机器人颜色：为每个机器人配备取色器
• 移动速度：滑块（0.5倍 - 2倍，默认 1倍）
• 竞技场尺寸：下拉菜单（小=30x30，中=50x50，大=70x70）
• 镜头角度：滑块（30° - 60°，默认 45°）

约束：

• 颜色必须有足够的对比度（最小亮度差异）
• 速度范围防止无法游玩的极端值
• 竞技场尺寸受限以保持移动端性能
• 机器人数量上限为 5 以防止过于拥挤

编辑模式界面：

• 右侧面板，含可折叠分区
• 更改实时预览
• 「恢复默认」按钮
• 更改立即应用（无需「应用」按钮）

操作设计

移动端（主要）：

• 滑动转向：在屏幕任意位置滑动以设定新方向
  • 向上滑 = 向前移动（远离镜头）
  • 向下滑 = 向后移动（靠近镜头）
  • 向左/右滑 = 向左/右转
  • 斜向滑动 = 斜向移动
  • 无摇杆控件——整个屏幕都是滑动区域
• 移动：以恒定速度持续移动（无加速/减速）
• 方向改变：对滑动即时响应，配平滑的旋转动画
• 触控处理：
  • 追踪触摸起始位置
  • 在触摸移动时计算滑动向量
  • 归一化为单位向量作为方向
  • 忽略极小的滑动（< 10px 阈值）
  • 一次只处理一个触点（忽略多点触控）

桌面端（次要）：

• WASD 或方向键：直接的 8 方向移动
  • W/上 = 向前，S/下 = 向后
  • A/左 = 向左，D/右 = 向右
  • 斜向 = 组合按键（W+A = 前左）
• 鼠标：点击并拖动以设定方向（类似滑动）
• 移动速度与行为与移动端完全相同

输入状态管理：

• 将当前方向存储为归一化向量
• 每帧根据方向 × 速度更新玩家速度
• 窗口失焦时清除输入状态
• 阻止方向键的浏览器默认行为

无需指针锁定：

• 游戏不需要鼠标视角或 FPS 式镜头控制
• 镜头相对于玩家位置固定

胜负条件

胜利条件：

• 占领竞技场 100% 的领地
• 触发胜利画面叠层，含：
  • "Victory!" 消息
  • 最终耗时
  • "Play Again" 按钮（大尺寸，便于拇指操作）

失败条件：

• 玩家方块撞上任何敌方活动轨迹
• 触发死亡画面叠层，含：
  • "Defeated!" 消息
  • 已占领的最终领地百分比
  • 击杀者的名称/颜色（如可辨识）
  • "Play Again" 按钮（大尺寸，便于拇指操作）

重生行为：

• 玩家：重置到一个新的随机边缘位置，带 3x3 领地
• 机器人：死亡 3 秒后在随机边缘重生
• 死亡时失去先前所有领地

边界碰撞：

• 玩家不会因撞到竞技场墙壁而死（Paper.io 2 规则）
• 撞到边界时方块停止或轻微弹开
• 玩家转身离开时，轨迹从边界点继续延伸

安全区：

• 玩家在自己已占领的领地上不会死亡
• 玩家穿越自己已完成的领地不会死亡
• 只有活动轨迹（未闭合的环路）才是致命的

AI 机器人行为

基础 AI（首个版本）：

每个机器人以简单的状态机运作：

1. 扩张状态（默认）：

   • 从已占领领地向外移动
   • 绘制小型矩形环路（每边 5-10 块瓦片）
   • 返回领地以闭合环路
   • 当轨迹长度 > 15 块瓦片时转入撤退状态

2. 撤退状态：

   • 转向最近的已占领领地
   • 直接返回以闭合环路
   • 环路闭合后转回扩张状态

3. 躲避状态（由靠近触发）：

   • 检测 5 格半径内的其他轨迹
   • 转向远离检测到的轨迹
   • 脱离危险后返回先前状态

机器人生成与重生：

• 在随机边缘位置生成（距其他机器人至少 15 格）
• 从 3x3 本方领地开始
• 死亡 3 秒后在新的随机边缘重生
• 死亡时失去所有领地

AI 约束：

• 机器人遵循与玩家相同的移动速度
• 机器人遵守相同的碰撞规则
• 机器人不能"作弊"（无完美寻路或全知视野）

未来 AI 增强（推迟）：

• 猎杀轨迹：靠近时主动追寻玩家的活动轨迹
• 策略性撤退：为环路大小计算风险与回报
• 领地防御：优先夺回失去的领地
• 难度等级：调整反应时间与决策

HUD 设计

顶部居中：领地计数器

• 大而粗的百分比显示（例如 "34%"）
• 字号：48px（在移动端易于阅读）
• 颜色：白色带深色描边以增强对比
• 随领地变化实时更新
• 位置：距顶部 20px，水平居中

右上角：迷你排行榜

• 紧凑的纵向列表，显示：
  • 按领地百分比排名的前 3 名玩家/机器人
  • 若玩家不在前 3 名，则显示其排名
• 每条目显示：
  • 彩色方块（玩家/机器人颜色）
  • 名称（例如 "You"、"Bot 1"）
  • 百分比条（横向，用玩家颜色填充）
  • 百分比数字
• 字号：24px
• 位置：距顶部和右侧各 20px
• 半透明深色背景以提升可读性
• 每 0.5 秒更新一次（非每帧更新，以保证性能）

死亡画面（全屏叠层）：

• 半透明深色背景（rgba(0,0,0,0.8)）
• 居中内容：
  • "Defeated!" 标题（72px，红色）
  • 最终领地百分比（48px，白色）
  • "Play Again" 按钮（200x80px，亮色，36px 文字）
• 按钮位于下方三分之一处（便于拇指操作）
• 淡入动画（0.3s）

胜利画面（全屏叠层）：

• 布局与死亡画面类似
• "Victory!" 标题（72px，金/黄色）
• 最终时间和 100% 显示
• "Play Again" 按钮（相同样式）

无暂停菜单：

• 对局短暂且连续
• 首个版本无暂停功能

技术实现说明

Three.js 设置：

• 使用 THREE.WebGLRenderer，并设 antialias: true
• THREE.PerspectiveCamera，FOV=50，为等距视角定位
• THREE.Scene，含环境光 + 平行光
• 渲染循环目标 60fps

领地系统：

• 用 2D 数组（50x50）追踪瓦片归属（0=中立，1=玩家，2-6=机器人）
• 用单独数组存储活动轨迹瓦片
• 用洪水填充算法处理环路闭合（迭代式，非递归，以避免栈溢出）
• 通过材质变更更新瓦片颜色（高效批处理）

碰撞检测：

• 每帧检查玩家位置与所有敌方轨迹位置
• 使用简单的距离检查（< 0.5 单位 = 碰撞）
• 边界检查：将玩家位置钳制在竞技场范围内

性能优化：

• 对瓦片使用 THREE.InstancedMesh（同色所有瓦片单次绘制调用）
• 只更新变化的瓦片，而非整个网格
• 将排行榜更新节流至 0.5s 间隔
• 对轨迹段使用对象池

镜头跟随：

• 每帧将镜头位置向玩家位置插值（lerp）
• 延迟系数：0.1（平滑但响应灵敏）
• 保持相对玩家的固定角度与距离

美术风格与视觉主题

整体美学：

• 干净、极简的 3D 设计
• 中性背景上明亮、饱和的色彩
• 平面着色的多边形（无纹理或渐变）
• 灵感来自现代移动游戏（Paper.io、Voodoo 系游戏）
• 高对比度以在移动端屏幕上保持清晰

配色方案：

• 中立竞技场：浅灰（#E0E0E0）或白色（#FFFFFF）
• 玩家：亮蓝色（#2196F3）——默认，可自定义
• 机器人：明亮且互相区分的颜色（红 #F44336、绿 #4CAF50、黄 #FFEB3B、紫 #9C27B0、橙 #FF9800）
• 边界墙：中灰色（#BDBDBD）
• 界面元素：带深色描边的白色文字，半透明深色背景

3D 素材规格：

• 方块（玩家/机器人）：0.8x0.8x0.8 单位立方体，平面着色，边缘略带圆角
• 瓦片：1x1x0.1 单位平面，被占领时抬高 0.1 单位
• 轨迹：0.3 单位宽的丝带，0.2 单位高，平面着色
• 墙壁：1 单位宽，2 单位高，简单的盒状几何体

光照：

• 环境光：柔和白色（#FFFFFF，强度 0.6）
• 平行光：来自右上方（#FFFFFF，强度 0.8）
• 首个版本无阴影（出于性能考虑）

镜头设置：

• 位置：位于玩家上方及后方 30 单位处，45° 角
• 注视点：玩家位置
• FOV：50°（不过宽也不过窄）

动画与精致度：

• 改变方向时方块平滑旋转（0.2s 缓动）
• 被占领时瓦片颜色过渡（0.3s 缓动）
• 镜头跟随带轻微延迟（lerp 系数 0.1）
• 死亡动画：方块缩小并淡出（0.5s）
• 胜利动画：彩纸粒子（推迟到未来迭代）

渲染方式：

• 所有 3D 元素通过 Three.js 渲染
• HUD 以 HTML 叠层渲染（绝对定位于画布之上）
• 游戏对象不使用 CSS/Canvas——为保持一致性，纯用 Three.js