You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
4.0 KiB
80 lines
4.0 KiB
<h2>推荐设计：模块化分层架构</h2>
|
|
<p class="subtitle">清晰分层，每个模块职责单一，依赖明确</p>
|
|
|
|
<div class="architecture-diagram">
|
|
<svg width="680" height="520" viewBox="0 0 680 520">
|
|
<!-- Layers from bottom to top -->
|
|
<rect x="40" y="20" width="600" height="80" rx="8" fill="#e8f5e9" stroke="#2e7d32"/>
|
|
<text x="340" y="50" text-anchor="middle" font-size="16" font-weight="bold">Core Layer - 核心层</text>
|
|
<text x="340" y="70" text-anchor="middle" font-size="13">Game (Application) | EventBus | AssetManager | Ticker | Random | Logger</text>
|
|
|
|
<rect x="40" y="120" width="600" height="80" rx="8" fill="#e3f2fd" stroke="#1565c0"/>
|
|
<text x="340" y="150" text-anchor="middle" font-size="16" font-weight="bold">Scene Layer - 场景层</text>
|
|
<text x="340" y="170" text-anchor="middle" font-size="13">SceneManager | BaseScene | Transition | LifeCycle Hooks</text>
|
|
|
|
<rect x="40" y="220" width="600" height="80" rx="8" fill="#f3e5f5" stroke="#6a1b9a"/>
|
|
<text x="340" y="250" text-anchor="middle" font-size="16" font-weight="bold">Component Layer - 组件层</text>
|
|
<text x="340" y="270" text-anchor="middle" font-size="13">Button | Panel | Label | ProgressBar | List 等常用UI组件</text>
|
|
|
|
<rect x="40" y="320" width="600" height="80" rx="8" fill="#fff3e0" stroke="#e65100"/>
|
|
<text x="340" y="350" text-anchor="middle" font-size="16" font-weight="bold">Utils Layer - 工具层</text>
|
|
<text x="340" y="370" text-anchor="middle" font-size="13">Position (align) | Tween (animation) | Sound | Storage | Math | Random</text>
|
|
|
|
<rect x="40" y="420" width="600" height="70" rx="8" fill="#eceff1" stroke="#37474f"/>
|
|
<text x="340" y="455" text-anchor="middle" font-size="16" font-weight="bold">Game Content - 游戏内容层</text>
|
|
<text x="340" y="475" text-anchor="middle" font-size="13">你的游戏场景 / 关卡 / 游戏逻辑 在这里</text>
|
|
|
|
<!-- Arrows showing dependency direction -->
|
|
<defs>
|
|
<marker id="arrowhead2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
|
<polygon points="0 0, 10 3, 0 6" fill="#666"/>
|
|
</marker>
|
|
</defs>
|
|
<line x1="340" y1="100" x2="340" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/>
|
|
<line x1="340" y1="200" x2="340" y2="220" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/>
|
|
<line x1="340" y1="300" x2="340" y2="320" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/>
|
|
<line x1="340" y1="400" x2="340" y2="420" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/>
|
|
<text x="50" y="285" font-size="12" fill="#666">上层依赖下层 ↓</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<h3>主要改进点</h3>
|
|
<div class="pros-cons">
|
|
<div class="pros">
|
|
<h4>✓ 优点</h4>
|
|
<ul>
|
|
<li>每个层职责清晰，符合单一职责原则</li>
|
|
<li>完全 TypeScript 类型定义，完美的开发体验</li>
|
|
<li>依赖方向明确，易于测试和模块替换</li>
|
|
<li>保留自动扫描 page_*.ts 的便利特性</li>
|
|
<li>自动资源引用计数卸载，避免内存泄漏</li>
|
|
<li>添加了常用工具：tween 动画、统一事件总线、存储</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<h4> Tradeoffs</h4>
|
|
<ul>
|
|
<li>比原来多一些文件，但这是合理分工</li>
|
|
<li>需要一点时间适应新的API，但更直观</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle">这个架构你觉得对吗？方向是否符合你的预期？</p>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="approve" onclick="toggleSelect(this)">
|
|
<div class="letter">Y</div>
|
|
<div class="content">
|
|
<h4>方向正确，可以按这个设计来</h4>
|
|
<p>认可这个分层架构，继续下一步写详细设计文档</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="adjust" onclick="toggleSelect(this)">
|
|
<div class="letter">N</div>
|
|
<div class="content">
|
|
<h4>需要调整某些部分</h4>
|
|
<p>我会告诉你具体要改什么</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|