4日目。Tetrisは誰もが知っているゲームだ。だからこそ良いテストになる。どんな感触であるべきかを知っているので、何かがおかしいとすぐに気づく。
プロンプト#
「3Dスタイルのブロック、音楽、サウンドエフェクトを備えたウェブベースのTetrisゲームを作りたい」
制作過程#
このプロジェクトも他と同様に Watchfire を通して進めた。リポジトリのパッケージ名がその経緯を物語っている: watchfire-0001-initialize-nextjs-project-with。単一のプロンプトから始まり、Watchfire がそれをタスクに分解した。プロジェクトのセットアップ、ゲームの状態管理、ボードレンダラー、回転状態を持つピースの定義、オーディオシステム、UIコンポーネントをそれぞれカバーした。
採用されたアーキテクチャは React + hooks だった。コアロジックを3つのカスタムフックで処理している: useGameState はゲームのリデューサーとティックループ、useGameMusic はコロベイニキのテーマ曲、useSoundEffects はすべてのゲーム内オーディオを担当する。ゲームの状態自体は、移動・回転・ハードドロップ・ポーズのすべてのアクションに対応した適切なリデューサーとして実装されている。壁蹴り、ライン消去、レベル進行、スコアリング。Tetris の基礎的な要素をすべて備えている。
完成したもの#
これは正直、驚かされた。
ブロックに本物の立体感がある。 テトロミノの種類ごとに独自のカラースキームがあり、メインカラー、左上エッジのハイライト、右下エッジのシャドウ、そしてグロウエフェクトを持つ。Iピースは青みがかったシアンでソフトなブルーのグロウ。Tピースはパープル。Zピースはレッド。暗いグリッドの上に小さな3Dキャンディのように見える。「3Dスタイルのブロック」と頼んだら、本当に磨き込まれた見た目のものが返ってきた。
コロベイニキのテーマ曲が流れる。 Web Audio API を使ってリアルタイムに生成された本物のTetrisメロディ。音声ファイルはゼロ。オシレーターとゲインノードをその場で作り、矩形波のメロディとトライアングル波のベースラインを演奏し、シームレスにループする。音楽はレベルアップするにつれて速くなり、レベル0の1.0倍からレベル15の1.5倍まで変化する。ミュート設定も localStorage に保存される。
サウンドエフェクトが驚くほど良い。 8種類のサウンドエフェクトがある: 移動のクリック音、回転のウォッシュ音、ピースが着地するときのダッド音（衝撃感を出すノイズバッファ付き）、ライン消去のアルペジオ、4ライン同時消去の特別なTetrisファンファーレ、ハードドロップのスウォッシュ音、悲しく下降するゲームオーバーのアルペジオ、そして祝祭感のあるレベルアップジングル。すべて合成音。どこにも音声ファイルは存在しない。
本物のTetrisの機能をすべて備えている。 次のピースのプレビュー、適切な倍率によるスコア計算（シングル100、ダブル300、トリプル500、Tetris 800）、10ライン消去ごとのレベル進行、実際に速くなるスピード、ハイスコアの保存、ポーズと再開、そして最終スタッツとハイスコアを表示するゲームオーバー画面。
操作感が正しい。 移動は矢印キーまたはWASD、回転は W または上矢印で時計回り、Z で反時計回り、Space でハードドロップ、P または Escape でポーズ。端の近くで回転してもピースが壁から離れるように壁蹴りも実装されている。
数字で見る#
- ソースファイル22個 (コンポーネント、フック、定数、型に分散)
- TypeScript 約2,000行
- 8種類の合成サウンドエフェクト + フルループサウンドトラック
- 7種類のテトロミノ × 4回転状態 (形定義28種)
- 16段階のスピードレベル (1000msから100ms/ティック)
- 音声ファイル0個 (プロジェクト全体で)
試してみる#
移動は矢印キーまたはWASD、ハードドロップは Space、ポーズは P。デスクトップでの動作が最適。
Day 4 の評価#
4日が経ち、私はクラシックゲームをプレイテストできる速さよりも早く作れるようになっている。今や本当のボトルネックはそこだ。コーディングでも、デバッグでもない。プレイテストだ。
このTetrisクローンは本当に楽しい。3Dブロックのスタイリングが個性を生み出し、コロベイニキのテーマが本物らしさを演出し、サウンドデザインがあらゆる操作に気持ちよいフィードバックを加えている。オーディオがすべてオシレーターとノイズバッファから手続き的に生成されているという事実は、正直なところ驚異的だ。このプロジェクト全体に音声ファイルは一つも存在しない。
驚かされ続けるのは、その完成度だ。3Dブロックと音楽付きのTetrisを頼んだら、壁蹴り、ハイスコア保存、レベル別スコア倍率、グラデーションボタン付きのポーズ画面、localStorage に保存されるミュート状態、そしてハイスコアを更新したか教えてくれるゲームオーバーパネルが返ってきた。これらはいずれ自分で追加を頼んでいたはずのものばかりだが、その必要がなかった。
壁蹴りの実装は公式Tetrisガイドラインほど精密か？おそらくそうではない。スコアリングシステムは100%本物に忠実か？近いが、仕様書と照合したわけではない。1日プロジェクトにはそのどれも重要ではない。重要なのは、動いていること、感触が良いこと、そして誰かが今すぐプレイできることだ。
これは 30 Days of Vibe Coding の4日目です。AI支援コーディングで30日間に30プロジェクトをリリースする様子をフォローしてください。
