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; }
        .card { transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
        .card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
        .quiz-option { transition: all 0.2s ease; }
        .quiz-option:hover { transform: scale(1.03); background-color: #f0fdf4; }
        .correct { background-color: #dcfce7 !important; border-color: #22c55e !important; }
        .incorrect { background-color: #fee2e2 !important; border-color: #ef4444 !important; }
        .feedback-correct { color: #16a34a; }
        .feedback-incorrect { color: #dc2626; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .fade-in { animation: fadeIn 0.5s ease-out forwards; }
        .nav-button.active { background-color: #10B981; color: white; }
        #encyclopedia-modal { transition: opacity 0.3s ease; }
        /* Toast Notification */
        @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes fadeOut { to { opacity: 0; } }
        .toast { animation: slideInUp 0.5s ease forwards, fadeOut 0.5s ease 4.5s forwards; }
        /* Achievement Badge */
        .badge.locked { filter: grayscale(100%) brightness(80%); }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">

    <div id="app" class="container mx-auto p-4 md:p-8 max-w-4xl">

        <header class="text-center mb-6">
            <h1 class="text-4xl md:text-5xl font-extrabold text-green-600 mb-2">食材見分けマスター</h1>
            <p class="text-lg text-gray-600">ゲームと図鑑で、あなたも目利きプロに！</p>
        </header>

        <!-- Player Status -->
        <div id="player-status" class="bg-white rounded-xl shadow p-4 mb-6 text-center">
            <div id="player-title" class="font-bold text-lg text-yellow-500 mb-2"></div>
            <div class="flex items-center justify-center space-x-2">
                <span id="player-level" class="font-bold bg-gray-200 px-3 py-1 rounded-full text-sm"></span>
                <div class="w-full bg-gray-200 rounded-full h-4">
                    <div id="exp-bar" class="bg-green-500 h-4 rounded-full transition-all duration-500" style="width: 0%"></div>
                </div>
            </div>
            <div id="exp-text" class="text-sm text-gray-500 mt-1"></div>
        </div>

        <!-- Navigation -->
        <nav class="flex justify-center bg-white rounded-xl shadow p-2 mb-8 space-x-1 md:space-x-2">
            <button onclick="showScreen('game-screen')" id="nav-game" class="nav-button flex-1 py-2 px-4 rounded-lg font-bold text-gray-600 hover:bg-green-100 transition-colors text-sm md:text-base">クイズ</button>
            <button onclick="showScreen('encyclopedia-screen')" id="nav-encyclopedia" class="nav-button flex-1 py-2 px-4 rounded-lg font-bold text-gray-600 hover:bg-green-100 transition-colors text-sm md:text-base">食材図鑑</button>
            <button onclick="showScreen('calendar-screen')" id="nav-calendar" class="nav-button flex-1 py-2 px-4 rounded-lg font-bold text-gray-600 hover:bg-green-100 transition-colors text-sm md:text-base">旬のカレンダー</button>
            <button onclick="showScreen('achievements-screen')" id="nav-achievements" class="nav-button flex-1 py-2 px-4 rounded-lg font-bold text-gray-600 hover:bg-green-100 transition-colors text-sm md:text-base">実績</button>
        </nav>

        <!-- Main Content Area -->
        <main id="main-content">
            <div id="game-screen">
                <div id="category-selection">
                    <h2 class="text-2xl font-bold text-center mb-6">挑戦したいカテゴリーを選んでね！</h2>
                    <div id="category-grid" class="grid grid-cols-2 md:grid-cols-4 gap-6"></div>
                    <div class="text-center mt-8">
                        <button id="review-mistakes-btn" onclick="startMistakeQuiz()" class="bg-amber-500 text-white font-bold py-3 px-8 rounded-full text-lg hover:bg-amber-600 transition-transform hover:scale-105 disabled:bg-gray-300 disabled:cursor-not-allowed disabled:scale-100">
                            苦手問題を復習する
                        </button>
                    </div>
                </div>
                <div id="quiz-container" class="hidden"></div>
                <div id="result-container" class="hidden text-center"></div>
            </div>
            <div id="encyclopedia-screen" class="hidden">
                 <h2 class="text-2xl font-bold text-center mb-6">食材図鑑</h2>
                 <p class="text-center text-gray-500 mb-6">クイズで正解した食材がここに記録されます。</p>
                 <div id="encyclopedia-grid" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4"></div>
            </div>
            <div id="calendar-screen" class="hidden">
                <h2 class="text-2xl font-bold text-center mb-6">旬のカレンダー</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"></div>
            </div>
            <div id="achievements-screen" class="hidden">
                 <h2 class="text-2xl font-bold text-center mb-6">実績バッジ</h2>
                 <p class="text-center text-gray-500 mb-6">特定の条件を達成してバッジを集めよう！</p>
                 <div id="achievements-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"></div>
            </div>
        </main>
    </div>

    <!-- Modals and Toasts -->
    <div id="encyclopedia-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50" onclick="closeModal()">
        <div id="modal-content" class="bg-white rounded-2xl shadow-xl max-w-md w-full p-6 text-left relative" onclick="event.stopPropagation()"></div>
    </div>
    <div id="toast-container" class="fixed bottom-5 right-5 z-50 space-y-2"></div>

    <script>
        // --- DATA ---
        const allQuizData = {
            vegetables: { 
                name: "野菜", emoji: "🥕", color: "green", 
                questions: [
                    { id: 1, item: "トマト", emoji: "🍅", question: "美味しいトマトの見分け方は？", options: ["ヘタが黄色い", "全体が硬い", "ヘタが緑色でピンとしている", "色が薄い"], answer: 2, explanation: "ヘタが新鮮な緑色で、皮にハリとツヤがあり、ずっしりと重いものが美味しいトマトです。", season: [6, 7, 8], nutrition: "リコピン, ビタミンC", storage: "ポリ袋に入れて野菜室で保存。" },
                    { id: 2, item: "きゅうり", emoji: "🥒", question: "新鮮なきゅうりの特徴は？", options: ["表面のイボが低い", "太さが均一で、色が濃い", "曲がっている", "柔らかい"], answer: 1, explanation: "表面のイボがチクチクするほど尖っていて、緑色が濃く、太さが均一なものが新鮮です。", season: [6, 7, 8], nutrition: "カリウム", storage: "キッチンペーパーで包み、ポリ袋に入れて野菜室で立てて保存。" },
                    { id: 3, item: "ほうれん草", emoji: "🥬", question: "美味しいほうれん草の選び方は？", options: ["葉が黄色がかっている", "根元が乾燥している", "葉が肉厚で、根元の赤みが強い", "茎が細い"], answer: 2, explanation: "葉の色が濃い緑色で、根元の赤みが鮮やかなものが栄養価も高く美味しいです。葉が肉厚でハリがあるものを選びましょう。", season: [11, 12, 1], nutrition: "鉄分, β-カロテン", storage: "湿らせた新聞紙で包み、ポリ袋に入れて野菜室で立てて保存。" },
                    { id: 4, item: "大根", emoji: "⬜", question: "みずみずしい大根の特徴は？", options: ["ひげ根の穴が多い", "表面がデコボコ", "ずっしりと重く、皮にハリがある", "葉がしなびている"], answer: 2, explanation: "ずっしりと重みがあり、皮にハリとツヤがあるものがみずみずしい証拠です。ひげ根の穴が少なく、まっすぐなものが良いです。", season: [11, 12, 1, 2], nutrition: "ビタミンC, ジアスターゼ", storage: "葉を切り落とし、新聞紙で包んで冷暗所や野菜室で保存。" },
                    { id: 5, item: "玉ねぎ", emoji: "🧅", question: "良い玉ねぎの見分け方は？", options: ["芽や根が出ている", "頭が柔らかい", "皮がよく乾燥し、硬くしまっている", "部分的に湿っている"], answer: 2, explanation: "皮がパリパリによく乾燥していて、硬く締まり、ずっしりと重いものが良い玉ねぎです。頭の部分を触って柔らかいものは傷んでいる可能性があります。", season: [4, 5, 6], nutrition: "硫化アリル", storage: "ネットなどに入れて風通しの良い冷暗所で吊るして保存。" }
                ] 
            },
            fruits: { 
                name: "果物", emoji: "🍓", color: "yellow", 
                questions: [
                    { id: 6, item: "りんご", emoji: "🍎", question: "蜜がたっぷり入った美味しいりんごは？", options: ["軽いもの", "色がまだら", "ツルがしなびている", "お尻が黄色～飴色になっている"], answer: 3, explanation: "完熟して蜜が入っているりんごは、お尻の部分（花落ち）が黄色っぽくなっています。ツルがしっかりしているのも新鮮な証拠です。", season: [10, 11, 12], nutrition: "食物繊維, カリウム", storage: "ポリ袋に入れて冷蔵庫の野菜室で保存。" },
                    { id: 7, item: "みかん", emoji: "🍊", question: "甘くて美味しいみかんの特徴は？", options: ["皮が厚い", "形が丸い", "ヘタの切り口が緑色で、皮が薄い", "大きいもの"], answer: 2, explanation: "ヘタの切り口が小さく緑色で、皮が薄く、色が濃いものが美味しいみかんです。形は平べったい方が甘みが強い傾向があります。", season: [11, 12, 1], nutrition: "ビタミンC", storage: "風通しの良い冷暗所で、重ならないように並べて保存。" },
                    { id: 8, item: "スイカ", emoji: "🍉", question: "甘いスイカを見分けるポイントは？", options: ["叩くと高い音がする", "ツルが緑色", "縞模様がはっきりしていて、お尻の穴が小さい", "形が縦長"], answer: 2, explanation: "縞模様の黒と緑のコントラストがはっきりしているものが良いです。お尻のへそ（花落ち）が小さいものは熟しているサイン。叩くと「ボンボン」と低い音がするものが良いとされます。", season: [7, 8], nutrition: "シトルリン, リコピン", storage: "丸のままなら冷暗所。カット後はラップをして冷蔵庫で保存。" },
                    { id: 9, item: "いちご", emoji: "🍓", question: "新鮮で甘いいちごの見分け方は？", options: ["ヘタがしなびている", "全体が真っ赤で、ヘタの近くまで色づいている", "先端が白い", "粒が大きい"], answer: 1, explanation: "ヘタが緑色でピンとしていて、果実全体がツヤのある鮮やかな赤色をしているものが新鮮です。ヘタの近くまで赤く色づいているものが完熟しています。", season: [1, 2, 3, 4], nutrition: "ビタミンC", storage: "パックのままポリ袋に入れ、野菜室で保存。洗うのは食べる直前に。" }
                ] 
            },
            fish: { 
                name: "魚", emoji: "🐟", color: "blue", 
                questions: [
                    { id: 10, item: "アジ (鯵)", emoji: "🐟", question: "新鮮なアジの目印は？", options: ["目が白く濁っている", "エラが茶色い", "目が澄んでいて、体にハリがある", "腹が柔らかい"], answer: 2, explanation: "目が黒く澄んでいて、エラが鮮やかな赤色をしているものが新鮮です。体にハリとツヤがあり、腹部が硬く締まっているものを選びましょう。", season: [6, 7, 8], nutrition: "DHA, EPA", storage: "内臓とエラを取り除き、水気を拭き取って冷蔵保存。" },
                    { id: 11, item: "マグロ (刺身)", emoji: "🍣", question: "美味しいマグロの赤身（刺身用）は？", options: ["筋が白い", "色が黒ずんでいる", "透明感のある鮮やかな赤色で、筋が平行", "ドリップ（赤い汁）が出ている"], answer: 2, explanation: "色が鮮やかで透明感があり、筋目が平行に入っているものが美味しいです。パック内にドリップが出ていないものを選びましょう。", season: [], nutrition: "タンパク質, 鉄分", storage: "キッチンペーパーで包み、冷蔵庫のチルド室で保存。" }
                ] 
            },
            meat: { 
                name: "肉", emoji: "🥩", color: "red", 
                questions: [
                    { id: 12, item: "牛肉", emoji: "🐄", question: "美味しい牛肉（赤身）の特徴は？", options: ["色が暗い赤黒色", "脂肪が黄色い", "鮮やかな赤色で、脂肪が白い", "ドリップが出ている"], answer: 2, explanation: "鮮やかで明るい赤色をしていて、脂肪（サシ）の色が白く、きめ細かいものが良質です。ドリップが出ていないものを選びましょう。", season: [], nutrition: "タンパク質, 鉄分", storage: "空気に触れないようラップで包み、チルド室で保存。" },
                    { id: 13, item: "豚肉", emoji: "🐖", question: "質の良い豚肉の見分け方は？", options: ["脂肪が灰色がかっている", "淡いピンク色で、脂肪が白い", "肉の色が濃い赤色", "水分が多い"], answer: 1, explanation: "肉の色はつやのある淡いピンク色で、脂肪は白くて粘りがあるものが新鮮で美味しいです。肉のキメが細かいものを選びましょう。", season: [], nutrition: "ビタミンB1", storage: "牛肉と同様に、空気に触れないようにしてチルド室で保存。" },
                    { id: 14, item: "鶏肉", emoji: "🐓", question: "新鮮な鶏肉のサインは？", options: ["皮の毛穴が閉じている", "肉の色が白っぽい", "皮にハリがあり、肉に厚みがある", "パックに水分がたまっている"], answer: 2, explanation: "皮にハリとツヤがあり、毛穴が盛り上がっているものが新鮮です。肉は透明感のあるピンク色で、厚みがあるものを選びましょう。", season: [], nutrition: "タンパク質", storage: "水分を拭き取り、ラップで包んでチルド室で保存。" }
                ] 
            },
            mushrooms: { 
                name: "きのこ", emoji: "🍄", color: "purple", 
                questions: [
                    { id: 15, item: "しいたけ", emoji: "🍄", question: "美味しいしいたけの選び方は？", options: ["カサの裏が黒い", "カサが開ききっている", "カサが肉厚で、軸が太く短い", "湿っている"], answer: 2, explanation: "カサがあまり開いておらず、肉厚で丸みがあるものが良いです。カサの裏側が白く、軸が太く短いものを選びましょう。", season: [3, 4, 5, 9, 10, 11], nutrition: "ビタミンD, 食物繊維", storage: "水気を嫌うので、キッチンペーパーで包んで野菜室で保存。" },
                    { id: 16, item: "えのき", emoji: "🍄", question: "新鮮なえのきの特徴は？", options: ["カサが茶色い", "全体がしんなりしている", "袋に水滴がついている", "白くてハリがあり、カサが小さい"], answer: 3, explanation: "全体が白く、ハリとシャキシャキ感があるものが新鮮です。カサは小さく、粒が揃っているものを選びましょう。", season: [], nutrition: "GABA, 食物繊維", storage: "袋のまま、または石づきをつけたまま野菜室で立てて保存。" }
                ] 
            },
            dairy_eggs: { 
                name: "乳製品・卵", emoji: "🥚", color: "indigo", 
                questions: [
                    { id: 17, item: "卵", emoji: "🥚", question: "新鮮な卵を見分ける方法は？", options: ["振ると音がする", "殻がツルツルしている", "割ると黄身が平たく広がる", "殻の表面がザラザラしている"], answer: 3, explanation: "新鮮な卵は殻の表面がザラザラしています（クチクラ層）。割った時に白身がこんもりと盛り上がり、黄身にハリがあるのが新鮮な証拠です。", season: [], nutrition: "タンパク質, ビタミン", storage: "尖った方を下にして、冷蔵庫のドアポケット以外で保存。" }
                ] 
            },
            dried_goods: {
                name: "乾物", emoji: "🌊", color: "gray",
                questions: [
                    { id: 18, item: "昆布 (こんぶ)", emoji: "🌿", question: "出汁用の美味しい昆布の特徴は？", options: ["色が薄く、薄っぺらい", "表面が湿っている", "黒緑色で肉厚、表面に白い粉がある", "なるべく大きいもの"], answer: 2, explanation: "旨味成分であるマンニットが表面に白い粉として現れます。黒緑色が濃く、肉厚なものが良質な出汁が出ます。", season: [], nutrition: "食物繊維, ヨウ素", storage: "湿気を避け、密閉容器に入れて冷暗所で保存。" },
                    { id: 19, item: "ひじき", emoji: "⚫", question: "質の良い乾燥ひじきの見分け方は？", options: ["色が茶色がかっている", "細くて短いものが多い", "袋の底に粉がたまっている", "黒くてツヤがあり、大きさが揃っている"], answer: 3, explanation: "色が真っ黒でツヤがあり、葉が太く長く、大きさが揃っているものが良品です。袋の底に崩れた粉が少ないものを選びましょう。", season: [], nutrition: "鉄分, カルシウム", storage: "湿気を避け、密閉容器に入れて冷暗所で保存。" }
                ]
            },
            processed_foods: {
                name: "加工食品", emoji: "🥫", color: "cyan",
                questions: [
                    { id: 20, item: "豆腐 (とうふ)", emoji: "⬜", question: "新鮮なパック豆腐のサインは？", options: ["水が白く濁っている", "容器の隅が凹んでいる", "パックの中の水が澄んでいる", "値段が安い"], answer: 2, explanation: "パックの中の水が澄んでいて、豆腐の角が崩れていないものが新鮮です。必ず消費期限を確認しましょう。", season: [], nutrition: "タンパク質, イソフラボン", storage: "開封後は水に浸して冷蔵庫で保存し、毎日水を替える。" },
                    { id: 21, item: "ハム", emoji: "🍖", question: "美味しいロースハムの選び方は？", options: ["パック内に水分が多い", "色がくすんだピンク色", "色が鮮やかすぎる", "適度な弾力があり、肉のキメが細かい"], answer: 3, explanation: "色が淡いピンク色で、肉のキメが細かいものが良質です。パック内に水分（ドリップ）が出ておらず、適度な弾力があるものを選びましょう。", season: [], nutrition: "タンパク質, ビタミンB1", storage: "開封後はラップで包み、乾燥しないようにして冷蔵保存。" }
                ]
            }
        };

        const titles = {
            1: "見習いバイヤー", 5: "目利きチャレンジャー", 10: "食材の目利きプロ",
            20: "市場の達人", 30: "食材ハンター", 50: "食材マスター",
        };

        const achievementsData = {
            'first_quiz': { name: "はじめの一歩", desc: "初めてクイズを完了する", icon: "👣" },
            'perfect_vegetables': { name: "野菜ソムリエ", desc: "野菜クイズで全問正解する", icon: "🥦" },
            'perfect_fruits': { name: "フルーツ専門家", desc: "果物クイズで全問正解する", icon: "🍇" },
            'perfect_fish': { name: "鮮魚のプロ", desc: "魚クイズで全問正解する", icon: "🐠" },
            'perfect_meat': { name: "肉の巨匠", desc: "肉クイズで全問正解する", icon: "🍖" },
            'perfect_mushrooms': { name: "きのこ博士", desc: "きのこクイズで全問正解する", icon: "🍄" },
            'perfect_dairy_eggs': { name: "卵の達人", desc: "乳製品・卵クイズで全問正解する", icon: "🥚" },
            'perfect_dried_goods': { name: "乾物の目利き", desc: "乾物クイズで全問正解する", icon: "🌊" },
            'perfect_processed_foods': { name: "加工品の鑑定士", desc: "加工食品クイズで全問正解する", icon: "🥫" },
            'collector_10': { name: "図鑑コレクター", desc: "図鑑に10種類の食材を登録する", icon: "📚" },
            'collector_all': { name: "図鑑コンプリート", desc: "図鑑の全食材を登録する", icon: "🏛️" },
            'level_10': { name: "レベル10到達", desc: "プレイヤーレベルが10に到達する", icon: "🌟" },
        };

        // --- STATE MANAGEMENT ---
        let userData = { level: 1, exp: 0, achievements: [] };
        let currentCategoryKey = '';
        let currentQuestionIndex = 0;
        let score = 0;
        let currentQuizQuestions = [];
        let unlockedItems = JSON.parse(localStorage.getItem('unlockedItems')) || [];
        let mistakeItems = JSON.parse(localStorage.getItem('mistakeItems')) || [];
        const EXP_PER_CORRECT = 10;
        
        // --- DOM ELEMENTS ---
        const screens = {
            'game-screen': document.getElementById('game-screen'),
            'encyclopedia-screen': document.getElementById('encyclopedia-screen'),
            'calendar-screen': document.getElementById('calendar-screen'),
            'achievements-screen': document.getElementById('achievements-screen'),
        };
        const navButtons = {
            'game-screen': document.getElementById('nav-game'),
            'encyclopedia-screen': document.getElementById('nav-encyclopedia'),
            'calendar-screen': document.getElementById('nav-calendar'),
            'achievements-screen': document.getElementById('nav-achievements'),
        };

        // --- INITIALIZATION ---
        window.onload = () => {
            loadUserData();
            populateCategories();
            populateCalendar();
            updateReviewButton();
            updatePlayerStatusUI();
            showScreen('game-screen');
        };

        // --- USER DATA & LEVEL SYSTEM ---
        function loadUserData() {
            const savedData = JSON.parse(localStorage.getItem('userData'));
            if (savedData) userData = savedData;
        }
        function saveUserData() { localStorage.setItem('userData', JSON.stringify(userData)); }
        function getExpForNextLevel(level) { return Math.floor(50 * Math.pow(1.1, level - 1)); }
        function addExp(amount) {
            userData.exp += amount;
            const expForNext = getExpForNextLevel(userData.level);
            if (userData.exp >= expForNext) {
                levelUp();
            }
            saveUserData();
            updatePlayerStatusUI();
        }
        function levelUp() {
            const expForNext = getExpForNextLevel(userData.level);
            userData.level++;
            userData.exp -= expForNext;
            showToast(`レベルアップ！ Lv.${userData.level} になった！`, '🎉');
            checkAchievement('level_10');
            const newExpForNext = getExpForNextLevel(userData.level);
            if(userData.exp >= newExpForNext){
                levelUp();
            }
        }
        function updatePlayerStatusUI() {
            const expForNext = getExpForNextLevel(userData.level);
            const currentTitleKey = Object.keys(titles).reverse().find(lvl => userData.level >= lvl) || 1;
            document.getElementById('player-title').textContent = `称号: ${titles[currentTitleKey]}`;
            document.getElementById('player-level').textContent = `Lv.${userData.level}`;
            document.getElementById('exp-text').textContent = `あと ${Math.max(0, expForNext - userData.exp)} EXP でレベルアップ`;
            const expPercentage = Math.min(100, (userData.exp / expForNext) * 100);
            document.getElementById('exp-bar').style.width = `${expPercentage}%`;
        }

        // --- ACHIEVEMENT SYSTEM ---
        function checkAchievement(achievementId) {
            if (userData.achievements.includes(achievementId)) return;
            const allQuestions = Object.values(allQuizData).flatMap(cat => cat.questions);
            let unlocked = false;
            switch(achievementId) {
                case 'first_quiz': unlocked = true; break;
                case 'collector_10': if (unlockedItems.length >= 10) unlocked = true; break;
                case 'collector_all': if (unlockedItems.length >= allQuestions.length) unlocked = true; break;
                case 'level_10': if (userData.level >= 10) unlocked = true; break;
                default:
                    if (achievementId.startsWith('perfect_')) {
                        const categoryKey = achievementId.split('_')[1];
                        if (currentCategoryKey === categoryKey && score === currentQuizQuestions.length) {
                            unlocked = true;
                        }
                    }
                    break;
            }

            if (unlocked) {
                userData.achievements.push(achievementId);
                saveUserData();
                const achievement = achievementsData[achievementId];
                showToast(`実績解除: ${achievement.name}`, achievement.icon);
            }
        }

        function populateAchievements() {
            const grid = document.getElementById('achievements-grid');
            grid.innerHTML = '';
            for (const id in achievementsData) {
                const achievement = achievementsData[id];
                const isUnlocked = userData.achievements.includes(id);
                
                let shareButtonHtml = '';
                if (isUnlocked) {
                    shareButtonHtml = `<button onclick="shareOnX('${achievement.name}', '${achievement.icon}')" class="w-full mt-3 bg-black text-white text-xs font-bold py-1.5 px-3 rounded-full hover:bg-gray-700 transition-colors flex items-center justify-center">
                        <svg class="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/></svg>
                        シェア
                    </button>`;
                }

                const badge = document.createElement('div');
                badge.className = `badge p-4 bg-white rounded-lg shadow text-center flex flex-col justify-between ${isUnlocked ? '' : 'locked'}`;
                badge.innerHTML = `
                    <div>
                        <div class="text-5xl mb-2">${achievement.icon}</div>
                        <h4 class="font-bold">${achievement.name}</h4>
                        <p class="text-xs text-gray-500">${achievement.desc}</p>
                    </div>
                    ${shareButtonHtml}
                `;
                grid.appendChild(badge);
            }
        }
        
        // --- SHARE FUNCTION ---
        function shareOnX(name, icon) {
            const text = `食材見分けマスターProで実績「${name} ${icon}」を解除しました！あなたも目利きプロを目指そう！`;
            const hashtags = '食材見分けマスター,目利きチャレンジ';
            const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&hashtags=${encodeURIComponent(hashtags)}`;
            window.open(url, '_blank', 'width=600,height=400');
        }

        // --- UI & TOASTS ---
        function showToast(message, icon = 'ℹ️') {
            const toastContainer = document.getElementById('toast-container');
            const toast = document.createElement('div');
            toast.className = 'toast bg-white shadow-lg rounded-lg p-4 flex items-center';
            toast.innerHTML = `<span class="text-2xl mr-3">${icon}</span><span>${message}</span>`;
            toastContainer.appendChild(toast);
            setTimeout(() => toast.remove(), 5000);
        }

        // --- SCREEN NAVIGATION ---
        function showScreen(screenId) {
            Object.values(screens).forEach(screen => screen.classList.add('hidden'));
            screens[screenId].classList.remove('hidden');
            Object.values(navButtons).forEach(btn => btn.classList.remove('active'));
            navButtons[screenId].classList.add('active');

            if (screenId === 'encyclopedia-screen') populateEncyclopedia();
            if (screenId === 'achievements-screen') populateAchievements();
            if (screenId === 'game-screen') {
                 document.getElementById('category-selection').classList.remove('hidden');
                 document.getElementById('quiz-container').innerHTML = '';
                 document.getElementById('quiz-container').classList.add('hidden');
                 document.getElementById('result-container').innerHTML = '';
                 document.getElementById('result-container').classList.add('hidden');
            }
        }
        
        // --- UI POPULATION ---
        function populateCategories() {
            const grid = document.getElementById('category-grid');
            grid.innerHTML = '';
            for (const key in allQuizData) {
                const category = allQuizData[key];
                const card = document.createElement('div');
                card.className = `card bg-white rounded-xl shadow-lg p-6 flex flex-col items-center cursor-pointer border-4 border-transparent hover:border-${category.color}-400`;
                card.onclick = () => startQuiz(key);
                card.innerHTML = `<span class="text-6xl mb-4">${category.emoji}</span><h3 class="text-2xl font-bold text-${category.color}-700">${category.name}</h3>`;
                grid.appendChild(card);
            }
        }
        function populateEncyclopedia() {
            const grid = document.getElementById('encyclopedia-grid');
            grid.innerHTML = '';
            const allQuestions = Object.values(allQuizData).flatMap(cat => cat.questions);
            const sortedUnlockedItems = unlockedItems.map(id => allQuestions.find(q => q.id === id)).filter(Boolean).sort((a,b) => a.id - b.id);

            if(sortedUnlockedItems.length === 0){
                grid.innerHTML = `<p class="text-gray-500 col-span-full text-center">まだ図鑑に登録された食材はありません。クイズに正解して図鑑を埋めよう！</p>`;
                return;
            }
            
            sortedUnlockedItems.forEach(item => {
                const entry = document.createElement('div');
                entry.className = 'flex flex-col items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-green-100 transition-colors';
                entry.onclick = () => openModal(item);
                entry.innerHTML = `<span class="text-4xl">${item.emoji}</span><span class="text-xs text-center">${item.item}</span>`;
                grid.appendChild(entry);
            });
        }
        function populateCalendar() {
            const calendarGrid = document.querySelector('#calendar-screen > div');
            calendarGrid.innerHTML = '';
            const allQuestions = Object.values(allQuizData).flatMap(cat => cat.questions);
            
            for (let i = 1; i <= 12; i++) {
                const monthEl = document.createElement('div');
                monthEl.className = 'bg-white p-3 rounded-lg shadow';
                
                const itemsForMonth = allQuestions.filter(item => item.season && item.season.includes(i));
                let seasonalItemsHtml = '';
                
                if (itemsForMonth.length > 0) {
                     seasonalItemsHtml = itemsForMonth.map(item => `
                        <div class="flex items-center bg-green-100 text-green-800 text-xs font-bold px-2.5 py-1 rounded-full">
                            <span class="text-base mr-1.5">${item.emoji}</span>
                            <span>${item.item}</span>
                        </div>
                    `).join('');
                } else {
                    seasonalItemsHtml = '<span class="text-xs text-gray-400">旬の食材は少なめ</span>';
                }

                monthEl.innerHTML = `
                    <h3 class="font-bold text-lg text-center border-b pb-1 mb-2">${i}月</h3>
                    <div class="flex flex-wrap gap-2 justify-center">
                        ${seasonalItemsHtml}
                    </div>
                `;
                calendarGrid.appendChild(monthEl);
            }
        }
        
        // --- QUIZ LOGIC ---
        function startQuiz(categoryKey) {
            currentCategoryKey = categoryKey;
            currentQuestionIndex = 0;
            score = 0;
            currentQuizQuestions = [...allQuizData[categoryKey].questions].sort(() => Math.random() - 0.5);
            document.getElementById('category-selection').classList.add('hidden');
            document.getElementById('quiz-container').classList.remove('hidden');
            displayQuestion();
        }
        function startMistakeQuiz() {
            if (mistakeItems.length === 0) return;
            const allQuestions = Object.values(allQuizData).flatMap(cat => cat.questions);
            currentQuizQuestions = mistakeItems.map(id => allQuestions.find(q => q.id === id)).filter(Boolean);
            if (currentQuizQuestions.length === 0) return;
            
            currentCategoryKey = 'mistakes';
            currentQuestionIndex = 0;
            score = 0;
            document.getElementById('category-selection').classList.add('hidden');
            document.getElementById('quiz-container').classList.remove('hidden');
            displayQuestion();
        }
        function displayQuestion() {
            if (currentQuestionIndex >= currentQuizQuestions.length) {
                showResult();
                return;
            }
            const quiz = currentQuizQuestions[currentQuestionIndex];
            const quizContainer = document.getElementById('quiz-container');
            quizContainer.innerHTML = `
                <div class="bg-white rounded-xl shadow-2xl p-6 md:p-8 fade-in">
                    <p class="text-sm font-bold text-green-600 mb-2">問題 ${currentQuestionIndex + 1} / ${currentQuizQuestions.length}</p>
                    <h2 class="text-2xl md:text-3xl font-bold mb-6 flex items-center"><span class="text-5xl mr-4">${quiz.emoji}</span>${quiz.question}</h2>
                    <div id="options-container" class="space-y-4">
                        ${quiz.options.map((option, index) => `
                            <button onclick="checkAnswer(${index})" class="quiz-option w-full text-left p-4 rounded-lg border-2 border-gray-200 bg-gray-50 hover:bg-green-50 hover:border-green-300 transition-colors duration-200">
                                <span class="font-bold">${option}</span>
                            </button>
                        `).join('')}
                    </div>
                    <div id="feedback-container" class="mt-6"></div>
                </div>
            `;
        }
        function checkAnswer(selectedIndex) {
            const quiz = currentQuizQuestions[currentQuestionIndex];
            const feedbackContainer = document.getElementById('feedback-container');
            const options = document.getElementById('options-container').children;
            for (let i = 0; i < options.length; i++) { options[i].onclick = null; options[i].classList.add('cursor-not-allowed', 'opacity-70'); }

            if (selectedIndex === quiz.answer) {
                score++;
                addExp(EXP_PER_CORRECT);
                options[selectedIndex].classList.add('correct');
                feedbackContainer.innerHTML = `<div class="fade-in p-4 rounded-lg bg-green-50 border-l-4 border-green-500"><h3 class="text-xl font-bold feedback-correct">正解！🎉</h3><p class="mt-2 text-gray-700">${quiz.explanation}</p></div>`;
                if (!unlockedItems.includes(quiz.id)) {
                    unlockedItems.push(quiz.id);
                    localStorage.setItem('unlockedItems', JSON.stringify(unlockedItems));
                }
                mistakeItems = mistakeItems.filter(id => id !== quiz.id);
                localStorage.setItem('mistakeItems', JSON.stringify(mistakeItems));
                updateReviewButton();
            } else {
                options[selectedIndex].classList.add('incorrect');
                options[quiz.answer].classList.add('correct');
                feedbackContainer.innerHTML = `<div class="fade-in p-4 rounded-lg bg-red-50 border-l-4 border-red-500"><h3 class="text-xl font-bold feedback-incorrect">残念！不正解です...</h3><p class="mt-2 text-gray-700">${quiz.explanation}</p></div>`;
                if (!mistakeItems.includes(quiz.id)) {
                    mistakeItems.push(quiz.id);
                    localStorage.setItem('mistakeItems', JSON.stringify(mistakeItems));
                    updateReviewButton();
                }
            }
            checkAchievement('collector_10');
            checkAchievement('collector_all');
            feedbackContainer.innerHTML += `<div class="text-center mt-6"><button onclick="nextQuestion()" class="bg-blue-500 text-white font-bold py-2 px-8 rounded-full text-lg hover:bg-blue-600 transition-transform hover:scale-105">${currentQuestionIndex === currentQuizQuestions.length - 1 ? '結果を見る' : '次の問題へ'}</button></div>`;
        }
        function nextQuestion() {
            currentQuestionIndex++;
            displayQuestion();
        }
        function showResult() {
            document.getElementById('quiz-container').classList.add('hidden');
            const resultContainer = document.getElementById('result-container');
            resultContainer.classList.remove('hidden');
            const total = currentQuizQuestions.length;
            let resultIcon = '💪', resultTitle = 'おしい！また挑戦してね！';
            if (score === total) { resultIcon = '🏆'; resultTitle = '全問正解！おめでとう！'; }
            else if (score >= total * 0.7) { resultIcon = '👍'; resultTitle = '素晴らしい！'; }
            resultContainer.innerHTML = `<div class="bg-white rounded-xl shadow-2xl p-8 fade-in"><h2 class="text-3xl font-bold mb-4 text-yellow-500">${resultTitle}</h2><div class="text-8xl mb-4">${resultIcon}</div><p class="text-xl mb-6">あなたは ${total} 問中 ${score} 問正解しました！</p><button onclick="showScreen('game-screen')" class="bg-green-500 text-white font-bold py-3 px-8 rounded-full text-lg hover:bg-green-600 transition-transform hover:scale-105">ホームに戻る</button></div>`;
            checkAchievement('first_quiz');
            if (achievementsData[`perfect_${currentCategoryKey}`]) {
                checkAchievement(`perfect_${currentCategoryKey}`);
            }
        }
        // --- HELPER FUNCTIONS ---
        function updateReviewButton() {
            const btn = document.getElementById('review-mistakes-btn');
            if (mistakeItems.length > 0) {
                btn.disabled = false;
                btn.textContent = `苦手問題を復習する (${mistakeItems.length}問)`;
            } else {
                btn.disabled = true;
                btn.textContent = '苦手問題はありません';
            }
        }
        function openModal(item) {
            const modal = document.getElementById('encyclopedia-modal');
            const content = document.getElementById('modal-content');
            content.innerHTML = `
                <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl">×</button>
                <h3 class="text-3xl font-bold mb-4 flex items-center"><span class="text-5xl mr-3">${item.emoji}</span>${item.item}</h3>
                <div class="space-y-3 text-gray-700">
                    <p><strong class="text-green-600">見分け方のポイント：</strong>${item.explanation}</p>
                    <p><strong class="text-green-600">主な栄養素：</strong>${item.nutrition}</p>
                    <p><strong class="text-green-600">保存方法：</strong>${item.storage}</p>
                </div>
            `;
            modal.classList.remove('hidden');
        }
        function closeModal() {
            document.getElementById('encyclopedia-modal').classList.add('hidden');
        }
    </script>
</body>
</html>

食材見分けマスター

ゲームだけやりたい人はこちら

Gemini Canvasでの制作過程

初見のプロンプト

美味しい野菜や果物や魚や肉の見分け方を調べて

ディープリサーチで調べてもらう

これがゲーム感覚で覚えられるサイト作ってほしい

さらに機能を充実させるためにGeminiにアイディアをだしてもらう

他に追加した方がいい機能はある？

下記を追加して
食材図鑑モード
旬のカレンダー
苦手問題の復習
レベルアップ・称号システム
実績・バッジ機能
実績バッジにXにシェアできるボタン作って

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

「食材の目利き学習ゲームサイト」開発プロンプト
1. 概要
ユーザーが美味しい食材（野菜、果物、魚、肉など）の見分け方を、ゲーム感覚で楽しく学べるインタラクティブなWebサイトを制作してください。クイズ形式のゲームに加え、学習をサポートする図鑑やカレンダー機能、そして継続的に楽しむためのゲーミフィケーション要素を盛り込みます。

2. 主要機能
以下の機能をすべて実装してください。

クイズシステム:

複数の食材カテゴリーから挑戦したいものを選択できる。

各カテゴリーごとに、見分け方に関する4択クイズが出題される。

回答を選択すると、即座に正解・不正解が視覚的に表示される。

正解・不正解に関わらず、詳しい解説文が表示される。

クイズ終了後、正解数を基にした結果画面を表示する。

学習サポート機能:

食材図鑑: クイズで正解した食材が自動的に登録される図鑑機能。登録された食材をクリックすると、見分け方のポイント、旬の時期、栄養素、保存方法などを確認できるモーダルウィンドウが表示される。

旬のカレンダー: 1月から12月までのカレンダー形式で、各月に旬を迎える食材がアイコンと名前付きで一覧表示される。

苦手問題の復習: クイズで間違えた問題だけをまとめて再挑戦できる機能。

ゲーミフィケーション要素:

レベルアップ・称号システム:

クイズに正解すると経験値（EXP）が貯まる。

経験値が一定値に達するとレベルアップし、ポップアップで通知される。

レベルに応じて「見習いバイヤー」「食材マスター」などの称号が与えられる。

現在のレベル、称号、次のレベルまでの経験値バーが画面上部に常に表示される。

実績・バッジ機能:

「初めてクイズを完了」「野菜クイズで全問正解」「図鑑を10個集める」など、特定の条件を達成すると実績が解除される。

解除した実績は「実績」ページでカラーのバッジとして一覧表示される。未解除のものはグレーアウトで表示する。

ソーシャル機能:

X（旧Twitter）シェア機能: 解除した実績バッジそれぞれに「Xでシェア」ボタンを設置する。ボタンをクリックすると、実績を獲得したことを報告する定型文が入った状態でXの投稿画面が開く。

3. コンテンツ要件
カテゴリー: 以下の8つのカテゴリーを作成してください。

野菜 🥕

果物 🍓

魚 🐟

肉 🥩

きのこ 🍄

乳製品・卵 🥚

乾物 🌊

加工食品 🥫

クイズデータ: 各食材の問題には、以下の情報を含んだデータ構造を用意してください。

id, item (食材名), emoji, question, options (選択肢), answer (正解のインデックス), explanation, season (旬の月), nutrition (栄養素), storage (保存方法)

4. デザイン・UI/UX要件
全体: 明るく、親しみやすいデザインにする。フォントは丸みのあるゴシック体（M PLUS Rounded 1cなど）を使用する。

スタイリング: Tailwind CSSを使用し、モダンでレスポンシブなレイアウトを実現する。

UI要素:

カテゴリー選択やボタンには、角の丸いカードデザインを採用し、ホバー時には少し浮き上がるようなアニメーションを付ける。

実績解除やレベルアップ時には、画面の隅にポップアップ（トースト通知）を表示する。

UIのナビゲーションは画面上部に固定し、現在表示している画面のボタンがアクティブ表示になるようにする。

5. 技術仕様
ファイル形式: すべてのHTML, CSS, JavaScriptを1つの**index.htmlファイルにまとめてください**。外部ファイルは作成しないこと。

データ保存: ユーザーの進捗（レベル、EXP、解放した図鑑アイテム、間違えた問題、実績）は、ブラウザのlocalStorageを使用して永続化してください。

言語: サイト内に表示されるすべてのテキスト（ボタン、解説、タイトルなど）は日本語にしてください。

完成度: 最終的なコードは、省略やプレースホルダー（...など）を含まない、完全に動作する完全なコードとして提供してください。