用一段提示词生成靠"啁啾声"联机的双人网页游戏

原文要点

Simon Willison 在 2026 年 10 月发布的一项实验：让两部手机各打开一个纯静态 HTML 页面，游戏状态不经过网络，而是通过扬声器发出、由另一台设备麦克风接收的“啁啾”音频信号在两机之间传递。他使用的是 Claude Code 中的 Claude Opus 5.5 Extra 模型，给出的提示词核心是：构建一个类似 Pong 的双人竞技游戏，两台靠近的手机通过 Web 麦克风 API 可解析的音频噪声同步游戏状态，同时加入图形和玩法上的变化，避免过于简陋。他称实验确实可行，但未公开完整生成代码或编解码细节。

这次做成什么

在本地复现这一实验思路：用一段完整提示词驱动模型生成一个双机靠音频“啁啾”同步状态的静态网页游戏，并用两部手机验证联机效果。练习方案为本站独立设计，不依赖原作者未公开的成品代码。

准备什么

• 两部支持现代浏览器（iOS Safari 或 Android Chrome）的智能手机，且能互相靠近放置
• 一个本地静态文件服务器（如电脑安装 Python 3 后用 python -m http.server）
• 可访问具备较强代码生成能力的模型（如 Claude Code、ChatGPT 等任一即可）
• 两台手机需通过 HTTPS 或 localhost 环境获得麦克风权限

具体怎么做

1. 生成游戏代码

   把下方 artifacts 中的完整提示词粘贴给你选用的代码模型，要求输出单个自包含 HTML 文件（内联 CSS 与 JS），重点要求：用 Web Audio API 生成不同频率的短促啁啾音编码操作，用 getUserMedia 加 AnalyserNode 做频率检测解码。将模型输出的代码保存为 chirp-game.html。

2. 本地起服务并局域网访问

   在保存文件的目录运行 python -m http.server 8000，两台手机连接与电脑同一 Wi-Fi，浏览器打开 http://电脑局域网IP:8000/chirp-game.html。注意：getUserMedia 在非 localhost 下通常要求 HTTPS，若麦克风被浏览器拒绝，可用 mkcert 或 ngrok 之类工具提供 HTTPS 访问，本站不保证任一工具在你的环境可用。

3. 双机配对与音量校准

   页面应包含“主机/客机”选择按钮（提示词中已要求）。一部手机选主机，先由主机发出一个约定频率的“握手啁啾”，另一部手机检测到后回应，双方进入对局。测试时把手机音量调到中等偏高，两机距离 30 厘米以内，环境保持安静。

4. 对局验证与调参

   各自在屏幕上滑动控制挡板，观察球的位置和分数是否在两台设备间保持一致。若同步漂移，回到模型处要求调整：延长啁啾时长、拉大开频率间隔、增加校验位重发机制，重新生成代码再测。

可直接复制的材料

请生成一个完全自包含的单文件 HTML 双人竞技网页游戏，命名为 chirp-game.html，所有 CSS 和 JavaScript 内联，不引用任何外部资源。玩法：类似 Pong 的竖屏挡板对战，但加入至少两个玩法变化（例如球速随回合递增、击中挡板不同位置改变球的角度、随机出现加速道具），画面使用 Canvas 绘制并有得分动画。联机方式：两台手机靠近放置，不经过任何网络通信，玩家 A 的操作（挡板位置、发球）通过扬声器播放的短促啁啾音编码发出，玩家 B 的手机用 getUserMedia 获取麦克风并用 Web Audio API 的 AnalyserNode 做频率分析解码后更新本地游戏状态，反之亦然。具体要求：1) 用 1800Hz、2400Hz、3000Hz 等互不谐波重叠的纯音区分不同消息类型，消息格式为 [类型][数值][简单校验]；2) 页面加载后提供“主机”和“客机”两个按钮，主机先发握手音，客机回应后开始对局；3) 界面上显示当前麦克风采样状态、最近一次收发的编码消息，便于调试；4) 处理权限被拒绝、环境噪声过大导致的解码失败，给出重发与提示；5) 输出完整可运行的 HTML 代码，不要省略任何部分。

{"tests":[{"case":"握手配对","steps":"主机点“主机”按钮→主机发出握手音→客机 3 秒内回应","expect":"两机画面进入对局界面"},{"case":"挡板同步","steps":"主机快速上下滑动挡板 5 次","expect":"客机画面挡板位置误差小于半个挡板高度"},{"case":"发球同步","steps":"主机发球","expect":"客机在 1 秒内看到球从同一侧以相同角度出现"},{"case":"噪声干扰","steps":"测试时旁人说话或播放音乐","expect":"出现解码失败提示或自动重发，不出现状态错乱"}]}

输入与输出示例

本站虚构演示，未实际运行模型生成或双机测试，输出格式仅示意提示词中要求的消息格式。

输入

将上方提示词粘贴给模型，附加一句“请直接输出完整 HTML”，然后用两部手机（iPhone 开 Safari、安卓开 Chrome）在同一 Wi-Fi 下访问 http://192.168.1.10:8000/chirp-game.html

对应输出

得到约数百行的 chirp-game.html；主机屏幕显示“已连接，比分 0:0”，滑动挡板后客机画面挡板跟随移动；调试区显示类似“TX: MOVE 45 CHK 3 / RX: SERVE 90 CHK 1”的收发记录；发球后两边球的位置与比分保持一致。

做完检查这些

• 生成的 HTML 为单文件，无外部脚本或样式引用，保存后可直接打开
• 两台手机浏览器均成功获得麦克风权限，调试区能看到采样状态
• 主机握手音发出后客机在数秒内响应并进入对局界面
• 一方移动挡板或发球后，另一方画面在约一秒内同步更新
• 在安静环境下连续对局一分钟，比分两边保持一致

容易卡住的地方

• getUserMedia 在非 localhost 的 HTTP 页面上会被浏览器拒绝，必须 HTTPS 或 localhost 环境
• 环境嘈杂时频率检测容易误判，需要拉长啁啾时长或加入校验重发
• iOS 要求音频播放必须由用户手势触发，页面加载后需先点按钮再发声
• 两机距离过远或音量过低会导致解码失败，练习时建议 30 厘米以内
• 作者只确认方案可行，未公开成品代码与编码协议，本站方案是独立重构，效果可能不同