AIと一緒にブラウザゲームを作って公開してみた話（Spider Solitaire／国旗神経衰弱）
🎧 音声で聴く（約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）
Mình chơi xổ số kiểu cho vui là chính, coi kết quả như một thói quen giải trí chứ không đặt nặng chuyện đổi đời. Trước đây nghe bạn bè bàn tán đủ thứ “cầu kèo”, mình cũng tò mò thử theo dõi, thấy thỉnh thoảng có vài dạng số lặp lại nên cũng để ý thêm chút. Mỗi lần đọc mấy bài nhận định, mình hay ghi lại vài ý rồi chờ kết quả để so lại, coi như tự kiểm tra xem có bị tâm lý dẫn dắt không. https://soicauxsmb.io/du-doan-xo-so-dai-phat.html Có hôm trúng được chút thì vui thật, nhưng cũng nhiều bữa lệch hết nên mình luôn nhắc bản thân đừng tin quá. Nói chung đọc cho có…