劲射技巧：世界杯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 颜色

编辑模式界面

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

操作设计

Football Flick 采用简单的轻弹式操作方案，针对触摸优化，同时也支持鼠标输入。

移动端操作（触摸）

• 轻弹射门：

  • 触摸足球并朝任意方向拖动
  • 出现一个可视箭头，显示瞄准方向和力度
  • 松手将球射出
  • 拖动越长 = 力度越大（直到最大值）
  • 拖动的方向 = 射门的方向

• 视觉反馈：

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

桌面端操作（鼠标）

• 点击并拖动射门：

  • 在足球上点击并拖动瞄准
  • 与触摸相同的视觉反馈
  • 松开鼠标键射门

• 备选：游戏结束后按空格键重新开始

操作实现细节

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

操作流程

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

这套操作方案：

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

美术风格与视觉主题

Football Flick 采用干净、多彩的卡通风格美学，明亮、友好，在移动端屏幕上易于辨识。

整体风格

• 卡通/休闲：简化、友好的视觉，带粗轮廓线
• 明亮而有活力：在屏幕上跳脱的鲜艳色彩
• 清晰易读：元素之间高对比度，便于观看
• 现代扁平设计：干净的形状搭配细微的阴影/高光

配色方案

• 球场：明亮的绿色（#2d8a3e）配较浅的绿色条纹
• 足球：经典白色带黑色五边形花纹
• 守门员：明亮的黄/橙色球衣，便于识别
• 球门：白色门柱配浅灰色球网
• 界面：白色文字带深色描边，便于阅读
• 点缀：得分用蓝色，计时较低时用红色

视觉元素

足球：

• 经典足球设计
• 白色底配黑色五边形花纹
• 底部细微阴影带来立体感
• 移动时的拖尾效果（白色渐隐）

守门员：

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

球门：

• 白色门柱（矩形）
• 浅灰色球网，带可见的网格花纹
• 门柱：20px 粗
• 球网深度：门线后方 40px

球场：

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

界面元素：

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

素材尺寸

• 足球：60×60px（30px 半径）
• 守门员：80×120px 精灵
• 球门柱：各 20px 宽、100px 高
• 界面元素：触摸目标最小 48×48px

渲染策略

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

这套美术风格确保：

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