复古触屏AI · Claude 3.5

核心玩法循环与机制

Retro Touch 是一款交互式模拟游戏，重现第七代 iPod Touch 的使用体验。玩家与忠实还原的 iOS 界面互动，探索各种应用和小游戏，捕捉早期移动计算的精髓。

主要体验流程：

1. 锁屏：玩家从一个原汁原味的锁屏开始，屏幕显示时间并支持"滑动解锁"交互
2. 主屏幕：解锁后，玩家看到一排排代表经典 iOS 应用的图标
3. 应用探索：点击应用会打开交互式体验，模拟或游戏化经典 iPod Touch 功能
4. 导航：Home 键返回主屏幕，并在应用切换间保持状态

核心交互：

• 滑动解锁：在锁屏上滑动手势以进入设备
• 应用启动：点击图标以带平滑过渡动画的方式打开应用
• 应用内交互：每个应用都有独特的基于触摸的交互
• Home 键：模拟实体按键以返回主屏幕
• 状态栏：显示时间、电量、信号强度以增强真实感

投入驱动力：

• 怀旧感：忠实还原深受喜爱的界面与交互
• 探索性：发掘并探索不同的应用及其功能
• 小游戏：应用内的可玩游戏（音乐节奏游戏、照片拼图等）
• 定制化：可在编辑模式中重新排列应用、个性化壁纸

起步范围

在初始实现中，我们将专注于打造一个精致、可用的 iPod Touch 外壳，配备一组精选的 6-8 款核心应用。这提供了完整、令人满足的体验，同时为扩展留出空间。

第一阶段（首发版本）：

核心系统：

• 带滑动解锁的锁屏
• 带应用网格（4 列 × 5 行）的主屏幕
• 带时间、电量、信号的状态栏
• Home 键功能
• 平滑的应用打开/关闭动画
• 原汁原味的 iOS 12 时代视觉风格

核心应用（6-8 款）：

1. 音乐 —— 简单的节奏/音乐游戏，随节拍点击音符
2. 照片 —— 使用一张可打乱并复原的照片的滑块拼图游戏
3. 计算器 —— 具备真实 iOS 设计的全功能计算器
4. 时钟 —— 显示当前时间，配可用的模拟/数字显示，支持简单闹钟设置
5. 备忘录 —— 简单的记事应用，可撰写并保存简短信息
6. 设置 —— 调整壁纸、音量和其他基本偏好
7. Safari —— 简单的浏览器模拟，展示一个带交互元素的虚构"网页"
8. 游戏 —— 经典的贪吃蛇或打砖块街机游戏

未来扩展（发布后）：

• 新增应用（带照片滤镜的相机、带聊天模拟的信息、天气等）
• 应用内更复杂的小游戏
• 通知系统
• 用于"下载"新应用的 App Store
• 多人功能（分享分数、照片）

游戏视角

固定屏幕视角，采用竖屏方向的设备模拟。iPod Touch 设备以固定尺寸渲染（屏幕区域约 360×640 像素），居中于 720×1280 的游戏画布中，设备边框、Home 键和状态栏构成一个逼真的外框。

界面采用拟物化的 iOS 12 时代设计，包含：

• 逼真的设备边框和圆角
• 带淡淡阴影的光泽应用图标
• 屏幕间的平滑过渡动画
• 原汁原味的 iOS 字体和界面元素

游戏世界与关卡设计

设备布局（720×1280 画布）：

垂直居中：

• 设备置于画布中央
• 上边距：约 100px
• 下边距：约 100px

设备结构（设备总尺寸 520×1080）：

• 顶部边框（520×80）：扬声器网孔、前置摄像头
• 屏幕区域（520×920）：有效显示区
  • 状态栏（520×40）：时间、电量、信号
  • 内容区（520×880）：应用、内容、交互
• 底部边框（520×80）：Home 键（圆形，居中）

主屏幕布局：

• 应用网格：4 列 × 5 行 = 20 个应用位
• 应用图标尺寸：100×100 像素
• 网格间距：水平 30px，垂直 40px
• 网格从内容区顶部起约 60px 开始
• 图标下方的应用标签（居中，12px 字体）

程序坞（屏幕底部）：

• 固定程序坞，放置 4 款核心应用
• 略带半透明的背景
• 高度：120px
• 常用应用：音乐、Safari、信息、照片

应用界面：

每个应用都有一致的结构：

• 导航栏（顶部，80px）：应用标题、返回按钮（如需要）
• 内容区：应用专属界面
• 标签栏（底部，可选，100px）：用于含多个板块的应用

视觉层次：

1. 锁屏（初始状态）
2. 主屏幕（主导航中枢）
3. 应用界面（各自的体验）
4. 模态框/叠层（设置、提醒）

编辑模式设计

编辑模式允许玩家定制自己的 iPod Touch 体验，专注于在不破坏模拟的前提下增强怀旧感的个性化选项。

可编辑属性：

1. 壁纸定制：

• 锁屏壁纸：从预设图片或纯色中选择
• 主屏幕壁纸：与锁屏分开，带模糊选项
• 预设选项：8-10 张怀旧/复古主题壁纸
• 颜色选项：纯色和渐变

