Gemini Canvasで、この野菜や果物、冷蔵？冷凍？食材の正しい保存方法をゲーム感覚で学べるゲームを作成しました。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>野菜仕分けマスター – 正しい保存場所はどこ？</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'M PLUS Rounded 1c', sans-serif;
        }
        .drop-zone {
            transition: background-color 0.3s, transform 0.3s;
        }
        .drop-zone.drag-over {
            background-color: #a7f3d0; /* bg-green-200 */
            transform: scale(1.05);
            border-color: #10b981; /* border-green-500 */
        }
        .drop-zone .drop-zone-text {
            transition: transform 0.2s ease-out;
        }
        .drop-zone.drag-over .drop-zone-text {
            transform: scale(1.15);
            font-weight: 800; /* extra-bold */
        }
        .food-item {
            cursor: grab;
            user-select: none;
            touch-action: none;
        }
        .food-item:active {
            cursor: grabbing;
        }
        .food-item.is-mouse-dragging {
            opacity: 0.7;
        }
        .food-item.is-touch-dragging {
            visibility: hidden;
        }
        .food-item-ghost {
            position: fixed;
            pointer-events: none; /* ゴースト自体がイベントを拾わないようにする */
            z-index: 1000;
            transition: none !important; /* ドラッグ中はアニメーション不要 */
            transform: scale(1.05);
            opacity: 0.8;
        }
        .modal {
            display: none;
            animation: fadeIn 0.3s ease-out;
            z-index: 2000; /* 最前面に表示するためのz-indexを追加 */
        }
        .modal.show {
            display: flex;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .combo-animation {
            animation: combo-pop 0.5s ease-out;
        }
        @keyframes combo-pop {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .timer-bar-inner {
            transition: width 1s linear;
        }
        .correct-answer {
            animation: correct-pulse 0.6s ease-out;
        }
        @keyframes correct-pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 10px 20px rgba(16, 185, 129, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
    </style>
</head>
<body class="bg-green-50 text-gray-800 flex items-center justify-center min-h-screen">

    <div id="game-container" class="w-full max-w-5xl mx-auto p-4 md:p-6">
        <!-- Start Screen -->
        <div id="start-screen" class="text-center p-8 bg-white rounded-2xl shadow-lg">
            <h1 class="text-4xl md:text-5xl font-extrabold text-green-600 mb-4">野菜仕分けマスター</h1>
            <p class="text-lg text-gray-600 mb-8">食材を正しい保存場所に入れよう！</p>
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-700 mb-3">難易度を選択</h2>
                <div class="flex flex-wrap justify-center gap-3">
                    <button onclick="startGame('初級')" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">初級</button>
                    <button onclick="startGame('中級')" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">中級</button>
                    <button onclick="startGame('上級')" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">上級</button>
                    <button onclick="startGame('激辛')" class="bg-purple-700 hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">激辛</button>
                </div>
            </div>
             <div class="mb-8">
                <h2 class="text-2xl font-bold text-gray-700 mb-3">モードを選択</h2>
                <div class="flex flex-wrap justify-center gap-3">
                    <button onclick="setGameMode('normal')" id="normal-mode-btn" class="bg-gray-500 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">通常モード</button>
                    <button onclick="setGameMode('time-attack')" id="time-attack-mode-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">タイムアタック</button>
                 </div>
            </div>
            
            <div class="mt-8 text-left">
                <h2 class="text-2xl font-bold text-gray-700 mb-4 text-center">食品図鑑</h2>
                <p class="text-lg text-gray-600 mb-8">正しい保存方法を学んで、食品ロスをなくそう！</p>
                <div class="mb-4">
                    <input type="text" id="encyclopedia-search" placeholder="食材を検索..." class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition">
                </div>
                <div id="start-encyclopedia-container" class="max-h-96 overflow-y-auto p-2 grid grid-cols-2 md:grid-cols-4 gap-4">
                </div>
            </div>
        </div>

        <!-- Main Game Screen -->
        <div id="main-game" class="hidden">
            <div class="mb-4 p-4 bg-white rounded-2xl shadow-lg flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <div class="text-xl font-bold">スコア: <span id="score" class="text-green-600">0</span></div>
                    <div id="combo-display" class="text-2xl font-extrabold text-orange-500"></div>
                </div>
                <div id="remaining-questions" class="text-xl font-bold text-gray-700"></div>
                <div id="timer-container" class="w-full md:w-1/2 hidden">
                    <div class="text-center mb-1 font-bold">残り時間</div>
                    <div class="w-full bg-gray-200 rounded-full h-6">
                        <div id="timer-bar" class="bg-green-500 h-6 rounded-full timer-bar-inner"></div>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button onclick="showEncyclopedia()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105">食品図鑑</button>
                    <button onclick="endGame(false)" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105">終了</button>
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4 mb-4">
                <div id="常温" class="drop-zone border-4 border-dashed border-yellow-400 bg-yellow-100 rounded-2xl p-4 text-center h-28 md:h-40 flex items-center justify-center font-bold text-yellow-800 text-lg">
                    <span class="drop-zone-text">常温</span>
                </div>
                <div id="野菜室" class="drop-zone border-4 border-dashed border-green-400 bg-green-100 rounded-2xl p-4 text-center h-28 md:h-40 flex items-center justify-center font-bold text-green-800 text-lg">
                    <span class="drop-zone-text">野菜室</span>
                </div>
                <div id="冷蔵室" class="drop-zone border-4 border-dashed border-blue-400 bg-blue-100 rounded-2xl p-4 text-center h-28 md:h-40 flex items-center justify-center font-bold text-blue-800 text-lg">
                    <span class="drop-zone-text">冷蔵室</span>
                </div>
                <div id="チルド室" class="drop-zone border-4 border-dashed border-indigo-400 bg-indigo-100 rounded-2xl p-4 text-center h-28 md:h-40 flex items-center justify-center font-bold text-indigo-800 text-lg">
                    <span class="drop-zone-text">チルド室</span>
                </div>
                <div id="冷凍室" class="drop-zone border-4 border-dashed border-cyan-400 bg-cyan-100 rounded-2xl p-4 text-center h-28 md:h-40 flex items-center justify-center font-bold text-cyan-800 text-lg">
                    <span class="drop-zone-text">冷凍室</span>
                </div>
            </div>

            <div class="flex justify-center items-center h-48">
                <div id="food-item-container" class="flex flex-col items-center">
                    <p class="mb-2 text-lg font-bold text-gray-700">この食材はどこに入れる？</p>
                    <div id="current-food" draggable="true" class="food-item bg-white p-6 rounded-2xl shadow-lg flex items-center justify-center w-64 h-32">
                        <span id="food-name" class="text-3xl font-extrabold"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div id="modal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center p-4"> <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-lg w-full text-center"> <h2 id="modal-title" class="text-3xl font-extrabold mb-4"></h2> <div id="modal-content" class="text-left text-gray-700 space-y-4 mb-6"></div> <button id="modal-ok-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg shadow-md transition-transform transform hover:scale-105">OK</button> </div> </div>
    <div id="encyclopedia-modal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center p-4"> <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-2xl w-full h-5/6 flex flex-col"> <div class="flex justify-between items-center mb-4 border-b pb-3"> <h2 class="text-3xl font-extrabold text-blue-600">食品図鑑</h2> <button onclick="closeEncyclopedia()" class="text-gray-500 hover:text-gray-800 text-3xl">×</button> </div> <div id="encyclopedia-list" class="flex-grow overflow-y-auto space-y-2 pr-2"></div> </div> </div>
    <div id="result-modal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center p-4"> <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-lg w-full text-center"> <h2 id="result-title" class="text-4xl font-extrabold mb-4 text-yellow-500">ゲーム終了！</h2> <p class="text-lg mb-2">最終スコア</p> <p id="final-score" class="text-6xl font-bold mb-6 text-green-600">0</p> <p id="time-bonus-text" class="text-xl font-bold mb-4 text-orange-500 hidden"></p> <div class="flex justify-center gap-4 mb-6"><button id="share-button" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105">結果をXでシェア</button></div> <button onclick="restartGame()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg shadow-md transition-transform transform hover:scale-105">もう一度プレイ</button> </div> </div>

<script>
    // --- DOM Elements ---
    const startScreen = document.getElementById('start-screen');
    const mainGame = document.getElementById('main-game');
    const dropZones = document.querySelectorAll('.drop-zone');
    const currentFoodElement = document.getElementById('current-food');
    const foodNameElement = document.getElementById('food-name');
    const scoreElement = document.getElementById('score');
    const comboDisplay = document.getElementById('combo-display');
    const modal = document.getElementById('modal');
    const modalTitle = document.getElementById('modal-title');
    const modalContent = document.getElementById('modal-content');
    const modalOkButton = document.getElementById('modal-ok-button');
    const encyclopediaModal = document.getElementById('encyclopedia-modal');
    const encyclopediaList = document.getElementById('encyclopedia-list');
    const resultModal = document.getElementById('result-modal');
    const finalScoreElement = document.getElementById('final-score');
    const timeBonusText = document.getElementById('time-bonus-text');
    const shareButton = document.getElementById('share-button');
    const timerContainer = document.getElementById('timer-container');
    const timerBar = document.getElementById('timer-bar');
    const encyclopediaSearchInput = document.getElementById('encyclopedia-search');
    const remainingQuestionsElement = document.getElementById('remaining-questions');

    // --- Game Data ---
    const foods = [ { name: 'ほうれん草', correctPlacement: '冷凍室', closePlacement: ['野菜室'], emoji: '🥬', explanation: '生のまま、または茹でて冷凍すると約1ヶ月保存可能。冷凍することで栄養価の損失を抑えられます。冷蔵（野菜室）では2～3日が限界です。', tip: '生のままざく切りにし、水気をよく拭き取ってから冷凍用保存袋に入れると便利です。' }, { name: '小松菜', correctPlacement: '冷凍室', closePlacement: ['野菜室'], emoji: '🥬', explanation: 'ほうれん草と同様に傷みやすく、冷凍保存が最適。約1ヶ月保存できます。', tip: '硬めに茹でてから水気をしっかり絞り、小分けしてラップで包んで冷凍すると使いやすいです。' }, { name: 'キャベツ', correctPlacement: '冷蔵室', closePlacement: ['野菜室'], emoji: '🥬', explanation: '芯をくり抜き濡れたキッチンペーパーを詰め、新聞紙で包んで冷蔵室へ。低温と適度な湿度を好みます。', tip: '外側の葉から1枚ずつ剥がして使うと、切り口からの劣化を防ぎ長持ちします。' }, { name: '白菜', correctPlacement: '冷蔵室', closePlacement: ['野菜室'], emoji: '🥬', explanation: 'キャベツと同様に冷蔵室で保存します。芯から水分が抜けるのを防ぐのがポイント。', tip: '丸ごとなら芯をくり抜き、カットしたものはラップでぴったり覆いましょう。' }, { name: 'レタス', correctPlacement: '冷蔵室', closePlacement: ['野菜室'], emoji: '🥬', explanation: '芯の切り口に小麦粉をつけ、ペーパーで包んで芯を下にして冷蔵室へ。冷凍すると水分が抜け食感が失われます。', tip: '芯から水分を吸い上げて成長するので、芯の成長を止めるのが長持ちのコツです。' }, { name: 'トマト', correctPlacement: '野菜室', closePlacement: ['常温'], emoji: '🍅', explanation: '完熟したトマトは、これ以上熟すのを防ぐため野菜室へ。常温だと追熟が進み、冷蔵室では冷えすぎて風味が落ちます。', tip: 'ヘタ側を下にして1個ずつキッチンペーパーで包むと、傷みにくくなります。' }, { name: 'きゅうり', correctPlacement: '野菜室', closePlacement: ['常温'], emoji: '🥒', explanation: '低温障害を起こしやすいため、冷えすぎない野菜室が最適。水分に非常に弱く、水滴がつくと傷み始めます。', tip: 'ヘタを上にして立てて保存すると、畑で育っていた時と同じ状態でストレスが減り長持ちします。' }, { name: 'ピーマン', correctPlacement: '野菜室', closePlacement: ['冷蔵室'], emoji: '🫑', explanation: '寒さに弱い夏野菜ですが、トマトやなすほどではありません。適温が10℃前後のため野菜室が最適です。', tip: '水気をよく拭き取り、数個まとめてキッチンペーパーで包んでからポリ袋に入れると良いです。' }, { name: 'なす', correctPlacement: '野菜室', closePlacement: ['常温'], emoji: '🍆', explanation: '低温障害を最も起こしやすい野菜の一つ。夏場の高温多湿を避けるため、1本ずつラップして野菜室で保存するのが次善策です。本来は常温が望ましいです。', tip: '10℃以下の環境では皮のツヤがなくなりスポンジ状になってしまいます。冷やしすぎに注意！' }, { name: '大根', correctPlacement: '野菜室', closePlacement: ['冷蔵室'], emoji: ' R ', explanation: '葉がついたままだと根の水分と栄養を吸い上げるため、葉を切り落としてから新聞紙で包み、野菜室で立てて保存します。', tip: '冷凍すると細胞が壊れ、煮物などに使うと味が染み込みやすくなるというメリットもあります。' }, { name: 'にんじん', correctPlacement: '野菜室', closePlacement: ['冷蔵室'], emoji: '🥕', explanation: '乾燥と湿気に弱いため、水気を拭き取り1本ずつペーパーで包んでポリ袋に入れ、立てて野菜室で保存します。', tip: '葉がついている場合は、大根と同様にすぐに切り落としましょう。' }, { name: 'じゃがいも', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🥔', explanation: '低温と光に弱い性質があります。冷蔵庫に入れると低温障害でデンプンが糖に変わり、揚げ物が焦げやすくなります。光に当たると有毒なソラニンが生成されます。', tip: 'りんごと一緒に、光の当たらない風通しの良い冷暗所で保存すると、りんごが出すエチレンガスが発芽を抑制します。' }, { name: '玉ねぎ', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🧅', explanation: '湿気に非常に弱いため、風通しの良い冷暗所が最適です。冷蔵庫は湿度が高すぎるため向きません。', tip: 'ネットなどに入れて吊るして保存すると、全方向から空気が通り湿気がこもるのを防げます。' }, { name: 'さつまいも', correctPlacement: '常温', emoji: '🍠', explanation: '熱帯地域が原産で寒さに非常に弱い。10℃以下の環境では低温障害を起こして腐敗しやすくなります。', tip: '新聞紙に包み、段ボールなどに入れて冷暗所で保存しましょう。' }, { name: '里芋', correctPlacement: '常温', emoji: ' S ', explanation: 'さつまいも同様、寒さに弱い芋類です。冷蔵庫の低温と乾燥はNG。', tip: '泥が付いたまま保存することで、土が天然の保護膜となり乾燥や雑菌から守ってくれます。' }, { name: 'ごぼう', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: ' G ', explanation: '土の中で育った環境に近い、直射日光の当たらない風通しの良い冷暗所を好みます。', tip: '泥付きのまま新聞紙で包んで保存するのがベスト。洗うと風味が落ち、傷みやすくなります。' }, { name: 'かぼちゃ', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🎃', explanation: '丸ごとの場合は風通しの良い冷暗所で長期保存が可能です。カットしたものは種とワタから傷むため、取り除いてラップをし野菜室へ。', tip: 'カットかぼちゃを冷凍する際は、生のままでも、レンジ加熱してからでもOKです。' }, { name: 'きのこ類', correctPlacement: '冷凍室', closePlacement: ['野菜室', '冷蔵室'], emoji: '🍄', explanation: '冷凍することで細胞壁が壊れ、調理時に旨味成分（グアニル酸）が出やすくなるという大きなメリットがあります。', tip: '水分は傷みの原因になるので、洗わずに石づきを取り、ほぐしたりカットして生のまま冷凍します。' }, { name: 'もやし', correctPlacement: 'チルド室', closePlacement: ['冷蔵室'], emoji: ' M ', explanation: '非常に傷みやすく、菌の増殖を強力に抑制するチルド室が最適です。冷蔵室や野菜室では鮮度低下が早まります。', tip: '袋のまま、または開封して水を張った容器に移してチルド室で保存しましょう。' }, { name: 'ブロッコリー', correctPlacement: '野菜室', closePlacement: ['冷蔵室'], emoji: '🥦', explanation: '乾燥に弱いため、ポリ袋に入れて野菜室で立てて保存します。冷凍する場合は硬めに茹でてから。', tip: '冷凍前に茹でた場合、水にさらすと水っぽくなるので、ザルにあげて冷ましましょう。' }, { name: 'バナナ', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🍌', explanation: '常温で追熟する果物の代表。冷蔵庫に入れると低温障害で皮が黒くなりますが、追熟を止めたい場合は野菜室へ。', tip: '房ごと吊るして保存すると、接地面から傷むのを防げます。' }, { name: 'りんご', correctPlacement: '野菜室', closePlacement: ['冷蔵室', '常温'], emoji: '🍎', explanation: 'エチレンガスを多く放出するため、他の食材の熟成を早めてしまいます。ポリ袋に入れて野菜室で保存するのが最適です。', tip: '1個ずつ新聞紙やラップで包むと、りんご自身の水分蒸発も防げ、長期間シャキシャキ感を保てます。' }, { name: 'いちご', correctPlacement: '冷蔵室', closePlacement: ['野菜室'], emoji: '🍓', explanation: '非常にデリケートで傷みやすい果物です。洗わず、ヘタ付きのまま重ならないように冷蔵室で保存します。', tip: '食べる直前に優しく洗いましょう。水分が付くとすぐに傷み始めます。' }, { name: 'みかん', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🍊', explanation: '基本的には風通しの良い冷暗所での常温保存が可能です。夏場や長期保存したい場合は野菜室へ。', tip: '箱で購入した場合は、時々上下を入れ替え、傷んだものがあればすぐに取り除きましょう。' }, { name: 'キウイ', correctPlacement: '常温', emoji: '🥝', explanation: '硬い場合は常温で追熟させます。食べ頃になったらポリ袋に入れ、食べる前に冷蔵庫で冷やすと美味しいです。', tip: '早く追熟させたい場合は、りんごやバナナと一緒にポリ袋に入れると効果的です。' }, { name: 'アボカド', correctPlacement: '常温', emoji: '🥑', explanation: 'キウイと同様に、硬い場合は常温で追熟が必要です。冷蔵庫に入れると追熟が止まってしまいます。', tip: 'カットしたアボカドの変色を防ぐには、切り口にレモン汁を塗り、ラップを密着させて冷蔵保存します。' }, { name: '桃', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🍑', explanation: 'デリケートな果物で、追熟が必要です。硬い場合は常温で、食べ頃になったら野菜室で保存します。', tip: '甘い香りが強くなり、軽く押して弾力を感じたら食べ頃のサインです。' }, { name: '洋梨', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🍐', explanation: '追熟が必要な果物です。軸の周りが柔らかくなってきたら食べ頃。その後は野菜室へ。', tip: '食べ頃になるまでは冷蔵庫に入れないようにしましょう。追熟が止まってしまいます。' }, { name: 'ぶどう', correctPlacement: '野菜室', closePlacement: ['冷蔵室'], emoji: '🍇', explanation: '追熟しない果物なので、購入後は新鮮なうちに食べるのが一番。乾燥を防ぐためポリ袋や容器に入れて野菜室へ。', tip: '洗うと鮮度が落ちやすいので、食べる直前に洗いましょう。' }, { name: 'メロン', correctPlacement: '常温', closePlacement: ['野菜室'], emoji: '🍈', explanation: '収穫後に熟していく「追熟型」の果物です。ツルが枯れ、お尻の部分に弾力が出てきたら食べ頃。食べる前に冷蔵庫で冷します。', tip: 'エチレンガスを多く放出するので、他の食材とは離して保存しましょう。' } ];
    const fullFoodList = [...foods];

    // --- Game State ---
    let score = 0, combo = 0, currentFood = null, remainingFoods = [], difficultySettings = {}, encyclopediaUnlocked = new Set(), gameMode = 'time-attack', timerInterval, timeLeft, totalTime;

    // --- Game Logic ---
    function handleDrop(eventOrElement) {
        let dropZoneEl;
        if (eventOrElement.preventDefault) {
            eventOrElement.preventDefault();
            dropZoneEl = eventOrElement.target.closest('.drop-zone');
        } else {
            dropZoneEl = eventOrElement;
        }
        if (!dropZoneEl) return;

        dropZoneEl.classList.remove('drag-over');
        
        const dropZoneId = dropZoneEl.id;
        const correct = dropZoneId === currentFood.correctPlacement;

        if (correct) {
            score += 100;
            combo++;
            if (combo > 1) {
                const comboBonus = combo * 10;
                score += comboBonus;
                comboDisplay.textContent = `${combo} コンボ! +${comboBonus}`;
                comboDisplay.classList.add('combo-animation');
                setTimeout(() => comboDisplay.classList.remove('combo-animation'), 500);
            } else {
                comboDisplay.textContent = '';
            }
            encyclopediaUnlocked.add(currentFood.name);
            updateScoreDisplay();
            dropZoneEl.classList.add('correct-answer');
            setTimeout(() => {
                dropZoneEl.classList.remove('correct-answer');
            }, 600);
            setTimeout(() => {
                nextFood();
            }, 300);
        } else {
            const isClose = currentFood.closePlacement && currentFood.closePlacement.includes(dropZoneId);
            combo = 0;
            comboDisplay.textContent = '';
            showFeedback(false, isClose, dropZoneId);
        }
    }

    // --- Event Listeners ---
    // PC (Mouse)
    dropZones.forEach(zone => {
        zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
        zone.addEventListener('dragenter', e => { e.preventDefault(); zone.classList.add('drag-over'); });
        zone.addEventListener('dragleave', () => { zone.classList.remove('drag-over'); });
        zone.addEventListener('drop', handleDrop);
    });
    currentFoodElement.addEventListener('dragstart', () => { currentFoodElement.classList.add('is-mouse-dragging'); });
    currentFoodElement.addEventListener('dragend', () => { currentFoodElement.classList.remove('is-mouse-dragging'); });

    // Smartphone (Touch)
    let currentDropZoneTarget = null;
    let ghostElement = null;
    let offsetX = 0;
    let offsetY = 0;

    function handleTouchStart(e) {
        if (e.touches.length > 1) return;
        const foodItem = e.currentTarget;
        const touch = e.touches[0];
        const rect = foodItem.getBoundingClientRect();
        offsetX = touch.clientX - rect.left;
        offsetY = touch.clientY - rect.top;
        ghostElement = foodItem.cloneNode(true);
        ghostElement.id = '';
        ghostElement.classList.remove('food-item');
        ghostElement.classList.add('food-item-ghost');
        document.body.appendChild(ghostElement);
        ghostElement.style.left = `${touch.clientX - offsetX}px`;
        ghostElement.style.top = `${touch.clientY - offsetY}px`;
        foodItem.classList.add('is-touch-dragging');
        document.addEventListener('touchmove', handleTouchMove, { passive: false });
        document.addEventListener('touchend', handleTouchEnd, { once: true });
        document.addEventListener('touchcancel', handleTouchEnd, { once: true });
    }

    function handleTouchMove(e) {
        e.preventDefault();
        const touch = e.touches[0];

        if (ghostElement) {
            ghostElement.style.left = `${touch.clientX - offsetX}px`;
            ghostElement.style.top = `${touch.clientY - offsetY}px`;
        }
        
        if (ghostElement) ghostElement.style.display = 'none';
        const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY);
        if (ghostElement) ghostElement.style.display = '';

        const dropZoneEl = elementUnderTouch ? elementUnderTouch.closest('.drop-zone') : null;

        if (currentDropZoneTarget !== dropZoneEl) {
            if (currentDropZoneTarget) {
                currentDropZoneTarget.classList.remove('drag-over');
            }
            if (dropZoneEl) {
                dropZoneEl.classList.add('drag-over');
                if (navigator.vibrate) {
                    navigator.vibrate(50);
                }
            }
            currentDropZoneTarget = dropZoneEl;
        }
    }
    
    function handleTouchEnd(e) {
        if (ghostElement) {
            ghostElement.remove();
            ghostElement = null;
        }
        currentFoodElement.classList.remove('is-touch-dragging');

        if (currentDropZoneTarget) {
            handleDrop(currentDropZoneTarget);
        } else {
            dropZones.forEach(zone => zone.classList.remove('drag-over'));
        }
        
        currentDropZoneTarget = null;
        document.removeEventListener('touchmove', handleTouchMove);
    }
    
    currentFoodElement.addEventListener('touchstart', handleTouchStart, { passive: false });

    // Init and Helper functions (omitted for brevity, no changes)
    function setGameMode(mode) { gameMode = mode; document.getElementById('normal-mode-btn').classList.toggle('bg-gray-500', mode !== 'normal'); document.getElementById('normal-mode-btn').classList.toggle('bg-green-500', mode === 'normal'); document.getElementById('time-attack-mode-btn').classList.toggle('bg-gray-500', mode !== 'time-attack'); document.getElementById('time-attack-mode-btn').classList.toggle('bg-green-500', mode === 'time-attack'); }
    function startGame(difficulty) { difficultySettings = { '初級': { count: 10, time: 60 }, '中級': { count: 20, time: 90 }, '上級': { count: 30, time: 120 }, '激辛': { count: 50, time: 150 } }[difficulty]; score = 0; combo = 0; updateScoreDisplay(); remainingFoods = shuffleArray([...fullFoodList]).slice(0, difficultySettings.count); startScreen.classList.add('hidden'); mainGame.classList.remove('hidden'); if (gameMode === 'time-attack') { timerContainer.classList.remove('hidden'); totalTime = difficultySettings.time; timeLeft = totalTime; startTimer(); } else { timerContainer.classList.add('hidden'); } nextFood(); }
    function startTimer() { clearInterval(timerInterval); timerBar.style.width = '100%'; timerBar.style.transition = `width ${totalTime}s linear`; requestAnimationFrame(() => { timerBar.style.width = '0%'; }); timerInterval = setInterval(() => { timeLeft--; if (timeLeft <= 0) { clearInterval(timerInterval); endGame(true); } }, 1000); }
    function nextFood() { if (remainingFoods.length === 0) { endGame(true); return; } currentFood = remainingFoods.pop(); foodNameElement.textContent = `${currentFood.emoji} ${currentFood.name}`; updateRemainingQuestionsDisplay(); }
    function showFeedback(isCorrect, isClose = false, dropZoneId = '') { if (isClose) { modalTitle.textContent = 'おしい！ 💡'; modalTitle.className = 'text-3xl font-extrabold mb-4 text-yellow-500'; modalContent.innerHTML = `<p class="font-bold text-lg">「${dropZoneId}」もよく使われる保存場所ですが、さらに最適な場所があります！</p><p class="font-bold text-lg mt-4">${currentFood.name}の最も良い保存場所は「${currentFood.correctPlacement}」です。</p><p class="font-bold text-lg mt-4">🤔 なぜ？</p><p>${currentFood.explanation}</p>`; } else { modalTitle.textContent = '残念！ 😢'; modalTitle.className = 'text-3xl font-extrabold mb-4 text-red-500'; modalContent.innerHTML = `<p class="font-bold text-lg">${currentFood.name}の正しい保存場所は「${currentFood.correctPlacement}」です。</p><p class="font-bold text-lg mt-4">🤔 なぜ？</p><p>${currentFood.explanation}</p>`; } modalOkButton.onclick = closeModal; modal.classList.add('show'); }
    function closeModal() { modal.classList.remove('show'); nextFood(); }
    function updateScoreDisplay() { scoreElement.textContent = score; }
    function updateRemainingQuestionsDisplay() { const currentQuestionNumber = difficultySettings.count - remainingFoods.length; remainingQuestionsElement.textContent = `問題 ${currentQuestionNumber} / ${difficultySettings.count}`; }
    function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; }
    function showEncyclopedia(forceUnlock = false) { encyclopediaList.innerHTML = ''; const header = document.createElement('div'); header.className = 'flex justify-between font-bold text-gray-500 px-4 py-2 border-b'; header.innerHTML = `<span>食材名</span><span>保存場所</span>`; encyclopediaList.appendChild(header); fullFoodList.sort((a,b) => a.name.localeCompare(b.name, 'ja')).forEach(food => { const isUnlocked = forceUnlock || encyclopediaUnlocked.has(food.name); const item = document.createElement('div'); let itemClasses = 'flex justify-between items-center p-4 rounded-lg font-bold transition-all duration-200'; if (isUnlocked) { itemClasses += ' bg-white hover:bg-green-100 shadow-sm cursor-pointer'; item.innerHTML = `<span class="text-gray-800 text-lg">${food.emoji} ${food.name}</span><span class="text-orange-500 bg-orange-100 px-3 py-1 rounded-full text-sm">${food.correctPlacement}</span>`; item.onclick = () => showEncyclopediaDetail(food); } else { itemClasses += ' bg-gray-100'; item.innerHTML = `<span class="text-gray-400 text-lg">？？？</span><span class="text-gray-400">---</span>`; } item.className = itemClasses; encyclopediaList.appendChild(item); }); encyclopediaModal.classList.add('show'); }
    function showEncyclopediaDetail(food) { modalTitle.textContent = `${food.emoji} ${food.name}`; modalTitle.className = 'text-3xl font-extrabold mb-4 text-blue-600'; modalContent.innerHTML = `<p><span class="font-bold">最適な保存場所:</span> <span class="text-xl font-bold text-orange-500">${food.correctPlacement}</span></p><p class="font-bold mt-4">🤔 なぜ？</p><p>${food.explanation}</p><p class="font-bold mt-4">💡 保存のヒント</p><p>${food.tip}</p>`; modalOkButton.onclick = () => { modal.classList.remove('show'); }; encyclopediaModal.classList.remove('show'); modal.classList.add('show'); }
    function closeEncyclopedia() { encyclopediaModal.classList.remove('show'); }
    function endGame(finished) { clearInterval(timerInterval); mainGame.classList.add('hidden'); let finalScore = score; if (gameMode === 'time-attack' && finished && remainingFoods.length === 0) { const bonus = timeLeft * 10; finalScore += bonus; timeBonusText.textContent = `クリアボーナス！ +${bonus}`; timeBonusText.classList.remove('hidden'); } else { timeBonusText.classList.add('hidden'); } finalScoreElement.textContent = finalScore; resultModal.classList.add('show'); const shareText = `「野菜仕分けマスター」で${finalScore}点を獲得しました！あなたも挑戦しよう！ #野菜仕分けマスター`; const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`; shareButton.onclick = () => window.open(shareUrl, '_blank'); }
    function restartGame() { resultModal.classList.remove('show'); startScreen.classList.remove('hidden'); }
    function populateStartEncyclopedia() { const filterText = encyclopediaSearchInput.value.toLowerCase(); const container = document.getElementById('start-encyclopedia-container'); if (!container) return; container.innerHTML = ''; const filteredFoods = fullFoodList.filter(food => food.name.includes(filterText)); filteredFoods.sort((a,b) => a.name.localeCompare(b.name, 'ja')).forEach(food => { const item = document.createElement('div'); let itemClasses = 'group flex flex-col items-center justify-center p-3 rounded-lg font-bold transition-all duration-200 bg-gray-50 hover:bg-green-100 shadow-sm cursor-pointer border h-32 text-center'; item.innerHTML = `<div class="text-gray-800 text-base mb-1">${food.emoji} ${food.name}</div><div class="text-orange-500 bg-orange-100 px-2 py-1 rounded-full text-xs mb-2">${food.correctPlacement}</div><div class="mt-auto flex items-center gap-1 text-indigo-500 group-hover:text-indigo-700 group-hover:underline transition-colors text-xs"><span>詳しく見る</span><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg></div>`; item.onclick = () => showEncyclopediaDetail(food); item.className = itemClasses; container.appendChild(item); }); }
    encyclopediaSearchInput.addEventListener('input', populateStartEncyclopedia);
    window.addEventListener('DOMContentLoaded', populateStartEncyclopedia);

</script>
</body>
</html>

野菜仕分けマスターで遊ぶ

ツールだけ利用したい方はこちら

https://aitool-lab.jp/vegetable-sortingmaster/

Geminiでの制作過程

ディープリサーチにまず分析してもらう

野菜と果物を冷蔵庫にいれるべきか冷凍庫にいれるべきか最適な保存方法を調べてほしい

Gemini Canvasでサイトを作ってもらう

リサーチを踏まえて、野菜と果物を冷蔵庫にいれるべきか冷凍庫にいれるべきかドラッグで採点して学べるサイト作ってほしい。間違えたらなぜ冷凍庫がいいのかなど説明を表示してほしい
野菜室・チルド室も追加して

他にも追加したほうが良いアイディアはないかGeminiに聞いてみる

何回指摘してもエラーが続いたり、そう探しづらかったり、気に入らない時は現在のプロンプトをまとめて新しいスレッドで作り直したりして要約気に入るデザインができました。

過程をまとめたプロンプト公開

資料を元に野菜と果物を冷蔵庫のどこにいれるべきかドラッグで採点して学べるサイト作ってほしい。

間違えたらなぜ冷凍庫がいいのかなど説明を表示してほしい
冷凍庫・冷蔵庫・チルド室・野菜室・常温
食べ物の種類は50種類

タイムアタックモード
内容： 制限時間内にどれだけ多くの食材を正しく仕分けられるかに挑戦するモードです。時間内にクリアできたら追加特典
効果： スピードと正確性が求められ、スリリングなゲーム体験が生まれます。何度も挑戦したくなるリプレイ性が高まります。

難易度設定
初級・中級・上級・激辛

コンボボーナス
内容： 間違えずに連続で正解すると、「コンボ！」と表示され追加スコアがもらえる仕組みです
効果： 連続正解を目指すのが楽しくなり、ゲームへの集中力が高まります。

「なぜ？」がわかる詳細解説
内容： 正解・不正解の理由だけでなく、「なぜトマトは野菜室がいいのか（エチレンガスの話など）」「なぜきのこは冷凍すると美味しくなるのか（細胞壁が壊れる話など）」といった科学的な根拠まで解説します。
効果： 知識が断片的にならず、理論的に理解できるため忘れにくくなります。

「食品図鑑」機能
内容： ゲームで仕分けた食材が図鑑に登録されていく機能です。いつでも食材ごとの正しい保存方法や豆知識を見返すことができます。
効果： 達成感があり、学習した内容を復習するのに役立ちます。

「保存方法のワンポイント」表示
内容： 正解した時に、「きゅうりはヘタを上にして立てて保存すると長持ちしますよ！」といった、もう一歩踏み込んだ豆知識（Tips）を表示します。
効果： 日々の生活ですぐに実践できる、より具体的な知識が身につきます。

結果のシェア機能
内容： ゲームクリア後、スコアやクリアタイムをSNS（Xなど）でシェアできるボタンを設置します。
効果： 友達とスコアを競ったり、サイトの存在を広めてもらうきっかけになります。