大家一起找颜色

这是一个双端（PC+Mobile）协作的实时颜色捕捉游戏，玩家需要根据电脑提示的颜色，使用手机摄像头在限定时间内找到并拍摄与目标颜色相似的物体。

技术栈

• HTML5
• CSS3
• JavaScript
• P5.js - 用于图形处理和游戏界面
• ML5.js - 用于图像处理和颜色识别
• Socket.io - 用于实时通信
• WebRTC - 用于摄像头流传输

使用方法

1. 启动服务器：

   npm install
   npm start

2. 在电脑浏览器中打开：

   http://localhost:3000
   

3. 在手机浏览器中打开：

   http://[你的IP地址]:3000/mobile.html
   

4. 允许手机浏览器访问摄像头

5. 等待游戏开始，根据电脑端显示的目标颜色，用手机拍摄相似颜色的物体

6. 系统会自动计算颜色相似度并给出分数

浏览器配置说明

由于安全限制，在使用手机摄像头之前，需要进行以下配置：

方法一：启用必要的浏览器功能

1. 在手机的 Chrome 浏览器中打开新标签页
2. 输入 chrome://flags 并访问
3. 搜索并启用以下选项：
   • Insecure origins treated as secure
   • WebRTC device enumeration security origin
   • WebRTC hardware video encoding
4. 重启浏览器

方法二：添加网站到白名单

1. 在 Chrome 浏览器中打开 chrome://flags
2. 在搜索框中输入 unsafe
3. 找到 "Insecure origins treated as secure" 选项
4. 在文本框中输入游戏网址（例如：http://192.168.1.100:3000）
5. 将右侧选项改为 Enabled
6. 点击右下角 Relaunch 按钮重启浏览器
7. 重新访问游戏页面，允许摄像头访问权限

其他注意事项

• 如果没有看到权限请求提示，请检查网站设置中的摄像头权限
• 某些安卓设备可能需要在系统设置中额外授予浏览器摄像头权限
• iOS 设备建议使用 Safari 浏览器，可能有更好的兼容性

游戏规则

1. 点击开始游戏后，每轮游戏时长 15 秒
2. 系统会随机生成一个目标颜色
3. 玩家需要用手机摄像头找到并拍摄相似颜色的物体并点击拍摄
4. 拍摄到的颜色越接近，得分越高
5. 每轮结束后显示得分，并可选择是否开始新一轮

注意事项

• 确保手机和电脑在同一个局域网内
• 保持手机摄像头镜头清洁
• 游戏场地光线充足
• 建议使用 Chrome 或 Firefox 浏览器以获得最佳体验
• 如遇到摄像头访问问题，请按照上述浏览器配置说明进行设置