2. 应用排列：

• 拖放：长按并拖动应用图标以重新排列
• 程序坞定制：选择哪 4 款应用出现在程序坞中
• 页面管理：如经扩展，支持多个主屏幕页面

3. 设备设置：

• 设备颜色：选择边框颜色（黑、白、银、金、红）
• 音量：主音量滑块（0-100%）
• 时间显示：12 小时制 vs 24 小时制
• 应用图标风格：经典光泽 vs 现代扁平

4. 小游戏难度：

• 音乐游戏：调整音符速度和复杂度
• 照片拼图：选择网格尺寸（3×3、4×4、5×5）
• 贪吃蛇游戏：调整速度和起始长度

编辑模式界面：

进入方式：

• 主屏幕右上角的专用"编辑"按钮
• 在游玩和编辑模式之间切换

编辑模式指示：

• 应用带轻微抖动动画（经典 iOS 编辑模式）
• 可移除应用上的小"×"徽标
• 用于从可用列表添加应用的"+"按钮
• 用于退出编辑模式的"完成"按钮

设置面板：

• 从右侧滑入的面板
• 分类标签页：外观、应用、游戏、关于
• 每项设置都有清晰标签和相应控件（滑块、颜色选择器、下拉菜单）

约束：

• 最少应用数：主屏幕上须至少保留 4 款应用
• 核心应用：计算器、时钟、设置不可移除
• 程序坞上限：程序坞中正好 4 款应用
• 壁纸尺寸：图片应为 520×920 或更大
• 音量范围：0-100%，影响所有游戏内声音
• 应用上限：主屏幕最多 20 款应用（4×5 网格）

持久化：

所有编辑模式的更改都会保存到 window.gameConfig 中并跨会话持久保留：

window.gameConfig = {
  wallpapers: {
    lockScreen: "preset_1",
    homeScreen: "preset_2"
  },
  appLayout: ["music", "photos", "calculator", ...],
  dockApps: ["music", "safari", "messages", "photos"],
  deviceColor: "black",
  volume: 75,
  timeFormat: "12h",
  iconStyle: "glossy",
  gameDifficulty: {
    music: "medium",
    puzzle: "4x4",
    snake: "normal"
  }
}

操控设计

Retro Touch 采用点击加滑动的操控方案，为移动端触摸交互进行优化，同时完整支持桌面端鼠标。游戏模拟原汁原味的 iOS 手势和交互。

移动端操控（主要）：

1. 锁屏：

• 向右滑动：将解锁滑块从左滑到右以解锁设备
• 触摸并拖动：手指跟随滑块，若拖回则释放

2. 主屏幕：

• 点击应用图标：以平滑缩放动画启动应用
• 点击 Home 键：从任意应用返回主屏幕
• 长按图标（编辑模式）：进入抖动模式以重新排列
• 拖动图标（编辑模式）：将应用移至新位置
• 左右滑动（未来）：在主屏幕页面间导航

3. 应用内交互：

• 点击：主要交互（按钮、按键、游戏元素）
• 滑动：滚动、导航、游戏操控
• 捏合（未来）：在照片应用中缩放
• 长按：上下文菜单、附加选项

4. 小游戏操控：

• 音乐游戏：在音符到达目标线时点击
• 照片拼图：点击拼块以将其滑入空位
• 计算器：点击数字和运算符按钮
• 贪吃蛇游戏：向某方向滑动以转向蛇
• 备忘录：点击以调出键盘，用屏幕键盘输入

桌面端操控（鼠标 + 键盘）：

鼠标：

• 点击：等同于触点（所有点击交互）
• 点击并拖动：等同于触摸并拖动（解锁滑块、应用重排）
• 悬停：在可交互元素上显示淡淡的高亮

键盘：

• Enter：从锁屏解锁
• Escape：返回主屏幕（Home 键）
• 方向键：导航应用网格焦点、操控贪吃蛇游戏
• 空格：选择聚焦的应用
• Tab：在元素间移动焦点
• 数字键：计算器输入
• WASD：贪吃蛇游戏方向键的替代

操控实现细节：

触摸处理：

• 用唯一 ID 追踪所有触点
• 阻止浏览器默认行为（滚动、缩放）
• 窗口失焦时清除触摸状态
• 支持多点触控以备未来功能

手势识别：

• 滑动检测：<300ms 内至少移动 50px
• 长按：按住 500ms 且无移动
• 点击：300ms 内、10px 半径内的按下与抬起

Home 键：

• 始终可用（固定于设备底部）
• 视觉按压动画（略微缩小）
• 触觉反馈模拟（短暂的屏幕闪烁）
• 从任意应用返回主屏幕

指针锁定：

• 不使用（无需第一人称镜头或持续鼠标视角）

输入状态管理：

const input = {
  touches: new Map(), // touchId -> {x, y, startX, startY, startTime}
  mouse: {x: 0, y: 0, down: false},
  keys: new Set(), // active keys (lowercase)
  gestures: [] // detected gestures this frame
};

