Cube Minesweeper 制作過程

💬Claude Code への指示

このゲームは Claude Code（Anthropic 公式の CLI ツール）に日本語で指示を出し、 対話的に開発しました。最初のプロンプトから公開まで、わずか数ステップです。

📖ソースコード解説

ゲーム全体は index.html の単一ファイル（HTML + CSS + JavaScript）で構成されています。 外部ライブラリ・フレームワークは一切使用していません。

1. CSS 3D キューブ

CSS の transform-style: preserve-3d と perspective で 3D 空間を作り、6つの .face 要素を translateZ / rotateX / rotateY で立方体に配置しています。

.face-front  { transform: translateZ(100px); }
.face-back   { transform: rotateY(180deg) translateZ(100px); }
.face-top    { transform: rotateX(90deg) translateZ(100px); }
.face-bottom { transform: rotateX(-90deg) translateZ(100px); }
.face-left   { transform: rotateY(-90deg) translateZ(100px); }
.face-right  { transform: rotateY(90deg) translateZ(100px); }

backface-visibility: hidden で裏面を非表示にし、 実際の立方体のように手前の3面だけが見えます。

2. 面をまたぐ隣接判定（核心アルゴリズム）

通常のマインスイーパーは 2D グリッドで周囲8マスを見ればよいですが、 立方体では面の端にあるセルの隣が別の面に回り込みます。 さらに立方体の頂点では3つの面が交わります。

この問題を、3D 座標上の頂点共有 で解決しています。

1. 各セルの 4つの角（頂点）を 3D 座標に変換
2. 全セルの頂点を座標ごとにグループ化
3. 同じ頂点を共有するセル同士を「隣接」と判定

// 例：Front 面のセル(r,c) の 4頂点を3D座標に変換
case 0: // Front: z=5
  for (let dx = 0; dx <= 1; dx++)
    for (let dy = 0; dy <= 1; dy++)
      corners.push([c + dx, 4 - r + dy, 5]);

この方法なら面をまたぐ辺の隣接も、頂点で3面が交わる角の隣接も、 座標の一致だけで自動的に正しく求まります。 6面×25セル＝150セルに対して事前計算するため、ゲーム中のパフォーマンスに影響しません。

3. ドラッグ vs クリック判定

セルがキューブ全面を覆っているため、ドラッグとクリックの区別が必要です。 mousedown / touchstart からの移動距離が 8px を超えたら回転、超えなければセルへのクリックとして処理しています。

// 移動距離が閾値を超えたらドラッグモード
if (|totalDx| > 8 || |totalDy| > 8) {
  pointerDidDrag = true;  // → キューブ回転
}
// mouseup 時にドラッグでなければ → セルクリック

4. 長押しでフラグ（モバイル対応）

スマートフォンには右クリックがないため、 400ms の長押しでフラグを立てられるようにしています。 長押し中はセルに赤枠のフィードバックを表示。 もちろん「掘る/旗」のモード切替ボタンでも操作可能です。

5. レスポンシブ対応

画面サイズに合わせて CSS transform: scale() でキューブ全体を拡大縮小。 clamp() でフォントサイズを画面幅に応じて自動調整。 touch-action: none でページのスクロール・ピンチズームを防止し、 全てのタッチ操作をゲーム側で制御しています。

🔧技術スタック

各技術の詳細

なぜこの構成か

• バンドラー・ビルドツール不要 ― HTML 1 ファイルなのでビルドステップがなく、そのままデプロイできる
• サーバーレス ― ゲームのロジックは全てクライアント側。サーバー費用ゼロ
• 高速配信 ― Cloudflare CDN により世界中のユーザーに低遅延で配信
• HTTPS 自動 ― Cloudflare Pages は SSL/TLS 証明書を自動発行
• 独自ドメイン不要 ― nishitani.pages.dev のサブドメインがすぐ使える

📁ファイル構成

nishitani/
├── index.html    ← ゲーム本体（HTML + CSS + JS、約 500 行）
└── about.html    ← このページ（制作過程・解説）

たった2ファイル。ビルド出力もなく、node_modules もなく、 package.json すら不要です。 wrangler pages deploy . でカレントディレクトリをそのままアップロードしています。

✨まとめ

「マインスイーパーをつくりたい」という一言から始まり、6回の指示で 3D キューブ版マインスイーパーの開発・デプロイ・モバイル対応・ドキュメント作成まで完了しました。

Claude Code はコード生成だけでなく、Cloudflare へのデプロイやバグ修正も 対話的に実行できるため、開発者がターミナルで行う作業の大部分を自然言語で指示できます。