V0とは
V0(ブイゼロ)とは、テキストからReactコードを生成してくれる生成システムです。
以下のライブラリを使用して、即座にコードとプレビューを提示してくれます
無料プラン
無料プランだと、1か月に200クレジット付与されます。
UIの初期生成で30クレジット使用されると、公式には載っています。
ただ、実際に使用してコンポーネントを生成すると、15クレジット消費されます。
v0.dev/chatから生成するとクレジットが消費されてないですが、1日に送れる回数が制限されています。(2024/09/09時点)
実際にどういう基準でクレジットが消費されるかちゃんと把握できてないです...
V0でゲーム作り
V0を使えば、ゲームもReactで生成できるとうわさを聞いたので、いろいろ試したいと思います
数当てゲーム
プレイヤーがコンピューターが生成した1~100の中の数字を当てるゲームです。
- ゲーム開始時に「ゲームを始める」ボタンを表示します。
- プレイ中は、数字を入力するフォームと「推測する」ボタンを表示します。
- プレイヤーが推測するたびに、正解との比較結果をメッセージとして表示します。
- 正解した場合、おめでとうメッセージと試行回数を表示し、「もう一度プレイ」ボタンを表示します。
三目並べ (Tic-Tac-Toe)
次は、2人プレイ用のゲームです。順番ずつに並べて先に縦横斜めで3つ並べたほうの価値になります。
- 3x3 のグリッドで三目並べのボードを表示します。
- プレイヤーが交互に X と O を配置できます。
- ゲームの状態(次のプレイヤー、勝者、または引き分け)を表示します。
- 勝者を判定し、ゲームが終了したときに結果を表示します。
- 「ゲームをリセット」ボタンで新しいゲームを開始できます。
シューティングゲーム?
赤色の箱に、緑色の球を当てていくゲームになりますが、うまく球が発射されませんでした...
- プレイヤーは画面中央(カメラの位置)にいます。
- 敵の宇宙船(赤い立方体)がランダムな位置に生成されます。
- スペースキーを押すと、プレイヤーの位置から弾(黄色い立方体)が発射されます。
- 弾が敵に当たると、敵が消滅し、スコアが増加します。
- 画面左上にスコアが表示されます。
- マウスでカメラ(プレイヤーの視点)を操作できます。
3Dゲームにまで対応しているのは驚きでした
最後に
無料枠の制限に達したのでここまでにします。
他にも面白そうなのがあったら、載せてみます!