Codexで花火打ち上げゲームを作る方法
夜空をタップすると花火が打ち上がり、牡丹、菊、柳、ハートなどに咲くゲームです。粒子の動きと残光を組み合わせるだけで、画像素材がなくても華やかな体験を作れます。
このゲームで作っているもの
打ち上げ
タップ位置を目標にして、重力を受ける弾道を計算します。
爆発
円周やハート形へ粒子を飛ばし、種類ごとの輪郭を作ります。
残光
前のフレームを薄く残し、光の尾と水面への反射を表現します。
作る順番
- Canvasいっぱいに夜空と水面を描く。
- タップした位置へ飛ぶ打ち上げ玉を作る。
- 頂点で粒子へ分裂させ、速度・重力・寿命を持たせる。
- 花火の種類ごとに粒子の初速と並び方を変える。
- 自動ショー、フィナーレ、効果音、スマホ操作を追加する。
最初にCodexへ渡すプロンプト
HTML/CSS/JavaScriptだけで動く花火打ち上げゲームを作って。
Canvasを画面いっぱいに表示し、夜の湖を背景にする。
画面をクリックまたはタップした場所へ花火を打ち上げる。
花火は粒子で描画し、重力、減速、寿命、残光を入れる。
牡丹、菊、柳、リング、ハートの5種類を選べるようにする。
スマホでも遊べるようにし、外部ライブラリは使わない。
自動打ち上げとフィナーレボタンも付けて。完成度を上げる追加プロンプト
花火をもっと本物らしく調整して。
爆発直後は速く、その後は空気抵抗で減速させる。
明るい中心と細い尾を分け、水面には揺れる反射を入れる。
同時に大量の粒子が出ても重くならないよう上限を設ける。
画面下の種類選択は片手で押せるサイズにする。調整で差が出るところ
花火らしさは、粒子数より「最初の勢い」「減速」「消える直前のきらめき」で決まります。動きが均一だとCGの丸に見えるため、速度や寿命を少しずつばらつかせるのがポイントです。スマホでは粒子数の上限を下げると、見た目を保ちながら動作を軽くできます。
うまく見えない時の直し方
| 症状 | 調整する値 |
|---|---|
| 爆発が丸い点の集まりに見える | 初速と寿命に少し乱数を加え、中心の明るさと尾の細さを分けます。 |
| すぐ落ちて花火に見えない | 重力を弱めるか、爆発直後だけ減速率を小さくします。 |
| スマホで動きが重い | 画面サイズに応じて粒子数を減らし、消えた粒子を毎フレーム配列から除きます。 |
| タップ位置と爆発位置がずれる | Canvasの表示サイズではなく、内部解像度へ座標を換算してから目標位置を決めます。 |
公開前の確認
- PCのクリックとスマホのタップの両方で打ち上がるか。
- 画面を連打しても粒子が増え続けず、操作が止まらないか。
- 縦向き・横向きの切り替え後もCanvasが画面サイズに合うか。
- 効果音を使う場合、最初のユーザー操作後に再生を始めているか。
完成例はこのページ上部で実際に操作できます。プロンプトを一度で完成させようとせず、「打ち上げ」「爆発」「残光」「スマホ調整」の順に確認すると、どこで崩れたかを切り分けやすくなります。
