思考，不要触碰🎮
一款独特的网络益智游戏，你必须完成挑战 没有 触摸鼠标、触控板或键盘。相反，使用Chrome DevTools MCP（模型上下文协议）工具以编程方式与页面交互。
🎯 概念
这个游戏通过一个引人入胜的“放手”挑战来教授网络自动化和DevTools的使用。玩家必须以编程方式思考，而不是与界面进行物理交互。
🎲 游戏规则
❌ 禁止行为
- 无鼠标移动
- 无鼠标点击
- 无键盘输入
- 无触摸板/触摸交互
✅ 允许的操作
- 仅限Chrome DevTools MCP工具
- 通过MCP执行控制台命令
- 程序化DOM操作
⚠️ 违规
如果你违反了规则：
- 屏幕抖动视觉警告
- 当前进度重置为0
- 违规计数器增量
- 1.5秒冷却
📋 等级
第一级：身份
任务：在输入框中输入您的姓名
MCP工具: fill_form
成功标准：有效名称（2-30个字符）
______________________________________________________________________
第二级：头像选择
任务：上传图像作为您的头像
MCP工具: upload_file
成功标准：选择图像文件并显示预览
______________________________________________________________________
级别3：精确拖动
任务：将圆形元素移动到方形目标区域
MCP工具: drag
成功标准：圆的中心与目标正方形重叠
______________________________________________________________________
第四级：关键大师
任务：按组合键： Ctrl + Shift + G
MCP工具: press_key
成功标准：使用精确的修饰符发送正确的键盘事件
______________________________________________________________________
🚀 入门指南
先决条件
- 现代网络浏览器（推荐使用Chrome）
- 启用代理模式的IDE
- Chrome开发工具MCP 安装
安装
- 克隆此存储库
- 打开
index.html在浏览器中 - 按照以下步骤安装Chrome DevTools MCP 官方指南
如何玩
- 在浏览器中打开游戏
- 请勿触摸鼠标或键盘
- 使用AI代理模式打开IDE
- 告诉你的AI助手使用DevTools MCP工具完成每个级别
- 观看你的AI以编程方式解决谜题！
🎨 特性
- 带有霓虹色调的黑暗主题：赛博朋克“黑客”美学
- 持久状态：进度已保存在本地存储中
- 统计跟踪:
- 违规总数 - 完成计数 - 玩家姓名和头像
- 实时验证：任务进度的即时反馈
- 响应式设计：适用于各种屏幕尺寸
🔧 技术细节
文件
index.html-游戏结构和屏幕index.css-深色主题和动画造型index.js-游戏逻辑、状态管理和违规检测GAME_DESIGN.md-综合设计文件
状态管理
游戏状态存储在localStorage中，其结构如下：
{
playerName: string,
avatarPath: string,
currentLevel: 1-4,
levelsCompleted: [boolean, boolean, boolean, boolean],
violationCount: number,
completionCount: number,
lastPlayedDate: timestamp
}违规检测
游戏会监视这些事件：
mousemoveclickkeydownkeypresstouchstarttouchmove
MCP触发的操作（例如，通过控制台设置元素属性）不会触发这些事件，从而可以区分手动和程序化操作。
🎓 教育价值
这个游戏教我们：
- DevTools控制台：运行JavaScript命令
- DOM操作：选择和修改元素
- 事件系统：了解浏览器事件
- Web自动化：使用工具控制网页
- 问题解决：以编程方式思考
🏆 胜利条件
完成所有4个级别即可获胜！游戏显示您的最终统计数据：
- 违规总数（越低越好！）
- 完工数量
- 您的玩家名称
🔄 可重复性
- 尝试完成0次违规
- 超越你之前的完成时间
- 挑战朋友，看看谁能完成得最快
- 统计数据在会话中持续存在
🐛 已知问题
- 2级文件上传需要实际选择文件（未来：添加预设头像）
- 游戏是Chrome DevTools MCP特定的（按设计）
- 在介绍屏幕期间可能会触发违规检测（在游戏过程中避免触摸）
📝 发展
使用普通HTML、CSS和JavaScript构建。不需要外部依赖。
要修改：
- 在中编辑HTML结构
index.html - 调整样式
index.css - 修改游戏逻辑
index.js
📄 许可证
这是一个示范项目。您可以根据需要自由使用和修改。
🤝 贡献
这是一个概念验证游戏。改进建议：
- 附加级别
- 声音效果
- 成就系统
- 排行榜（需要后端）
- 更多MCP工具集成
______________________________________________________________________
由以下材料制成🧠 （请勿触碰！）