无障碍：

• 所有可交互元素最小 96×96 像素
• 所有交互均有清晰的视觉反馈
• 所有功能均支持键盘导航
• 设置中提供高对比度模式选项

操控简洁性：

操控方案刻意保持极简且直观：

• 主要动作：点击（90% 的交互）
• 次要动作：滑动/拖动（解锁、重排、滚动）
• 第三级动作：长按（进入编辑模式）

这契合原汁原味的 iOS 体验，确保模拟感觉自然而怀旧。

美术风格与视觉主题

Retro Touch 拥抱拟物化的 iOS 12 美学，专注于逼真的纹理、光泽表面，以及源自第七代 iPod Touch 时代（2019 年）的原汁原味的苹果设计语言。

整体美术方向：

风格：带淡淡 3D 效果的逼真拟物化设计 基调：怀旧、精致、高级 配色方案：

• 设备：深空灰（#1d1d1f）、银色（#e8e8ed）、金色（#fad7bd）、红色（#c1272d）
• 界面：iOS 蓝（#007aff）、白色（#ffffff）、浅灰（#f2f2f7）
• 强调色：绿色（#34c759）、红色（#ff3b30）、橙色（#ff9500）

视觉元素：

1. 设备硬件：

• 边框：带淡淡渐变的逼真铝质或玻璃质感
• 屏幕：略带眩光/反射叠层以增强真实感
• Home 键：圆形带淡淡环圈，略带阴影
• 扬声器/摄像头：带精细细节的深色网孔
• 圆角：屏幕 40px 圆角，与真实设备一致

2. 应用图标（100×100px）：

• 风格：光泽的圆角方形（22px 圆角半径）
• 光照：自上而下的渐变，暗示光源
• 阴影：淡淡的投影（2px 偏移，4px 模糊）
• 细节：每个图标都应可辨认，并契合 iOS 设计语言

图标示例：

• 音乐：粉/红渐变配白色音符
• 照片：彩虹花瓣
• 计算器：黑色背景配橙/白按钮
• 时钟：白色表盘配显示 10:09 的黑色指针
• 备忘录：带横线的黄色便笺纸
• 设置：灰色齿轮
• Safari：蓝色指南针
• 游戏：彩色游戏手柄或经典游戏元素

3. 界面组件：

状态栏：

• 半透明背景
• 白色文字和图标
• 信号点、WiFi 符号、电量指示
• 时间居中，16px 字体

导航栏：

• 半透明模糊效果
• 大标题文字（34px，加粗）
• 带雪佛龙箭头的返回按钮
• 操作按钮（蓝色，17px）

按钮：

• 圆角矩形（12px 圆角）
• 纯色或淡淡渐变
• 激活/按下状态（更深色调）
• 清晰标签（17px，中等字重）

4. 动画：

应用启动：

• 图标放大并淡出
• 应用内容从图标位置放大进入
• 时长：300ms，缓出曲线

应用关闭：

• 启动动画的逆向
• 内容缩回图标
• 时长：250ms，缓入曲线

解锁：

• 滑块平滑跟随手指
• 末端略带回弹
• 解锁后屏幕淡入

编辑模式：

• 图标抖动（±2° 旋转，0.3 秒周期）
• 淡淡的缩放脉动
• "×"徽标淡入

5. 字体排版：

系统字体：San Francisco（SF Pro） 后备字体：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

文字尺寸：

• 大标题：34px（加粗）
• 标题：28px（加粗）
• 标题栏：17px（半粗）
• 正文：17px（常规）
• 说明文字：12px（常规）
• 应用标签：12px（常规）

6. 光照与特效：

屏幕眩光：

• 淡淡的白色渐变叠层（5% 不透明度）
• 自左上向右下定位

阴影：

• 应用图标：0 2px 4px rgba(0,0,0,0.1)
• 模态框：0 8px 24px rgba(0,0,0,0.3)
• 设备：0 12px 48px rgba(0,0,0,0.2)

模糊效果：

• 导航栏：backdrop-filter blur(20px)
• 程序坞：backdrop-filter blur(30px)
• 模态框：backdrop-filter blur(40px)

素材与代码渲染：

生成为素材：

• 应用图标（精细、可辨认的设计）
• 壁纸图片（照片、图案、渐变）
• 设备边框/外框（逼真材质）
• 小游戏图形（音符、拼图块、蛇身段）

用代码渲染（CSS/Canvas）：

• 界面组件（按钮、栏、滑块）
• 文字和标签
• 简单形状（Home 键圆形、状态图标）
• 动画和过渡
• 计算器按钮和显示屏
• 时钟指针和数字

一致性要求：

• 所有应用图标必须共享相同的光泽风格和圆角半径
• 界面元素必须使用一致的间距（8px 网格系统）
• 颜色必须与 iOS 系统颜色完全一致
• 动画必须使用 iOS 标准的时间曲线
• 所有可交互元素必须有清晰的悬停/激活状态

这一美术方向营造出原汁原味、怀旧的体验，仿佛手中真的握着一台第七代 iPod Touch 设备。