Bharath-V26/devops-incident-simulator

# 🎮 OpsBreaker — DevOps 故障模拟器 OpsBreaker 是一款基于浏览器的培训游戏。它**零依赖且无需构建步骤** —— 纯粹的 HTML/CSS/JavaScript，只需打开单个文件即可运行。你将沿着一条**学习路径**（Learning Path）前进：每个轨道（Linux、Networking、Docker、Kubernetes 等）都从简短的 *基础* 测验开始，随后解锁你在模拟终端中进行诊断的实战 *故障* 场景。 ## ✨ 功能 - **📚 学习路径** — 每个轨道都是有序的 **关卡**（level）列表。仪表盘会显示共有多少个 **关卡** 和 **步骤**（step），以及你已经完成了多少。关卡会逐一解锁。 - **基础优先的难度曲线** — 每个轨道都从简单的命令回忆测验开始（源自“100 个实用的 Linux 命令”参考），然后才进入较难的生产场景。 - **模拟终端** — 输入真实的 Linux/DevOps 命令（`df -h`、`ps aux`、`kubectl get pods`、`docker logs` 等），并在模拟的文件系统上获得逼真的输出。 - **故障场景** — 涵盖 13 个轨道的磁盘已满、OOM killer、崩溃循环、DNS 故障等。 - **始终可见的提交按钮** — “完成关卡 / 解决故障”按钮从一开始就显示，直到每一个步骤都完成后才会启用。 - **对新手友好的测验** — 答错可以重试（没有强制锁定），答对后会显示简短的解释。 - **进度与持久化** — 关卡完成情况、XP、连续记录（streak）、成就和本地排行榜都会保存到 `localStorage`。 - **技能树、成就、SLA 计时器、系统监视器、网络拓扑图** 以及 CRT 终端美学。 ## 🚀 运行方式 它是完全客户端的。以下任何方式均可： **选项 A — 直接打开文件** ``` # 只需在 browser 中打开 index.html xdg-open index.html # Linux open index.html # macOS ``` **选项 B — 本地运行（推荐）** ``` # Python (built-in) python3 -m http.server 9090 # 然后访问 http://localhost:9090 # 或 Node npx serve . ``` 然后点击 **📚 学习路径（LEARNING PATH）**，从 Linux 基础开始。 ## 🗂️ 项目结构 ``` game/ ├── index.html # Single entry point (all screens + modals) ├── css/ │ ├── main.css # Theme variables, layout, menu │ ├── terminal.css # Terminal styling │ ├── dashboard.css # HUD panels + Learning Path dashboard │ └── modals.css # Dialogs ├── js/ │ ├── data/ │ │ ├── filesystem.js # Simulated Linux filesystem │ │ ├── incidents.js # Scenario incidents (per track) │ │ ├── levels.js # Beginner "basics" lessons + level ordering │ │ ├── skilltree.js # Category unlock graph │ │ └── achievements.js # Achievement definitions │ ├── core/ │ │ ├── state.js # Game state + persistence (incl. levelProgress) │ │ ├── terminal.js # Terminal emulator │ │ ├── commands.js # Command definitions │ │ ├── incidents.js # Incident lifecycle, scoring, step validation │ │ └── network-map.js # Canvas network topology │ ├── ui/ │ │ ├── hud.js # Real-time HUD + resolve/submit button │ │ ├── dashboard.js # Learning Path level dashboard │ │ ├── skilltree.js # Skill tree screen │ │ ├── modals.js # Modal/dialog manager │ │ ├── toast.js # Toast notifications │ │ └── boot.js # Boot animation │ └── main.js # Bootstrap, navigation, event wiring ├── ARCHITECTURE.md # Technical deep-dive ├── QUICKSTART.md # 30-second start guide └── START_HERE.md # Orientation ``` ## 🧩 内容组织方式 一个 **轨道**（track）（例如 `linux-basics`）包含有序的 **关卡**（level）： 1. **基础课程**（`kind: 'lesson'`） — 在 `js/data/levels.js` 中以 `LESSON_DEFS` 的形式紧凑定义，并由 `makeLesson()` 进行扩展。每个问题对应一个步骤；回答完所有问题即可完成关卡。 2. **场景故障**（`kind: 'scenario'`） — 在 `js/data/incidents.js` 中定义。你需要在终端中对其进行诊断并回答决策问题。 `getLevelsForCategory(id)` 会先返回课程，然后返回场景。仪表盘（`js/ui/dashboard.js`）会根据锁定/进度状态对它们进行渲染。 **添加一个初级课程** — 在 `js/data/levels.js` 中向 `LESSON_DEFS` 追加配置： ``` { id: 'linux-l5-archives', category: 'linux-basics', level: 5, icon: '🐧', title: 'Level 5 — Archives & Compression', intro: 'Bundle and compress files with tar, zip and unzip.', questions: [ { label: 'Create a tarball', q: 'Which command creates a gzipped tar archive?', options: ['tar -czvf a.tgz dir', 'zip a.zip dir', 'gz dir', 'pack dir'], correct: 0, explain: 'tar -czvf creates a gzip-compressed archive.' }, // … ], } ``` ## 🛣️ 路线图 - 🐳 **Docker 打包** — 提供容器镜像，使其能在任何设备上以相同方式运行。 - 🗄️ **后端（Redis + database）** — 将进度/排行榜转移至服务端，以实现跨设备同步和多人游戏。 - 🌐 **托管** — 部署以供分享/分发。 ## 🛠️ 技术 原生 **HTML5 + CSS3 + JavaScript**。无框架、无打包工具、无 npm、（目前）无后端。首次加载后可离线运行。 ## 📄 许可证 待定。

标签：数据可视化, 自定义脚本