如果你希望在一张网页里同时看到霓虹闪烁的赛博城市、突发停电带来的恐慌、备用电源无缝切入的冷静以及维修无人机赶赴现场完成“自救”的完整过程那今天的分享应该会比较对你的胃口。我们要完成的是一个跑在单个 HTML 文件里的城市模拟器Canvas 负责渲染雨夜中的高楼街区JavaScript 维护一套供电区域状态机让城市每隔一段时间随机发生断电随后自动切换备用电源并派出维修无人机到故障区域完成线路恢复。这个项目很适合用来练习 Canvas 绘图、状态机设计、动画循环和事件驱动编程也恰好能体验“让 AI 编程助手帮你从零到一搭原型、你再逐步完善核心逻辑”的开发模式。整套代码没有外部依赖不需要安装任何框架保存成一个.html文件就能直接运行。1. 背景与核心概念1.1 什么是“会断电自救的赛博城市”赛博朋克风格的城市视觉特征大家应该不陌生永不熄灭的霓虹灯、密集的高楼、连绵的雨夜、冷色调与洋红色调交织的街景。这些元素很适合用 Canvas 2D 来实现因为绘图方式足够直接而且可以在不依赖任何 UI 框架的情况下快速做出动态效果。“断电自救”则是一个偏模拟化的功能设计。它借鉴了现实电网中的“自愈”概念当某条线路发生故障时系统先通过备用电源保证关键区域不断电再由检修人员或自动设备定位故障点、完成修复、恢复市电。放到网页里我会把城市划分为多个供电区每个区域的状态在“正常、