test01/docs/项目结构图与运行入口说明.md

项目结构图与运行入口说明（1 分钟版）

一、项目结构图

test/
├─ index.html                     # 页面入口（直接在浏览器打开）
├─ styles.css                     # 页面样式
├─ app.js                         # 生命游戏核心引擎 + UI 交互控制
├─ tests/
│  └─ life-demo.test.js           # Node 测试（核心规则与状态逻辑）
└─ docs/
   └─ 项目结构图与运行入口说明.md   # 本说明文档

二、运行入口

1) 浏览器入口（交互演示）

• 入口文件：index.html
• 加载脚本：index.html 底部通过 <script src="./app.js"></script> 引入引擎与交互逻辑。
• 打开方式：双击 index.html（或在浏览器中打开本地文件）。

2) 脚本初始化入口

• app.js 在 DOMContentLoaded 后执行 initDemo()，完成：
  • 初始状态创建（默认预设、网格尺寸、暂停状态）
  • 画布渲染与动画循环
  • 控件事件绑定（开始/暂停、单步、清空、随机、重置预设、速度滑条）
  • 画布点击/拖拽绘制

三、关键代码定位

• 预设图案定义：app.js:4
• 交互初始化入口：app.js:368
• 开始/暂停等主控事件：app.js:430
• Node 导出（供测试复用）：app.js:540
• 测试起始位置：tests/life-demo.test.js:14

四、测试入口

• 测试文件：tests/life-demo.test.js
• 推荐命令（当前环境可用）：

node tests/life-demo.test.js

说明：在当前受限环境下，node --test tests/life-demo.test.js 可能因子进程权限报 EPERM，但直接执行测试文件可正常完成 9 项测试。