AI（Claude）と Matter.js で八百屋の合体パズルを作って売るまで：注文どおりの出荷でだけ売上が入る仕組み、木箱のかたむけ、有名作の名前を使わない作り替え

2026年10月18日 2026年10月18日

tadashi

落ちてきた同じフルーツがくっついて大きくなる合体パズルを AI（Claude）と作り、note で体験版（無料）と完全版（300円）に分けて売るところまで進めました。ただの模倣で終わらないように「お客さんの注文どおりに出荷したときだけ売上が入る」「木箱をかたむけて転がす」という2つの仕組みを足しています。作る人向けに、指示の出し方、仕組みの足し方、コードの要点、確かめ方をまとめます。

※本記事には、筆者が note で販売しているゲームへのリンク（PR）が含まれます。

Contents

できたもの

『ごろごろフルーツ』という、ブラウザで遊ぶ八百屋の合体パズルです。

ごろごろフルーツの完全版の画面：上に注文票が3枚、木箱の中にメロン・もも・みかんなどが積まれ、注文に合うフルーツが点線の輪で囲まれている — 完全版の画面。注文に合うフルーツは点線の輪で囲まれ、タップすると出荷される

木箱にフルーツを落とし、同じフルーツがぶつかると1つ大きくなる（11種類、最大はスイカ）
店先に注文票が3枚並び、注文に合うフルーツを木箱の中でタップすると出荷されて売上になる。売上が入るのはこれだけ
両はしのボタンを押している間だけ木箱が11°かたむき、フルーツが転がる
待ちきれずに帰ったお客さんが3人で閉店、木箱からあふれても閉店
体験版はお客さん6人まで。完全版（note の有料記事の中にURL）は、お客さんが無制限で、注文がスイカまで広がり、記録が残る

体験版は無料で、ブラウザで開くだけで遊べます。

体験版をブラウザで開く（無料）

最初の指示は一言だった

最初に Claude に出した指示は、有名な合体パズルの名前を挙げて「〜モドキって作れる？」と聞いた一言です。

これだけで、物理エンジン（Matter.js）を使った合体パズルが1枚のHTMLで出てきました。

ここで止めると、ただの模倣です。

元になった有名作の名前は登録商標で、同名のアプリには開発元が指摘していく方針を公表しています。

遊び方（ルール）そのものは一般に著作権の対象になりませんが、売り物にするなら「その名前を使わない」「絵と進化の順番を自分で作る」「仕組みを足す」の3つが要ると判断しました。

仕組みを足す：売上は出荷でしか入らない

元の型は「合体したら点が入る」です。

これを「合体しても点は入らない。お客さんの注文どおりに出荷したときだけ売上が入る」に変えました。

注文票は3枠、お客さんごとに待ち時間があり、尽きると帰ります。

これで、大きいフルーツを「作る」だけでなく「いつ手放すか」の判断が入ります。

出荷するとそのフルーツが木箱から消えるので、上に乗っていたフルーツが崩れて合体が連鎖する、という元の型には無い動きも出ました。

難しさは「お届けしたお客さんの人数」で段を上げ（4人・10人・18人で次の段）、注文に出るフルーツ・個数・待ち時間を表で持たせています。

// 段（お届けした人数で上がる）
// w：注文に出るフルーツの重み
//    （4＝みかん … 10＝スイカ）
// q：個数の候補、pat：待ち時間の倍率
const TIERS = [
  { w: { 4: 5, 5: 4, 6: 1 },
    q: [1, 1, 2], pat: 1 },
  { w: { 4: 3, 5: 4, 6: 3, 7: 1 },
    q: [1, 2, 2], pat: 0.92 },
  { w: { 4: 1, 5: 3, 6: 3,
         7: 3, 8: 2, 9: 1 },
    q: [1, 2, 3], pat: 0.85 },
  { w: { 5: 2, 6: 3, 7: 3,
         8: 3, 9: 2, 10: 1 },
    q: [1, 2, 2], pat: 0.78 },
];

仕組みを足す：木箱をかたむける

もう1つの追加が「かたむけ」です。

物理の計算は木箱の座標系のまま、重力の向きだけを回します（実際のコードを短くしたもの）。

// 毎フレーム：かたむきを目標へ近づけ、
// 重力の向きだけを回す
const g = GRAVITY;
engine.gravity.x = g * Math.sin(tilt);
engine.gravity.y = g * Math.cos(tilt);

