劲射技巧AI · Claude 3.5

核心玩法循环与机制

Football Flick（足球轻弹）是一款简单的街机风格足球游戏，聚焦于一个核心机制：轻弹球来传球和射门。

逐帧玩法

• 玩家看到足球场的俯视图，包含自己的球、一名对手和一个球门
• 玩家通过触摸/单击球并拖动来瞄准，然后释放来射门
• 球沿轻弹的方向和速度运行
• 一名 AI 守门员移动以尝试封堵射门
• 玩家通过将球射过守门员进入球门来得分
• 每次进球或射失后，球重置到中心
• 游戏持续 60 秒，目标是尽可能多地进球

成长与吸引力

• 计分系统：每个进球 = 1 分
• 时间压力：60 秒的比赛营造紧迫感
• 最高分：玩家尝试刷新自己的个人最佳成绩
• 守门员 AI：守门员对射门做出反应，使时机和落点变得重要
• 视觉反馈：球的拖尾、进球庆祝和得分更新让气氛保持高涨

胜负条件

• 胜利：在 60 秒内尽可能多地进球
• 游戏结束：时间耗尽，显示最终得分
• 重玩：即时重新开始以再次尝试

吸引力所在

• 一触即发的简洁：易于学习，令人满足的轻弹机制
• 快速对局：60 秒的比赛完美契合移动端
• 技巧表现：瞄准、时机和力度控制创造深度
• 即时反馈：进球时的即刻满足

起步范围

对于首个迭代，实现：

必须具备（首个版本）：

• 单屏俯视足球场
• 玩家操控的球，配轻弹机制（移动端触摸拖动，桌面端鼠标拖动）
• 屏幕顶部一个固定球门
• 左右移动以封堵射门的 AI 守门员
• 60 秒计时倒数
• 得分计数器
• 球的物理（移动、摩擦、边界）
• 进球检测和计分
• 进球/射失后的球重置
• 进球时的简单庆祝效果
• 带最终得分和重新开始按钮的游戏结束画面

留待后续：

• 多个难度等级
• 增益道具或特殊射门
• 障碍物或防守球员
• 多种游戏模式
• 多人对战
• 高级守门员 AI 模式
• 球的旋转/弧线机制

游戏视角

俯视视角：游戏采用固定屏幕、俯视视角，一次性展现整个球场。这提供了：

• 对球、球门和守门员位置的清晰视野
• 轻弹操控的便捷瞄准
• 简单的空间理解
• 经典的街机足球感觉

镜头静止，在 720×1280 视口内展现完整的比赛场地。

游戏世界与关卡设计

比赛场地布局

• 球场尺寸：适配 720×1280 视口的矩形场地
• 玩家区域：屏幕底部 60%（距底部 768px）—— 球起始并由玩家操控的区域
• 球门区域：屏幕顶部 20%（距顶部 256px）—— 包含球门和守门员
• 过渡区：中间 20% —— 供射门穿行的开阔空间

场地元素

• 球门：位于屏幕顶部中央

  • 宽度：约 400px（既有挑战性又不至于太难）
  • 视觉：两侧门柱，后方球网
  • 球门线清晰标示

• 球的起始位置：下半场中央（距左 360px，距顶部约 900px）

  • 每次进球或射失后在此重置

• 守门员起始位置：球门中央（距左 360px，距顶部约 200px）

  • 沿球门线水平移动

• 边界：

  • 侧墙位于 x=50 和 x=670（提供 620px 的游戏宽度）
  • 底部边界位于 y=1230（球无法越过底部）
  • 顶部边界位于 y=50（球门后方）
  • 球从侧墙反弹时速度降低

视觉设计

• 简洁、明亮的草地纹理或纯绿色背景
• 白色球场标线（中圈、球门区）
• 带门柱和球网的清晰球门结构
• 极简、易读的设计，不分散对玩法的注意力

编辑模式设计

编辑模式允许玩家在保持平衡玩法的前提下自定义游戏体验。

可编辑属性

球属性：

• ballColor：足球的颜色（默认：白色配黑色图案）
• ballSize：球的半径（像素）（范围：20-40，默认：30）
• maxFlickPower：球可被轻弹的最大速度（范围：500-1500，默认：1000）
• friction：球减速的快慢（范围：0.90-0.99，默认：0.96）

守门员属性：

• goalkeeperColor：守门员精灵的颜色（默认：黄色）
• goalkeeperSpeed：守门员移动的速度（范围：100-400，默认：250）
• goalkeeperReactionTime：守门员对射门做出反应前的延迟（毫秒）（范围：100-500，默认：200）

游戏设置：

• matchDuration：比赛时长（秒）（范围：30-120，默认：60）
• goalWidth：球门宽度（像素）（范围：300-500，默认：400）
• pitchColor：球场背景颜色（默认：#2d8a3e）

视觉设置：

