打ち上げ花火
クリック/タップした座標へロケットが打ち上がり、放物運動で必ずその位置で開花する。重力+空気抵抗で減衰するパーティクルと加算合成の発光で花火らしさを出す。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 購入完了・達成画面の祝祭演出
- 年末年始・イベントLPの遊び要素
- タップで反応する余白のある背景
- 避ける場面
- 本文の上に重ねる（発光が文字を邪魔）
- 常時再生の背景（クリック起点の設計）
- 点滅に敏感な利用者向けの画面
- 構成要素
- 夜空（canvas）
- ロケットの軌跡
- 開花パーティクル
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（クリック位置へ打ち上げ）。装飾なので代替操作は不要。祝う意味はテキストで別に持つ
- 支援技術
canvas は aria-hidden の装飾。祝福・完了の意味はテキストで別に伝える。reduce 設定では尾を短く粒数を半減。visibilitychange で停止
- 動き
重力 900px/s² の放物運動でクリック位置に開花、粒は空気抵抗で減衰し 1〜2s で消える。軌跡は低アルファ塗りで残す
デザインの要点
- 初速は目標高さから逆算（vy0 = −√(2g·dy)）し、横速度は到達時間で割る。押した場所で必ず開くのが「反応した」実感になる
- 軌跡は clearRect ではなく低アルファ（0.16）の塗り重ねで消す。lighter のまま塗ると消えずに残る
- 開花は中心 15% を遅く白く、外側を速く彩色にする。一様な速度だと輪郭だけの輪になる
- 粒の大きさは 2^(乱数の和) で対数的に散らす。均一な粒は点描に見え、火花の粒感が出ない
実装メモ
軌跡は背景を低アルファで塗り重ねて消しています（globalCompositeOperationをsource-overに戻してから塗るのが必須。lighterのまま塗ると軌跡が消えず残り続けます）。実ページでは打ち上げ元(sx,sy)をボタン位置や画面下端に合わせて調整してください。
コード（コピーして使えます）
<div class="fw-wrap">
<canvas class="fw-canvas" aria-hidden="true"></canvas>
<p class="fw-hint">クリックした場所へ打ち上げます</p>
</div>