今回はバイブコーディングを
うまく行かせるためのコツについてです。

解説動画はこちら




バイブコーディングのコツ


昨今ではもう当たり前になってきている
バイブコーディング

これをうまく活かせるための
コツについてお伝えします。


ポイントは3つだけ

1.マークダウン形式で指示する

2.ロールを与える

3.できるだけ具体的に指示する

これだけ守れたら十分です

それ以外の説明や細かい所は
動画の方を見ていただければと思います。



ゲーム作成プロンプト

この内容に、追加で仕様を加えるなどで
改変することができると思います。
# 依頼：HTML Canvasを使用した「掘削アクションパズル」の作成

以下の仕様に基づき、シングルファイルのHTML（HTML/CSS/JS一体型）でゲームを作成してください。

## 1. ゲーム概要
- タイトル：簡易版ドリラー
- プレイヤーは下方向に向かってブロックを掘り進み、スコアと深さを競う。
- 「酸素（AIR）」の概念があり、時間経過で減少する。

## 2. コアメカニクス
- **移動と掘削**: 
    - 矢印キーで移動。
    - 隣接する（上下左右）ブロックを、移動キー(左、下、右)で破壊。
    - 1ブロック下に進むごとに深さを +1する
    - 破壊できたらその方向に進む
- **ブロックの挙動**:
    - ブロックの種類は4種類
    - 青色の土ブロック : 1アクションで破壊可能、破壊するのに酸素ゲージを1消費する
    - 茶色の土ブロック : 2アクションで破壊可能、破壊するのに酸素ゲージを2消費する
    - 灰色の岩ブロック : 3アクションで破壊可能、破壊するのに酸素ゲージを5消費する
    - 銀色のメタルブロック : 破壊不能、移動アクション毎に酸素ゲージを2消費する
- **リソース管理**:
    - 酸素ゲージは最大100。毎秒1ずつ減少。
    - 特定のブロック（エアーカプセル）を取得すると酸素が15回復。
    - 特定のブロックの破壊でも酸素ゲージを消費する
    - 酸素ブロックはおよそ、30メートルに1つの割合で出現する
- **ゲーム管理**:
    - 画面読み込みと同時にゲーム開始
    - 酸素ゲージ0でゲームオーバー
    - スペースキー押下で再ゲームスタート

## 3. 画面構成
- 画面の上部と下部の2部構成
- 画面上部はスコアなどの表示ゾーン
- Canvasサイズ400x100
- 画面上部に左から「DEPTH（深さ）スコア」「AIR（残り酸素）ゲージ」を表示。
- DEPTHスコアの表示は画面左上に固定し、数値4桁で0埋めする
- AIRゲージは画面上部の中央に長めに固定
- AIRゲージ全体は白枠組みで、残り酸素を黄色で表現し右から左に向かって減るようにする
- AIRゲージの右側に残り酸素を数値で表示(MAX100で3桁0埋めする)
- 画面下部はブロックゾーン
- Canvasサイズ: 400x600（縦長）
- ブロックサイズ: 40x40のグリッド
- 掘り進めるごとに、うまく調整してスクロールするようにする
- 深さ10m毎にブロックキャンバスの左外側にその深さを数値で表示させる

## 4. ビジュアル・操作性
- ブロックの色は4色（青、茶、灰、銀）、それぞれ、四角で表現し、枠は白くする
- エアーカプセルは桃色の簡易的な丸型図形とする
- キャラクターは黒色の簡易的な下向きの三角形でOK。
- 操作：
    - Left/Right：移動
    - Down：下のブロックを掘る

## 5. 実装のステップ
1. Canvasのセットアップとゲームループ（requestAnimationFrame）の作成。
2. ブロック配置データの生成（配列管理）。
3. プレイヤーの移動と掘削処理。
4. ブロックの消滅ロジックの実装。
5. 酸素減少とゲームオーバー判定の実装。

まずは、これらを網羅した動くコードを出力してください。


これをLLMに直接放り投げれば
HTMLでJSを用いたゲームを作ってもらえると思います。

是非コピペしてみてください

それでは。




 
タグ ：
#プログラミング
#バイブコーディング
#ミスタードリラー
#js