• showTrail：显示/隐藏球拖尾效果的布尔值（默认：true）
• celebrationDuration：进球庆祝持续时长（毫秒）（范围：500-2000，默认：1000）

约束条件

• 球的尺寸必须保持可见和可操控
• 守门员速度经过平衡，使进球既可实现又有挑战
• 比赛时长保持对局快速且可重玩
• 球门宽度确保公平的难度
• 所有颜色值必须为有效的 CSS 颜色

编辑模式 UI

• 属性组织在可折叠的分区中（球、守门员、游戏、视觉）
• 带当前值显示的数值范围滑块
• 颜色属性的取色器
• 布尔属性的开关
• 每个分区的"恢复默认"按钮
• 游戏视图中更改的实时预览

操控设计

Football Flick 采用简单的基于轻弹的操控方案，为触摸而优化，同时也支持鼠标输入。

移动端操控（触摸）

• 轻弹射门：

  • 触摸球并朝任意方向拖动
  • 出现显示瞄准方向和力度的视觉箭头
  • 释放以发射球
  • 拖动越长 = 力度越大（直到最大值）
  • 拖动方向 = 射门方向

• 视觉反馈：

  • 瞄准箭头随拖动增长
  • 力度指示器显示射门强度
  • 球被触摸时高亮

桌面端操控（鼠标）

• 单击并拖动射门：

  • 单击球并拖动以瞄准
  • 与触摸相同的视觉反馈
  • 释放鼠标按键以射门

• 替代方式：游戏结束后按空格键重新开始

操控实现细节

• 触摸/单击检测：仅在直接触摸/单击球时才注册输入
• 拖动限制：最大拖动距离限制力度（例如，拖动 150px = 最大力度）
• 最小力度：极短的拖动（< 20px）不注册，以防止误触点击
• 输入锁定：球快速移动时禁用输入（防止连发射门）
• 瞄准线：从球到拖动点的视觉线条，带显示方向的箭头
• 力度条：球附近显示力度百分比的小条

操控流程

1. 玩家触摸/单击球 → 球高亮，开始瞄准
2. 玩家拖动 → 瞄准箭头实时更新
3. 玩家释放 → 球以计算出的速度发射
4. 球移动 → 输入锁定，直到球减速至阈值以下
5. 球停止或得分 → 重新启用输入

这一操控方案具备：

• 直观：自然的轻弹动作
• 精准：视觉反馈允许准确瞄准
• 令人满足：输入与球移动之间的直接联系
• 移动优先：为触摸而设计，兼容鼠标

美术风格与视觉主题

Football Flick 采用简洁、多彩的卡通风格美学，明亮、亲切，在移动屏幕上易于识别。

整体风格

• 卡通/休闲：简化、亲切的视觉效果，配醒目轮廓
• 明亮而充满活力：鲜艳的色彩在屏幕上格外醒目
• 清晰易读：元素之间的高对比度以便于识别
• 现代平面设计：简洁的形状配微妙的阴影/高光

配色方案

• 球场：明亮的绿色（#2d8a3e），配较浅的绿色条纹
• 球：经典白色配黑色五边形图案
• 守门员：明亮的黄/橙色球衣以保证高可见性
• 球门：白色门柱配浅灰色球网
• UI：白色文字配深色描边以保证可读性
• 强调色：得分用蓝色，计时器过低时用红色

视觉元素

球：

• 经典足球设计
• 白色为底配黑色五边形图案
• 下方微妙的阴影以营造立体感
• 移动时的拖尾效果（白色淡出）

守门员：

• 简单的人形角色精灵
• 明亮的彩色球衣（黄/橙色）
• 可见的手套
• 动画化的待机和扑救姿势
• 尺寸：约 80px 高，60px 宽

球门：

• 白色球门柱（矩形）
• 带可见网格图案的浅灰色球网
• 门柱：20px 厚
• 球网纵深：球门线后方 40px

球场：

• 明亮的绿色背景
• 白色标线（中圈、球门区）
• 微妙的草地纹理或条纹图案
• 简洁的边界

UI 元素：

• 用于得分和计时器的大号、粗体数字
• 简单的图标（重新开始按钮、暂停）
• 庆祝效果：粒子迸发、文字弹出（"GOAL!"）

素材尺寸

• 球：60×60px（半径 30px）
• 守门员：80×120px 精灵
• 球门柱：每根宽 20px，高 100px
• UI 元素：最小 48×48px 触摸目标

渲染策略

• 代码渲染：球场背景、球门柱、球网（简单的矩形/线条）、UI 文字和数字、瞄准箭头
• 生成的素材：球精灵、守门员精灵、庆祝粒子效果
• CSS/Canvas：所有几何形状、线条和文字

这一美术风格确保：

• 快速加载和渲染
• 在小屏幕上的清晰可见
• 一致、精致的观感
• 易于用新的视觉元素扩展