ParticlesLife.html/index.html at main · onenok/ParticlesLife.html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!--
 * Copyright (c) 2024 OneNok_HK
 * Licensed under the MIT License. See LICENSE file in the project root for full license information.
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>particles life</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
    <script src="ui-range.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button id="toggle-controls">☰</button>
    <div id="controls">
        <div class="rules-container">
            <h3>📋 粒子系統設置</h3>
            <div class="control-section">
                <h3>基本設置</h3>
                <div>
                    <label for="particle-types">粒子類型數量:</label>
                    <input type="number" id="particle-types" min="1" max="10" value="3">
                </div>
            </div>

            <div id="particle-settings" class="no-background">
                <!-- 動態生成的粒子設置 -->
            </div>

            <div id="interaction-matrix" class="no-background">
                <!-- 動態生成的交互矩陣 -->
            </div>
        </div>

        <div class="toggle-container">
            <label for="isThrough" class="toggle-label">🔁 無邊界模式</label>
            <div class="toggle-switch">
                <input type="checkbox" id="isThrough">
                <span class="slider"></span>
            </div>
        </div>

        <!-- 將按鈕組重組織並添加樣式 -->
        <div class="button-group">
            <!-- 基本操作按鈕 -->
            <div class="control-section">
                <h3>🎮 基本操作</h3>
                <div class="button-container">
                    <button id="randomize-button" class="styled-button">🎲 隨機化所有值(r)</button>
                    <button id="restart-button" class="styled-button">🔄 重新開始遊戲(s)</button>
                    <button id="randomize-and-restart-button" class="styled-button">🎯 隨機化並重新開始(f)</button>
                </div>
            </div>

            <!-- 規則導入導出按鈕 -->
            <div class="control-section">
                <h3>💾 規則管理</h3>
                <div class="button-container">
                    <button id="export-rules" class="styled-button">📤 匯出規則</button>
                    <button id="import-rules" class="styled-button">📥 導入規則</button>
                    <button id="import-rules-and-restart" class="styled-button">📋 導入規則並重新開始</button>
                </div>
            </div>
            <input type="file" id="import-file" style="display: none;">
        </div>

        <!-- 添加滑鼠吸引力滑塊 -->
        <div>
            <label for="mouse-force">滑鼠吸引力:</label>
            <input type="range" id="mouse-force" min="0" max="200" step="0.1" value="100">
            <input type="number" id="mouse-force-number" min="0" max="200" step="0.1" value="100">
        </div>
        <p class="description">按下 "x" 鍵可以持續吸引</p>
        <p class="description">按下 "z" 鍵可以鎖定吸力位置</p>
        <div class="control-section">
            <h3>物理參數</h3>
            <div class="control-item">
                <label for="t-half">速度半衰期(秒):</label>
                <input type="range" id="t-half" min="0.001" max="0.1" step="0.001" value="0.020">
                <input type="number" id="t-half-number" min="0.001" max="0.1" step="0.001" value="0.020">
            </div>
        </div>

        <div>
            <label for="updateInterval">最大更新次數上限:</label>
            <input type="range" id="updateInterval" min="0" max="1000" step="1" value="0">
            <div class="input-container">
                <input type="number" id="updateInterval-number" min="0" max="1000" step="1" value="0">
                <input class="no-hit-box" type="text" id="updateInterval-text" value="無上限" readonly>
            </div>
            <p class="description">UPS: Update Per Second，每秒更新次數</p>
            <p class="description">注意: 此功能用於鎖定更新間隔上限，如果電腦不能運行到那麼短的更新間隔，那麼你的電腦就無法運行到那麼短的更新間隔。</p>
        </div>
        <!--
         *   <div class="toggle-container">
         *       <label for="isUsingGrid" class="toggle-label">𝄜 使用網格分割(g)</label>
         *       <div class="toggle-switch">
         *           <input type="checkbox" id="isUsingGrid">
         *           <span class="slider"></span>
         *       </div>
         *   </div>
        -->
        <div class="control-section">
            <label for="threadMode" class="control-label">🔄 運算模式 (m)</label>
            <select id="threadMode" class="styled-select">
                <option value="multithread">多線程模式</option>
                <option value="multithread_gpu" disabled>GPU 加速模式 (開發中)</option>
                <option value="multithread_wasm" disabled>WebAssembly 模式 (開發中)</option>
            </select>
            <p class="description">選擇不同的運算模式以優化性能</p>
        </div>

        <!-- 在控制面板中添加性能數據顯示 -->
        <div id="performance-data">
            <h3>性能數據</h3>
            <p>渲染FPS: <span id="fps"></span><br>(這並不是遊戲每秒更新次數。)</p>
            <p>遊戲UPS: <span id="gameUPS"></span><br>(這是遊戲每秒更新次數。)</p>
            <p>粒子更新總時間:
                <br>當前: <span id="total-time"></span> ms
                <br>平均: <span id="total-time-average"></span> ms
                <br>最大: <span id="total-time-max"></span> ms
            </p>
            <p>粒子更新時間加法顯示:
                <br>重力影響計算時間 + 更新位置時間 + 粒子碰撞計算時間 + 粒子影響範圍計算時間
                <br><span id="total-time-add-show"></span>
            </p>
            <p>重力影響計算時間:
                <br>當前: <span id="g-Affect-Calc-time"></span> ms
                <br>平均: <span id="g-Affect-Calc-time-average"></span> ms
                <br>最大: <span id="g-Affect-Calc-time-max"></span> ms
                <br>單個粒子平均: <span id="g-Affect-Calc-time-single-average"></span> ms
                <br>每次理論最大計算量: <span id="g-Affect-Calc-time-run-per-update"></span> 次
                <br>跳過的計算量: <span id="particleSkippedCountsTimes"></span> 次
                <br>實際計算量: <span id="particleValidCountsTimes"></span> 次
            </p>
            <p>更新位置時間:
                <br>當前: <span id="position-update-time"></span> ms
                <br>平均: <span id="position-update-time-average"></span> ms
                <br>最大: <span id="position-update-time-max"></span> ms
                <br>單次平均: <span id="position-update-time-single-average"></span> ms
                <br>每更新執行次數: <span id="position-update-time-run-per-update"></span> 次
            </p>
            <p>粒子碰撞計算時間:
                <br>當前: <span id="particle-collision-time"></span> ms
                <br>平均: <span id="particle-collision-time-average"></span> ms
                <br>最大: <span id="particle-collision-time-max"></span> ms
                <br>單次平均: <span id="particle-collision-time-single-average"></span> ms
                <br>每更新執行次數: <span id="particle-collision-time-run-per-update"></span> 次
            </p>
            <p>粒子影響範圍計算時間:
                <br>當前: <span id="Particle-Affect-Calc-time"></span> ms
                <br>平均: <span id="Particle-Affect-Calc-time-average"></span> ms
                <br>最大: <span id="Particle-Affect-Calc-time-max"></span> ms
            </p>
        </div>

        <!-- 在控制面板中添加新的控制元素 -->
        <div class="grid-controls">
            <h3>⌗ 網格設置</h3>
            <div class="toggle-container">
                <label for="showGrid" class="toggle-label">🔲 顯示網格</label>
                <div class="toggle-switch">
                    <input type="checkbox" id="showGrid">
                    <span class="slider"></span>
                </div>
            </div>
            <div>
                <p>當前所選單元格: <span id="selected-cell"></span></p>
                <p>網格寬度: <span id="grid-width"></span></p>
                <p>網格高度: <span id="grid-height"></span></p>
            </div>
            <div>
                <label for="setectGridDistance">模擬作用範圍: </label>
                <input type="range" id="setectGridDistance" min="10" max="500" step="10" value="300">
                <input type="number" id="setectGridDistance-number" min="10" max="500" step="10" value="300">
                <p class="description">相當於: <span id="grid-radius-cells">6</span> 個單元格的半徑</p>
            </div>
            <div>
                <label for="cell-size">網格大小:</label>
                <input type="range" id="cell-size" min="40" max="200" step="1" value="50">
                <input type="number" id="cell-size-number" min="40" max="200" step="1" value="50">
            </div>
        </div>

        <!-- 在性能數據顯示區域之後添加以下代碼 -->
        <div>
            <h3>☢️ 粒子影響範圍顯示</h3>
            <div class="toggle-container">
                <label for="enableParticleAffcetRadiusShow" class="toggle-label">啟用粒子影響範圍顯示: </label>
                <div class="toggle-switch">
                    <input type="checkbox" id="enableParticleAffcetRadiusShow">
                    <span class="slider"></span>
                </div>
            </div>
            <div id="particle-affcet-radius-show" class="no-background">
                <!-- 動態生成的粒子影響範圍顯示設置 -->
            </div>
            <div>
                <p>選中的粒子ID: <span id="selectedParticleId">無</span></p>
                <p>選中的粒子屬性: <span id="selectedParticleProperty"></span></p>
                <div id="particle-nearby-particles" class="no-background">
                    <!-- 動態生成的粒子範圍內的{i}號粒子數量 -->
                </div>
            </div>
        </div>
        <div>
            <p
                style="font-size: 1.2em; font-weight: bold; color: #ff6b6b; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin: 15px 0;">
                💬 交流與反饋</p>
            <a href="https://github.com/onenok/ParticlesLife.html/issues"
                style="text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; background: #24292e; color: white; width: fit-content; transition: background 0.2s;">
                <svg height="24" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="24" fill="currentColor">
                    <path
                        d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z">
                    </path>
                </svg>
                <span
                    style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;">GitHub
                    Issues</span>
            </a>
        </div>
    </div>
    <canvas id="board2d"></canvas>
</body>

</html>