165 lines
8.8 KiB
HTML
165 lines
8.8 KiB
HTML
<!doctype html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>文明シミュレータ</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<main class="app">
|
||
<aside class="sidebar left-sidebar" aria-label="シミュレーションの操作">
|
||
<details class="panel map-guide">
|
||
<summary>ヘルプ</summary>
|
||
<h3>地図</h3>
|
||
<dl class="guide-list">
|
||
<div><dt>四角</dt><dd>都市。人口200–999 / 1000–3999 / 4000–5999 / 6000以上の4段階で大きくなります。</dd></div>
|
||
<div><dt>領土色</dt><dd>同色が同じ国家。茶色寄りは係争地です。</dd></div>
|
||
<div><dt class="guide-gold">黄色い道</dt><dd>都市間の交易路です。</dd></div>
|
||
<div><dt class="guide-red">赤い円・広がり</dt><dd>戦争や災害の影響です。</dd></div>
|
||
</dl>
|
||
<h3>操作</h3>
|
||
<p>再生成では世界サイズを選択します。介入ボタンは選択中、地図を続けてクリックして連続実行できます。もう一度同じボタンを押すと解除します。</p>
|
||
<p>災害発生は地点、都市建設は地点、交通接続は都市を2つ順に選択します。ユーザー建設都市は都市間隔・自動都市数上限を無視できますが、水域には建設できません。表示レイヤーで地形・資源・民族・人口圧力・国家・技術・交通量を切り替えます。</p>
|
||
<h3>主なパラメータ</h3>
|
||
<dl class="guide-list">
|
||
<div><dt>人口 / 人口圧力</dt><dd>都市は人口400で成立し、200未満で消滅します。人口圧力は地域人口と収容力の比です。</dd></div>
|
||
<div><dt>資源 / 肥沃度</dt><dd>資源は生活・都市経済に使われ、肥沃度は陸地の人口維持と農業に影響します。</dd></div>
|
||
<div><dt>農業 / 冶金</dt><dd>地域・都市の生産力や発展を支える技術です。</dd></div>
|
||
<div><dt>民族</dt><dd>環境・距離によって分化します。極小民族は周辺民族へ吸収されます。</dd></div>
|
||
<div><dt>交通量</dt><dd>人や交易の往来の強さ。交易路形成にも影響します。</dd></div>
|
||
<div><dt>忠誠度</dt><dd>都市の国家への帰属安定度。低下すると反乱につながります。</dd></div>
|
||
<div><dt>国庫</dt><dd>国家の共通資金。国庫で戦争や都市建設を行います。反乱時はいくらかが奪取されます。</dd></div>
|
||
<div><dt>正統性 / 結束</dt><dd>国家の統治安定性。低いほど危機や分裂の影響を受けやすくなります。</dd></div>
|
||
<div><dt>制度老朽化</dt><dd>時間とともに増え、忠誠度上限を下げます。老朽化が進むと制度改革が起こり、制度が新陳代謝されることもありますが、もしかしたら失敗するかもしれません。</dd></div>
|
||
<div><dt>国力</dt><dd>人口・国庫・忠誠度・技術などをまとめた国家の総合的な力です。</dd></div>
|
||
</dl>
|
||
<h3>歴史</h3>
|
||
<p>右側で世界の推移と国家の存続期間・出来事を確認できます。記号の意味は下の凡例に表示されます。</p>
|
||
<div id="eventLegend" class="event-legend"></div>
|
||
</details>
|
||
|
||
<div class="brand">
|
||
<h1>文明シミュレータ</h1>
|
||
<p>人口の移動、文化の分化、国家の興亡を観察します。</p>
|
||
<a class="return-link" href="https://2012r2.nishi.boats/~333/">333の部屋に戻る</a>
|
||
</div>
|
||
|
||
<section class="panel controls">
|
||
<div class="row row-two">
|
||
<button id="toggleRun" class="primary" type="button">一時停止</button>
|
||
<button id="resetWorld" type="button">再生成</button>
|
||
</div>
|
||
<label>
|
||
進行速度
|
||
<input id="speed" type="range" min="1" max="12" value="5">
|
||
</label>
|
||
|
||
<div class="intervention-tools" aria-label="世界への介入">
|
||
<span class="control-heading">世界への介入</span>
|
||
<div class="tool-row">
|
||
<button id="triggerDisaster" type="button" aria-pressed="false">災害発生</button>
|
||
<button id="buildCity" type="button" aria-pressed="false">都市建設</button>
|
||
<button id="connectCities" type="button" aria-pressed="false">交通接続</button>
|
||
</div>
|
||
<p id="interventionStatus" class="intervention-status">ボタンを選び、地図上をクリックして実行します。</p>
|
||
</div>
|
||
|
||
<label>
|
||
表示レイヤー
|
||
<select id="viewMode">
|
||
<option value="terrain">地形</option>
|
||
<option value="resources">資源</option>
|
||
<option value="ethnicity">民族</option>
|
||
<option value="pressure">人口圧力</option>
|
||
<option value="polities" selected>国家</option>
|
||
<option value="technology">技術</option>
|
||
<option value="pheromone">交通量</option>
|
||
</select>
|
||
</label>
|
||
</section>
|
||
|
||
<section class="panel ledger">
|
||
<h2>主な民族系統</h2>
|
||
<ol id="ethnicityList"></ol>
|
||
<div id="fpsCounter" class="fps-counter" aria-live="off">FPS --</div>
|
||
</section>
|
||
</aside>
|
||
|
||
<section class="sim">
|
||
<canvas id="world" width="960" height="960" aria-label="文明シミュレーションの地図"></canvas>
|
||
<div class="legend" id="legend"></div>
|
||
<div class="tooltip" id="tooltip" hidden></div>
|
||
</section>
|
||
|
||
<aside class="history-sidebar" aria-label="国家の歴史">
|
||
<div class="current-date" aria-live="polite"><span>現在</span><strong id="currentDate">0年 1月 第1週</strong></div>
|
||
<section class="panel history-panel">
|
||
<div class="history-header">
|
||
<h2>国家の興亡</h2>
|
||
<span id="historyRange">-</span>
|
||
</div>
|
||
<div class="world-trend-wrap">
|
||
<h3>世界の推移</h3>
|
||
<canvas id="worldTrendGraph" width="300" height="176" aria-label="地域人口、都市人口、都市数、国家数、民族数の推移"></canvas>
|
||
</div>
|
||
<div class="history-controls">
|
||
<select id="historyFilter" aria-label="国家の絞り込み">
|
||
<option value="all">すべて</option>
|
||
<option value="active">存続中</option>
|
||
<option value="ended">滅亡済み</option>
|
||
</select>
|
||
<select id="historySort" aria-label="国家の並び順">
|
||
<option value="oldest">建国順</option>
|
||
<option value="strongest">国力順</option>
|
||
<option value="largest">人口順</option>
|
||
</select>
|
||
<select id="historyMetric" aria-label="歴史の表示指標">
|
||
<option value="power">国力</option>
|
||
<option value="population">人口</option>
|
||
<option value="cities">都市数</option>
|
||
<option value="loyalty">忠誠度</option>
|
||
</select>
|
||
</div>
|
||
<div class="history-group-controls" aria-label="歴史グラフの表示">
|
||
<button id="toggleActiveStates" type="button" aria-pressed="true">存続中</button>
|
||
<button id="togglePastStates" type="button" aria-pressed="true">滅亡済み</button>
|
||
<button id="toggleEventIcons" type="button" aria-pressed="true">出来事アイコン</button>
|
||
</div>
|
||
<div class="state-graph-scroll">
|
||
<canvas id="stateGraph" width="300" height="720" aria-label="国家の存続期間のグラフ"></canvas>
|
||
<div id="stateGraphTooltip" class="state-graph-tooltip" hidden></div>
|
||
</div>
|
||
<div id="stateGraphInfo" class="state-graph-info"></div>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
<dialog id="regenerateDialog" class="regenerate-dialog">
|
||
<form class="regenerate-form" method="dialog">
|
||
<h2>世界を再生成</h2>
|
||
<label>
|
||
世界の大きさ
|
||
<select id="worldSize">
|
||
<option value="128">128 × 128</option>
|
||
<option value="160" selected>160 × 160</option>
|
||
<option value="220">220 × 220</option>
|
||
<option value="280">280 × 280</option>
|
||
</select>
|
||
</label>
|
||
<p>再生成すると現在の世界は破棄されます。</p>
|
||
<div class="dialog-actions">
|
||
<button id="cancelRegenerate" type="button">キャンセル</button>
|
||
<button id="confirmRegenerate" class="primary" type="button">再生成</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<script src="config.js"></script>
|
||
<script src="utils.js"></script>
|
||
<script src="app-state.js"></script>
|
||
<script src="engine.js"></script>
|
||
<script src="render.js"></script>
|
||
<script src="boot.js"></script>
|
||
</body>
|
||
</html>
|