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.
104 lines
5.6 KiB
104 lines
5.6 KiB
<h2>当前架构 - PixiJS 游戏开发框架</h2>
|
|
<p class="subtitle">现有代码结构分析</p>
|
|
|
|
<div class="architecture-diagram">
|
|
<svg width="700" height="480" viewBox="0 0 700 480">
|
|
<!-- Main -->
|
|
<rect x="250" y="20" width="200" height="60" rx="8" fill="#e1f5fe" stroke="#0288d1"/>
|
|
<text x="350" y="55" text-anchor="middle" font-size="14">main.ts</text>
|
|
|
|
<!-- Game Singletons -->
|
|
<rect x="100" y="120" width="160" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/>
|
|
<text x="180" y="150" text-anchor="middle" font-size="14">Game (Singleton)</text>
|
|
<text x="180" y="170" text-anchor="middle" font-size="12">Renderer / Stage / Ticker</text>
|
|
|
|
<rect x="300" y="120" width="160" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/>
|
|
<text x="380" y="150" text-anchor="middle" font-size="14">Stage (Singleton)</text>
|
|
<text x="380" y="170" text-anchor="middle" font-size="12">Scene Management</text>
|
|
|
|
<rect x="500" y="120" width="130" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/>
|
|
<text x="565" y="150" text-anchor="middle" font-size="14">Assets</text>
|
|
<text x="565" y="170" text-anchor="middle" font-size="12">Bundle Loading</text>
|
|
|
|
<!-- Windows / Scenes -->
|
|
<rect x="25" y="230" width="180" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/>
|
|
<text x="115" y="275" text-anchor="middle" font-size="14">defineWindow()</text>
|
|
<text x="115" y="295" text-anchor="middle" font-size="12">Auto-imported from</text>
|
|
<text x="115" y="315" text-anchor="middle" font-size="12">src/stages/**/page_*.ts</text>
|
|
|
|
<rect x="240" y="230" width="180" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/>
|
|
<text x="330" y="260" text-anchor="middle" font-size="14">IWindow Interface</text>
|
|
<text x="330" y="280" text-anchor="middle" font-size="12">layout / onLoad /</text>
|
|
<text x="330" y="300" text-anchor="middle" font-size="12">onUnLoad / update /</text>
|
|
<text x="330" y="320" text-anchor="middle" font-size="12">lateUpdate</text>
|
|
|
|
<rect x="460" y="230" width="190" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/>
|
|
<text x="555" y="260" text-anchor="middle" font-size="14">Two Scene Types</text>
|
|
<text x="555" y="280" text-anchor="middle" font-size="12">• Normal - destroyed on exit</text>
|
|
<text x="555" y="300" text-anchor="middle" font-size="12">• Resident - always visible</text>
|
|
<text x="555" y="320" text-anchor="middle" font-size="12">supports hold-last option</text>
|
|
|
|
<!-- Components -->
|
|
<rect x="50" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/>
|
|
<text x="115" y="400" text-anchor="middle" font-size="14">Button</text>
|
|
<text x="115" text-anchor="middle" y="420" font-size="12">NineSlice + press</text>
|
|
<text x="115" text-anchor="middle" y="435" font-size="12">state feedback</text>
|
|
|
|
<rect x="220" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/>
|
|
<text x="285" y="400" text-anchor="middle" font-size="14">Position</text>
|
|
<text x="285" text-anchor="middle" y="420" font-size="12">Centering /</text>
|
|
<text x="285" text-anchor="middle" y="435" font-size="12">alignment helpers</text>
|
|
|
|
<rect x="390" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/>
|
|
<text x="455" y="400" text-anchor="middle" font-size="14">Sound</text>
|
|
<text x="455" text-anchor="middle" y="420" font-size="12">@pixi/sound</text>
|
|
<text x="455" text-anchor="middle" y="435" font-size="12">integration</text>
|
|
|
|
<rect x="560" y="365" width="110" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/>
|
|
<text x="615" y="400" text-anchor="middle" font-size="14">Utils</text>
|
|
<text x="615" text-anchor="middle" y="420" font-size="12">Sprite</text>
|
|
<text x="615" text-anchor="middle" y="435" font-size="12">helpers</text>
|
|
|
|
<!-- Arrows -->
|
|
<defs>
|
|
<marker id="arrowhead" 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="350" y1="80" x2="180" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<line x1="350" y1="80" x2="380" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<line x1="350" y1="80" x2="565" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<line x1="380" y1="190" x2="115" y2="230" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<line x1="380" y1="190" x2="330" y2="230" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="subtitle">我已经探索完代码，这是一个基于 PixiJS v8 的小游戏框架，已经具备了基本的场景管理、资源加载、组件系统。现在请回答我的第一个问题：</p>
|
|
|
|
<div class="section">
|
|
<h3>这个框架你主要用来开发什么类型的游戏？</h3>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="small" onclick="toggleSelect(this)">
|
|
<div class="letter">A</div>
|
|
<div class="content">
|
|
<h4>小型休闲游戏 / 点击类游戏</h4>
|
|
<p>单场景或少数场景，简单交互，放置点击类玩法</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="mid" onclick="toggleSelect(this)">
|
|
<div class="letter">B</div>
|
|
<div class="content">
|
|
<h4>中型游戏 - 多关卡多场景</h4>
|
|
<p>多个关卡，复杂的UI流程，多个场景切换</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="multiple" onclick="toggleSelect(this)">
|
|
<div class="letter">C</div>
|
|
<div class="content">
|
|
<h4>不确定/探索中</h4>
|
|
<p>框架还在演化，想先做个好的基础再看</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|