做给小朋友（也欢迎大人）看的电脑科普网站。用 5 个可以动手玩的动画，讲解二进制、神经元、排序、栈与队列、搜索这些核心概念——不用懂代码，点一点、拖一拖，原理自然就懂了。
这是一个单文件、零依赖的交互式科普网站，主题为"计算机如何工作"。设计目标是让完全没有技术背景的人——尤其是小学生——通过动手操作动画理解计算机科学的核心概念。
- 做中学：每个概念都配一个可操作的"仪器面板"，用户通过拨开关、拖滑块、点按钮来亲自"发现"原理
- 通俗语言：全部文案用生活化比喻（一叠盘子、排队、队长），避免术语堆砌
- 工程蓝图风：冷调纸白底色 + 海军蓝 + 强调橙，配合网格背景与漂浮的 0/1 粒子
| 功能 | 说明 |
|---|---|
| 📘 5 个交互章节 | 二进制 · 神经元 · 排序 · 栈与队列 · 搜索 |
| 🔊 合成音效 | Web Audio 实时合成钟琴/木琴音色，零音频文件，可一键静音 |
| 🏅 学习进度 | 6 个"小任务"徽章 + 顶部进度条，localStorage 持久化 |
| ✨ 动态背景 | 全站工程蓝图网格 + 缓慢漂浮的 0/1 粒子 |
| 🥚 隐藏彩蛋 | 连点顶部 logo 5 次触发《接住 1，躲开 0》小游戏 |
| 🖥️ 多端兼容 | 手机 / 平板 / 桌面响应式布局，触控与键盘均可操作 |
| 🌙 深色模式 | 自动跟随系统 prefers-color-scheme |
| ♿ 无障碍 | 语义化标签、键盘可操作、prefers-reduced-motion 减弱动效 |
双击 index.html，即可在任意现代浏览器（Chrome / Edge / Firefox / Safari）中打开。无需安装、无需联网、无需构建。
推荐使用本地服务器方式，便于局域网内手机/平板访问：
# Python 3
python -m http.server 8090 --directory . --bind 0.0.0.0
# 或 Node.js
npx serve .然后访问：
- 本机：
http://127.0.0.1:8090/index.html - 局域网（同一 Wi-Fi 的设备）：
http://<你的局域网IP>:8090/index.html
💡 Windows 防火墙提示：局域网访问如被拦截，需放行对应端口：
netsh advfirewall firewall add rule name="dsh-site" dir=in action=allow protocol=TCP localport=8090
拨动 8 个位开关，实时观察它如何变成：
- 十进制数字（0–255）
- 英文字母/符号（ASCII 表，拨出
01100001会得到字母a） - RGB 颜色（高/中/低 3 段分别映射红绿蓝）
任务徽章：亲手拨出字母 a 或 A。
拖动画布下方 3 个"旋钮"（线的倾斜 ①② / 线的高低），观察金色分界线如何移动；或点"让它自己学"，看它自动调整参数，把蓝点和橙点分开。
任务徽章：训练到全部猜对（48/48）。
24 根乱序柱子，可选冒泡排序或快速排序，支持播放 / 暂停 / 单步 / 调速，实时显示"比了 / 换了 / 走了"计数，直观对比两种算法的效率差异。
任务徽章：完整跑完一次排序。
- 栈：像一叠盘子，后放先拿（LIFO）——浏览器"后退"、画图"撤销"都是它
- 队列：像排队，先来先走（FIFO）——打印机、食堂打饭都是它
任务徽章：栈、队列各完成 2 次放入/取出。
32 个有序格子藏着一个目标。点格子猜，每次都会扔掉一半候选（太小变绿、太大变红）；或让电脑演示"二分法"——永远点中间，5 步之内必找到。
任务徽章：找到一次目标。
- 触发方式：在 1.6 秒内连点顶部 logo「电脑是怎么工作的」5 次
- 每次点击 logo 会有极轻微的抖动反馈；第 5 次打开游戏并爆出一簇 0/1 粒子
- 玩法：左右移动篮筐（键盘
←/→或A/D，手机手指滑动）接住掉落的1得分、躲开0 - 生命值：3 条命 ❤️——碰到
0扣 1 条，漏掉1（掉出屏幕）也扣 1 条，命用完游戏结束 - 任务徽章：单局得分 ≥ 10
在首页 hero 区域内任意位置点击，会爆出 0/1 彩色粒子。
- HTML5 + CSS3 + 原生 JavaScript（ES2020）——无任何框架、库、CDN
- Canvas 2D：hero 氛围动画、神经元画布、排序画布、背景粒子、小游戏
- Web Audio API：实时合成音效（正弦波基频 + 钟琴泛音 + 指数衰减 + 轻回声）
- Hash 路由：
#/binary、#/neuron等，支持前进/后退与刷新保持 - localStorage：音效偏好与学习进度持久化
| 模块 | 实现要点 |
|---|---|
| 视图路由 | hashchange 监听，切换章节时暂停/恢复对应动画循环 |
| 排序动画 | 生成器函数（function*）驱动逐步执行，播放/步进/调速共用同一状态机 |
| 神经元训练 | 感知机学习规则：w += lr * label * input，逐轮修正直到全对 |
| 二分搜索 | 维护候选区间 [lo, hi]，每次猜测取中点并收缩区间 |
| 音效引擎 | Sound 单例，钟琴音色 bell()（泛音 1×/2.76×/5.4×）+ 回声网络 |
| 进度系统 | 各章节完成点调用 completeChapter(key)，统一更新进度条与徽章 |
| 高清渲染 | Canvas 按 devicePixelRatio 缩放；visibilitychange 时暂停动画节省资源 |
Harness_deepseek/
├── index.html # 唯一的交付文件（约 91 KB，全部代码内嵌）
│ ├── <style> # 设计系统（CSS 变量 + 蓝图风 + 响应式 + 深色模式）
│ ├── <body> # 语义化结构：header / main(5 章节) / footer / 游戏覆盖层
│ └── <script> # 全部逻辑：路由 / 音效 / 各章节交互 / 进度 / 彩蛋 / 小游戏
└── README.md # 本文档
说明：网站为单文件架构，
index.html内部按注释区块清晰分段（设计系统、顶部导航、各章节 HTML、音效引擎、视图路由、各章节 JS、启动区），便于直接定位修改。
所有用户可见文字都在 index.html 的 HTML 区块中；部分动态文字（排序步骤提示、游戏提示等）在 <script> 的对应函数内。
编辑 <style> 顶部的 :root CSS 变量即可全局换肤：
:root {
--bg: #F4F5F7; /* 页面底色 */
--ink: #12203B; /* 主文字色 */
--accent: #FF5C1A; /* 强调橙 */
--blue: #1E5CFF; /* 主蓝 */
--gold: #FFB000; /* 高亮金 */
--green: #1F9D55; /* 成功绿 */
--red: #D64545; /* 警示红 */
}深色模式变量在 @media (prefers-color-scheme: dark) 块中。
- 在
VIEWS数组（JS 路由）中加入视图名 - 在
<main>中添加<section class="view" data-view="xxx" hidden>区块 - 在顶部
<nav class="tabs">添加导航链接 - （可选）在首页
.cards添加章节卡片，并在CHAPTER_KEYS中加入徽章 key
音效集中在 Sound 对象中，修改 bell() 的泛音比例/衰减时长，或直接改各音效的调用（click()、win() 等）即可。
游戏逻辑在 <script> 的"彩蛋：小游戏"区块：可改生命数（gLives）、游戏时长（gTime）、掉落速度、0/1 比例等。
| 能力 | 支持情况 |
|---|---|
| 浏览器 | Chrome / Edge / Firefox / Safari（近 5 年版本） |
| 设备 | 320px 手机 → 1920px 桌面；触控 + 鼠标 + 键盘 |
| 深色模式 | ✅ prefers-color-scheme: dark |
| 减弱动效 | ✅ prefers-reduced-motion: reduce（粒子静止、过渡瞬时） |
| 键盘操作 | 导航、滑块、按钮全部可 Tab / Enter / 方向键操作 |
| 性能 | Canvas 按 DPR 高清渲染；页面隐藏自动暂停动画；粒子数量随屏宽自适应 |
开发过程中使用 Playwright + 系统 Chrome 进行了自动化浏览器验证：
- 功能走查：5 章节交互、彩蛋触发、音效合成、进度徽章，共 30+ 项断言全过
- 视觉检查：布局断点、画布比例、颜色应用、深色模式、无水平溢出，25 项全过
- 专项测试：生命值机制（10 项）、音效引擎（8 项）、背景粒子（13 项）、彩蛋入口（9 项）
- 稳定性：全程无控制台错误、无页面异常
复测方式：使用 Playwright（
playwright-core+ 系统 Chrome）打开file:///.../index.html，按上述场景走查即可。
| 版本 | 内容 |
|---|---|
| v1.0 | 初始版本：首页 + 4 章节（二进制/神经元/排序/栈与队列），蓝图风设计，响应式 |
| v1.1 | 文案全面通俗化（面向小学生），术语改为生活化比喻 |
| v1.2 | 功能增强：第 5 章搜索（二分法）、小游戏、合成音效、进度徽章与进度条 |
| v1.3 | 小游戏增加生命值系统（3 条命）；音效升级为钟琴/木琴风格 |
| v1.4 | 全站背景优化（蓝图网格 + 漂浮粒子）；游戏入口改为连点 logo 彩蛋 |
MIT License © 2026 — 自由使用、修改与分享。
做给小朋友看的电脑科普 · 纯 HTML / CSS / JS，没有依赖，离线也能打开。