2日目。ノスタルジックなものを作りたかった。
プロンプト#
こんな内容にした：
「Nokia 3310スタイルのスネークゲームを作って。LCDの緑のスクリーン、ピクセルブロック、そういうの全部。電話のフレームの中に入れて。」
これがほぼすべての指示だった。頭の中にははっきりしたビジュアルがあったが、実装の詳細はまったく伝えなかった。
作り方#
Watchfireはそのプロンプトを受け取り、ゲームエンジン、Nokiaのビジュアルスタイリング、サウンドエフェクト、モバイルコントロール、フォンフレームUIをカバーするタスクに分解した。ゲームロジック、LCDレンダリング、7セグメントスコア表示——これらすべてが1つのプロンプトから生まれた。
すべての決定を細かく指示することはなかった。求めるバイブを説明して、戻ってきたらプレイできるものができていた。
得られたもの#
このゲームは、どこまでも美学にこだわっていて驚かされた。
完全な電話機が作られていた。 ゲームのキャンバスだけじゃない。スピーカーグリル、NOKIAのブランド表示、Dパッド、アクションボタン、深みのある画面ベゼルを備えた完全なNokia 3310のフレームだ。電話本体にはグラデーションとシャドウがあり、立体感がある。フォンフレームを頼んだら、電話機が手に入った。
LCDスクリーンが本物らしい。 定番のNokiaグリーン（気になる人のために言うと#9bbc0f）、見えるピクセルグリッド、スキャンラインオーバーレイ、コーナーの画面グレアエフェクト。グリッドの各セルには実際のLCDセグメントをシミュレートする微妙な隙間がある。スネークの頭には小さなピクセルの目まで付いている。
7セグメントスコア表示がある。 画面に数字があるだけじゃない。実際のSVGレンダリングによる7セグメントLCDディスプレイが、電話のセカンダリディスプレイのようにゲーム画面の外に鎮座している。スコアとハイスコア、どちらも非アクティブセグメントのゴーストをしっかり再現してレンダリングされている。
食べ物が脈打つ。 食べ物ブロックにはサイン波アニメーションがあり、ゆっくりと鼓動する。食べるたびにスネークが速くなる。1ティック150msから始まり、最低50msまで下がっていく。難易度曲線はレベルごとにハードコードされているのではなく、ゲームループに組み込まれている。
レトロなサウンドエフェクト。 Web Audio APIを通じて生成されたスクエア波オシレーターのサウンド。スタート時には上昇トーン、食べると楽しいチャープ音、ゲームオーバーには下降する悲しいトーン。すべてランタイムで合成されており、オーディオファイルは不要。ミュート設定をlocalStorageに保存する機能まである。
ハイスコアの永続化。 最高スコアをlocalStorageに保存し、更新したときはパルスアニメーション付きの「NEW HIGH SCORE!」メッセージを表示する。ゲームオーバー画面にはCSSグリッドで作られたピクセルアートの骸骨アイコンがある。
モバイルコントロール。 タッチデバイスでは中央にポーズボタン付きのDパッドをレンダリングする。デスクトップでは、電話の美学に合わせた装飾的なボタンを表示する。デバイスの種類を検出して適応する。フォールバックとしてスワイプコントロールもある。
切り替え可能な電話フレーム。 完全なNokia電話フレームとゲーム画面だけのミニマルビューを切り替えられる。設定はlocalStorageに保存される。
数字で見る#
- ソースモジュール8個（GameBoard、StartScreen、GameOverScreen、PauseOverlay、ScoreDisplay、useSnakeGame、useSound、ページレイアウト）
- TypeScriptとReact約2,100行
- 外部ゲームライブラリはゼロ（Next.jsとReactのみ、ゲームロジックはすべてカスタムフックとCanvas）
- Web Audio APIによる合成サウンドエフェクト5つ
- 実際に手を動かした時間： プレイとプロンプト調整に20分程度
試してみる#
矢印キーまたはWASDで移動、スペースでポーズ。Dパッドコントロールでモバイルでも動作する。
2日目の評価#
Nokia フレームの中にスネークゲームを求めた。手に入れたのは、合成オーディオ、7セグメントディスプレイ、LCDスキャンラインエフェクト、スコア・サウンド設定・フレーム表示のlocalStorage永続化を備えた完全な電話シミュレーターだった。
際立っているのは、頼んでもいない細部にどれだけの作業が注ぎ込まれているかだ。画面のグレア。スピーカーグリルのドット。食べ物のパルスアニメーション。ゲームオーバー画面のピクセルアートの骸骨。これらは手作業で実装すると何時間もかかる磨き込みの判断で、それが無償で登場した。
自分でスネークを作れたか？時間があれば、たぶんそうだろう。でも、グリッドに緑の四角と得点カウンターを作っただけだっただろう。合成チップチューンオーディオとレスポンシブなモバイルコントロールを備えたNokia 3310シミュレーターは作らなかった。自分が作れていたものと実際に手に入れたものの差——それがこのチャレンジの意味そのものだ。
2日で2つのゲームを出荷。1日目のパターンが続いている：出発点はもはや空のファイルではなく、到達点は自分一人で目指せた場所をはるかに超えている。
これは30日間のバイブコーディングの2日目だ。AIアシステッドコーディングで30日間に30プロジェクトを出荷する過程を追いかけてほしい。
