AIと一緒にブラウザゲームを作って公開してみた話（Spider Solitaire／国旗神経衰弱）
- teru44
- 8 時間前
- 読了時間: 2分
🎧 音声で聴く（約3分）
※AI音声による読み上げです
ども。
てるよしネットのてるよしです。
最近、自分のサイトで遊べるゲームを2本作って公開しました。
何となく「やってみたらこうなった」という記録です☆
きっかけ
もともとカードゲームが好きで、「自分のサイトに置いてちょっと遊べたら面白いな」と思ったのがスタートでした。
(子どもたちが好きなゲームもヒントになった💡)
コードは書けないけど、AI（Claude）と対話しながら作れば何かになるんじゃないかと。
やってみたら、想像以上にちゃんとした形になりました。
視点だね👓️
Spider Solitaire（蜘蛛ソリティア）
Reactで1から組み立てて、カードの並びやデッキ生成、山札補充といった基本ロジックを実装。
こだわった点：
難易度3段階（1スート〜4スート）
カード裏面テーマ5種類（北斎風、スポーツ系などをBase64で埋め込み）
アンドゥ、ヒント、オートコンプリートまで実装
完成セットが消えるタイミングやカードをめくる順番のバグにはかなり詰まりましたが、粘り強くデバッグしてそれなりの手触りになりました。
毎朝このゲームをクリアしてから業務スタートしてたのは秘密！(沼ると最悪ｗ)
国旗神経衰弱
世界の国旗を覚えながら遊べる神経衰弱です。
世界6地域に分けて難易度3段階
国旗画像はflagcdn.comを使用（無料・商用OK）
カード裏面は自分で描いたイラストをBase64で埋め込み
スマホ表示は画面幅で列数が自動切替
開発中、ClaudeのArtifact環境では外部画像がブロックされて確認できなかったのですが、Vercelにデプロイして初めてブラウザ上でちゃんと表示されました。「あ、ちゃんと見えた」という瞬間はちょっと嬉しかったです。
公開（Vercel）まで
Vite＋Reactでプロジェクト作成 → JSXを差し替え → npm run build → npx vercel --prod
初回はnpmの権限エラーやログイン周りで少しつまずきましたが、URLが発行されて「実際に公開できた」という実感は格別でした。
やってみて思ったこと
AIと対話しながら作れば、コードが書けなくてもそれなりのものは形になる。
ただし、実際に動かしてみないと分からない部分も多く、デプロイ後の調整は思ったより重要でした。
試しに娘にテストプレイさせたところ、神経衰弱を普通に楽しんでくれていました。
「誰かが実際に遊ぶもの」になると、少し見え方が変わりますね。
次
「JATA DROP（スイカゲーム系）」も開発中です。
また進んだら記録として残します。
これまた沼るゲームじゃのうｗｗｗ
【今日の進捗：1mmでも進む】
・ゲームページ公開＆動作確認完了。（進捗1mm）
コメント