Vibe Codingで簡単な数字パズルゲームを作ってみました。

紹介

Vibe Codingで簡単な数字ゲームを作ってみました。
私は機械学習エンジニアなので、フロントエンドやバックエンドの知識はあまりなく、AI主導開発でどこまでできるのかを試す機会になりました。

ゲームのルールは以下の通りです。

1. 合計が10になる2つの数字、または同じ数字を選んで消すことができます。
2. 2つの数字は縦・横、または斜めに隣接している必要があります。
3. ただし隣接していなくても、2つの数字の間が空きマスだけであれば消すことができます。
4. 2つの数字の間で行が変わっていても、その間に数字がなければ横に隣接しているものとして扱います（改行は左→右のみ有効！）
5. 消せる数字がない場合は数字を追加できます。
6. すべての数字を消せばゲームクリアです。

です。

開発環境

Cursor IDEを使いました。デフォルト設定でどこまでできるかを見たかったので、モデル指定やプロンプト設定は行いませんでした。

開発後記

1. 簡単で細かな作業には最高
   フロントエンドやサウンド、アニメーション効果はAIが提案したものをそのまま使いました。自分でやるなら、実装だけでなく何を使うか考えるだけでもかなり時間がかかったと思いますが、AIがゲームプレイに合う形でうまく実装してくれたおかげで、作業時間を大幅に短縮できました。
2. 論理的な作業はどうだろう？
   ゲームルールをしっかり説明しても、ゲームロジックと合わない実装をしたり、別のルールを追加すると既存機能を壊してしまうことが多く、確認や直接のコード修正が必要でした。もっとプロンプトを工夫したり、より良いモデルを使っていれば違ったかもしれませんが。

さいごに

AIのおかげで、簡単なプロトタイプなら何時間も勉強しなくても作れるようになった気がします。ですが、きちんと使うためにはやはり人が介入しなければならない部分も多いと感じました。とにかく、たくさん遊んでいただけるとうれしいです。

[lamanus]

数字の出現はランダムではないのでしょうか？ かなり非対称ですね。

[moripiri1234]

数字を4つ追加する機能は、残っている数字を順番に追加していく形式です。

[moripiri1234]

あと、モバイル最適化はAIがうまくできなかった点の一つなので、パソコンかタブレットで遊んでいただけると助かります。