描画は、木箱ごとキャンバスを θ 回転させます。

実際に箱をかたむけたときと同じ動きになり、壁や床の当たり判定を作り替えずに済みました。

右の「かたむけ」ボタンを押して、木箱が右に傾いた画面 — 右の「かたむけ」を押している間。木箱ごと回して描き、物理は重力の向きだけを回している

つまずいたのは、回転した木箱の角がキャンバスからはみ出すことです。

キャンバスを木箱より一回り大きく取り、余白の幅は画面の幅から計算するようにして解決しました。

もう1つ、Matter.js の円は多角形で近似されるので、辺の数が少ない小さいフルーツは11°では転がりません。

辺の数を半径から決めて、最低20にしました。

// 辺の数は半径から（20〜40）
const sides = Math.max(20,
  Math.min(40, Math.round(f.r * 0.9)));
const b = M.Bodies.polygon(
  x, y, sides, f.r,
  { circleRadius: f.r, /* ほか */ });

体験版と完全版を1つのソースから作る

ソースは src/app.html の1枚だけです。

行だけの印（//#full 〜 //#end、//#trial 〜 //#end）で版ごとの部分を分け、build.py が体験版と完全版を書き出します。

完全版だけの処理（難しい注文の段・記録の保存と記録の欄）は、体験版のHTMLには入りません。上の表も、体験版には最初の段だけが入ります。体験版は、お客さんが6人来たら新しいお客さんを止めて、終わりの札を出します。

書体（Dela Gothic One・Yusei Magic・Zen Maru Gothic）は、ページに出てくる文字だけを切り出した WOFF2 を埋め込み、物理エンジンも埋め込んであります。

外への通信がゼロなので、DLsite や BOOTH 向けのオフライン版も同じソースから出せます。

確かめ方

Playwright（Python）で手元のサーバーから両方の版を開き、102項目を自動で確かめています。

落とす→お客さんが来る→タップで出荷→売上、かたむけ→戻る、スイカの即売り、3人逃して閉店、あふれて閉店、体験版が6人で終わる、保存できないブラウザ、ダーク・動きを減らす設定、幅320〜1100の画面。

ゲームの中に確かめ用のフック（window.__gorogoro）を置き、注文やフルーツを直接置けるようにすると、テストが短く書けます。

そのあと、作者とは別のAIエージェントに「壊しにかかる検査」を1回させました。指摘は25件で、全部直してから公開しています。重いものは3件でした。

ダークモードで、注文票の数字が背景とほぼ同じ色になって読めない
実際のスマホの画面の高さ（ブラウザのバーを除いた高さ）だと、上の売上の札と注文票が小さく縮む
体験版の中の note へのリンクが、仮のURLのまま

直したところには、指摘ごとに見張るテスト（49項目）を足しました。仮のURLが残っていたら、公開用の書き出しが止まるようにもしています。

記事の校閲（18件）も別のエージェントです。「大きさの比率は実物どおり」と書いていたのを、事実と違う（順番は実物どおりだが、比率はちがう）と指摘されて直しました。

かかった時間と、やってみて思ったこと

作業は2日です。10月15日に最初の一言で原型ができ、10月18日の夕方から夜にかけて、作り替え（注文と出荷・かたむけ・体験版と完全版）、確かめ、別のAIの点検、記事、公開までをしました。

いちばん大事だったのは、コードではなく「何を足せば自分のゲームと言えるか」を決めるところでした。

AIは言われたものをすぐ出してきますが、「それを売っていいか」「誰が買うか」は人が決めるしかありません。

遊んでみて気になったところがあれば、note の記事のコメントで教えてください。

体験版と完全版

体験版は、ブラウザで開くだけで遊べます（スマホは縦向き。パソコンはマウスかキーボード）。

体験版をブラウザで開く（無料）

完全版（お客さん無制限・注文はスイカまで・記録あり）は、note「余白の実験室」の記事の有料部分にURLがあります（300円・買い切り）。

note の記事を見る（PR）

※この記事は、AI（Claude）でブラウザのゲームを作って売るまでの記録です。動きは、パソコンの Chrome と、スマホの画面の大きさにしたブラウザで確かめています。実際のスマホでは確かめきれていないので、お使いの端末で動くかは体験版で確かめてください。同じ作り方の記録に、ギルド経営シミュレーションと、スマホ1台の2人対戦ゲームがあります。