PROGRESS LAB

プログレスバー代替表現コレクション

どのバリエーションも el.value = 実進捗 を流し込むだけの共通API。 表示は実進捗に正直に従い、遊びは演出側にだけ宿る。

water — 水位型 完成

粒子物理(Matter.js)で水滴が注がれ水位=進捗。端末の傾きで水面が揺れ、 手描きの障害物で水滴の流路を作って遊べる。実進捗→放出→着水→水位の正直設計。

tnt — TNT爆破型 完成

実進捗の分だけTNTが土の地形に降り積もり、タップで着火→誘爆チェーン。 爆発は地面も掘る採掘ゲーム。自然発火と完了フィナーレで放置しても必ず完走。

breakout — ブロック崩し型 完成

実進捗が進むほどボールが中央から上へ次々投入される。パドルをマウス/タッチで 動かして跳ね返し、硬さ(HP)のあるブロックを崩す。破壊確定を実進捗で頭打ち=表示は実進捗に正直。 依存ゼロ(物理は自前)。

gourd — ひょうたん型(お宝キャッチ) 完成

実進捗の分だけ鉢からひょうたんのつるが幅いっぱいにうねって伸び、要所に実が生る。 成るとぱかっと割れて小判・達磨・富士などのお宝が飛び出し落下。カーソルで動くキャラで 受け止めて加点(50〜500点・高得点ほどギラギラ)、全部キャッチでPERFECT! 依存ゼロ。

goat — ヤギの草食み 完成

実進捗の分だけヤギが一面の草むらを端から食べて進む。たまに紫の毒草が生え、 食べられるとヤギが少しずつ具合が悪くなる(緑がかってフラフラに)。毒草をクリック/タップで 抜いて守ってあげよう。体調・毒は演出で進捗には影響しない。依存ゼロ(canvasのみ)。

stack — 積層ビルド 構想

処理ステップ=レイヤーが積み上がる。CSS 3D transformのみで依存ゼロ・軽量。 prototypes/ にReactスケッチあり。

orbit — 軌道吸収 構想

残タスクの粒子が軌道を周回し、処理されると中心核へ螺旋を描いて吸収される。 残量が粒子数で直感的に読める。

terrain — 地形生成 構想

進捗に応じてワイヤーフレームの山が隆起する。長時間処理の演出向き。

voxel — ボクセル組み立て 構想

成果物(ロゴ等の形状)がブロック単位で組み上がる。形状データ差し替え可能。