実験 #22：都道府県ヒントクイズ（度忘れ電話注文）

■22個目「度忘れ電話注文」

こんにちは、AIと作る100のゲーム実験室のみーです。（*＾_＾*）/

今日は「度忘れ電話注文」という、ちょっとおっちょこちょいな
都道府県クイズを作ってみました。

お客さんから電話がかかってくるのですが、
送り先の都道府県をすっかり忘れてしまったみたいです。

出身有名人 → 名所 → 食べ物の三つのヒントを聞きながら、
「もしかして、あそこかな？」と推理してあげてくださいね。

■ AIとのやりとりで面白かった部分

（＾＾*）今日もゲームを作るよ。
　今日のテーマは「お客からの注文電話（どこだっけ？）」ゲーム。

　お客さんから電話がかかってきます。
（ピロロロロ… ガチャ「はい、もしもし」）

「スペシャルセットを、お世話になった人のところへ送ってほしいんだけど…」
どうやら送り先の都道府県を度忘れしてしまったようです。

「えっと、ほら、あのー…」
クリックするごとにヒントが出てきます。

・有名人（「○○さんの出身の…」）
・名所（「○○が人気の観光地」）
・食べ物（「おいしい○○が有名な…」）

　この三段ヒントをもとに、プレイヤーは5択から都道府県を選びます。

　当たると、とてつもなく感謝されます。
　外れると「もういいです…」と言われて電話を切られます。

—

（AI）面白そうなゲームですね！メモ帳で保存してブラウザで遊べる、シンプルな電話応対ゲームを作成しました。

（*＾＾）食べ物は結構わかりやすいヒントなので、３つ目に順番変えよう。

（AI）承知いたしました！
「食べ物」は決め手になることが多いので、あえて最後（3段階目）の切り札に変更しました。

これにより、最初は「有名人」や「名所」という少し抽象的な情報から推測し、
どうしても分からない時に「食べ物」で確信する……という、よりパズル性の高い流れになります。

—

（＾＾*）ヒントに県名が入ってるのがあって、修正できるかな。
あと制限時間つけたい。電話の音も再現できる？

（AI）ご指摘ありがとうございます！ヒントに県名が入らないよう修正しました。
さらに「制限時間（30秒）」と「電話の呼び出し演出（ピロロロ！）」も追加しました。
音声は使えないので、画面の点滅とテキストで再現しています。

—

（*＾o＾）有名人のヒントを、歴史上の人物に変えられるかな。

（AI）素晴らしいアイデアですね！
歴史上の人物にすることで、教養クイズのような深みが出ます。

（＝＝；）でも、歴史上の有名人がいない県がまだあるよ。
明治・大正あたりの人物でもいいよ。

（AI）今日も熱心だね。
明治・大正の偉人や文化人も含めれば、全都道府県そろえられるね。
手抜きなしで47都道府県すべてのヒントを作り直したよ。

青森の太宰治、富山の高峰譲吉、長崎のグラバーなど、
ちょっとした教養クイズにもなるリストにしておいたから確認してみて。

〈AIは良かれと思って、たまに指示から少しズレたことをします。（・_・｀）〉

■ 実際の動作

　最初のアイデア相談のときに、AI が作ってくれた
　「度忘れ電話注文」ゲームです。
　基本的なところはすでに形になっています。

　ゲームの最初の画面です。47都道府県の連続クリアを目指しましょう。

　注文の着信が来るので、電話を取るとクイズがスタートします

　お客さんは送り先を思い出せません。
　ヒントをもとに、教えてあげましょう。

　ヒントは、①人物　②名所　③食べ物の順でひとつずつ表示されます。

　時間をかけすぎると、お客さんは立腹（＞皿＜♯）⁼3　
　チャレンジ終了となります。

　以下は、AIが出してくれたイメージ画像です。

■ コードのポイント

　今回の記事では、AI と相談しながら作った
「度忘れ電話注文」の HTML コードを公開します。

　ブラウザだけで動く、とてもシンプルなゲームです。

　PC の「メモ帳」（※Windowsの場合）を開き、
下のコードをコピーして貼り付け、「dowasure.html」など
好きな名前で保存してください。

　保存したファイルをブラウザで開くだけで遊べます。

【操作方法】
・着信が来たら電話を取り、お客さんのヒントを頼りに
　選択肢の中から正解の都道府県を選びます。

コードといっても、難しい部分はありません。貼り付けて保存するだけで動きます。

▼ここからコード▼（クリックで開く）

			
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注文電話：送り先特定（連続正解チャレンジ）</title>
    <style>
        body { font-family: 'Hiragino Kaku Gothic ProN', sans-serif; background-color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
        #game-container { background: #fdfdfd; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 95%; max-width: 550px; text-align: center; position: relative; overflow: hidden; }
        .screen { min-height: 380px; display: flex; flex-direction: column; }
        .hidden { display: none; }
        
        .calling { animation: ring-bg 0.2s infinite; }
        @keyframes ring-bg { 0% { background-color: #fdfdfd; } 50% { background-color: #ffcdd2; } 100% { background-color: #fdfdfd; } }
        
        button { background: #2c3e50; color: white; border: none; padding: 12px; margin: 5px 0; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; width: 100%; transition: 0.2s; }
        button:hover { background: #34495e; }
        .hint-btn { background: #f39c12; color: white; height: 60px; }
        .hint-btn:disabled { background: #bdc3c7; }
        
        .hint-box { background: #fffde7; padding: 10px; border-left: 6px solid #fbc02d; margin: 5px 0; text-align: left; font-size: 14px; animation: slideIn 0.3s; }
        
        .status-bar { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
        #timer { font-size: 20px; font-weight: bold; color: #e74c3c; }
        #score-display { font-size: 18px; font-weight: bold; color: #2980b9; background: #e8f4f8; padding: 5px 15px; border-radius: 20px; }
        
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
        @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* 祝福用アニメーション */
        @keyframes rainbow { 0%{color: #ff0000;} 20%{color: #ff9900;} 40%{color: #33cc33;} 60%{color: #3399ff;} 80%{color: #cc33cc;} 100%{color: #ff0000;} }
    </style>
</head>
<body>
<div id="game-container">
    <div id="start-screen" class="screen">
        <h1 style="color:#2c3e50;">📞 全国注文受付センター</h1>
        <p id="ring-text">……静かな事務所です……</p>
        <div id="phone-ui" class="hidden">
            <h2 style="color:#e74c3c;">🔔 ピロロロ！ピロロロ！</h2>
            <p>お客様から着信です！</p>
            <button onclick="startGame()" style="background:#27ae60; font-size: 20px;">📞 ガチャッ（電話に出る）</button>
        </div>
        <button id="wait-btn" onclick="waitPhone()">シフトに入る</button>
    </div>
    <div id="game-screen" class="screen hidden">
        <div class="status-bar">
            <div id="score-display">連続正解: 0 / 47</div>
            <div id="timer">残り: 30秒</div>
        </div>
        <div id="customer-voice">「もしもし！ギフトの送り先なんだけど…場所を忘れちゃって…」</div>
        <div id="hint-area" style="min-height: 150px;"></div>
        <button id="hint-btn" class="hint-btn" onclick="showNextHint()">「えーっと、ヒントをください…」</button>
        <div class="grid" id="choice-area"></div>
    </div>
    <div id="result-screen" class="screen hidden">
        <h2 id="result-title"></h2>
        <p id="result-text" style="font-size: 18px; white-space: pre-wrap; line-height: 1.5;"></p>
        <button id="next-btn"></button>
    </div>
</div>
<script>
    const allPrefData = [
        { name: "北海道", hints: ["「クラーク博士ゆかりの…」", "「時計台が人気の観光地！」", "「ジンギスカンが有名なあそこよ！」"] },
        { name: "青森県", hints: ["「太宰治の出身地の…」", "「ねぶた祭りが人気の観光地！」", "「リンゴが有名なあそこよ！」"] },
        { name: "岩手県", hints: ["「宮沢賢治の出身地の…」", "「中尊寺金色堂が人気の観光地！」", "「わんこそばが有名なあそこよ！」"] },
        { name: "宮城県", hints: ["「伊達政宗ゆかりの…」", "「松島が人気の観光地！」", "「牛タンが有名なあそこよ！」"] },
        { name: "秋田県", hints: ["「小野小町ゆかりの…」", "「なまはげ館が人気の観光地！」", "「きりたんぽが有名なあそこよ！」"] },
        { name: "山形県", hints: ["「上杉鷹山ゆかりの…」", "「蔵王の樹氷が人気の観光地！」", "「さくらんぼが有名なあそこよ！」"] },
        { name: "福島県", hints: ["「野口英世の出身地の…」", "「鶴ヶ城が人気の観光地！」", "「喜多方ラーメンが有名なあそこよ！」"] },
        { name: "茨城県", hints: ["「徳川光圀（水戸黄門）ゆかりの…」", "「袋田の滝が人気の観光地！」", "「納豆が有名なあそこよ！」"] },
        { name: "栃木県", hints: ["「足利尊氏ゆかりの足利学校がある…」", "「日光東照宮が人気の観光地！」", "「宇都宮餃子が有名なあそこよ！」"] },
        { name: "群馬県", hints: ["「新島襄の出身地の…」", "「草津温泉が人気の観光地！」", "「焼きまんじゅうが有名なあそこよ！」"] },
        { name: "埼玉県", hints: ["「渋沢栄一の出身地の…」", "「鉄道博物館が人気の観光地！」", "「深谷ねぎが有名なあそこよ！」"] },
        { name: "千葉県", hints: ["「伊能忠敬ゆかりの…」", "「鴨川シーワールドが人気の観光地！」", "「落花生が有名なあそこよ！」"] },
        { name: "東京都", hints: ["「勝海舟ゆかりの…」", "「東京スカイツリーが人気の観光地！」", "「もんじゃ焼きが有名なあそこよ！」"] },
        { name: "神奈川県", hints: ["「源頼朝が幕府を開いた…」", "「横浜中華街が人気の観光地！」", "「崎陽軒のシウマイが有名なあそこよ！」"] },
        { name: "新潟県", hints: ["「上杉謙信ゆかりの…」", "「苗場スキー場が人気の観光地！」", "「笹団子が有名なあそこよ！」"] },
        { name: "富山県", hints: ["「高峰譲吉（タカジアスターゼ発明者）の出身地の…」", "「立山黒部アルペンルートが人気の観光地！」", "「ホタルイカが有名なあそこよ！」"] },
        { name: "石川県", hints: ["「前田利家ゆかりの…」", "「兼六園が人気の観光地！」", "「のどぐろが有名なあそこよ！」"] },
        { name: "福井県", hints: ["「柴田勝家ゆかりの…」", "「東尋坊が人気の観光地！」", "「越前ガニが有名なあそこよ！」"] },
        { name: "山梨県", hints: ["「武田信玄ゆかりの…」", "「富士急ハイランドが人気の観光地！」", "「ほうとうが有名なあそこよ！」"] },
        { name: "長野県", hints: ["「真田幸村ゆかりの…」", "「善光寺が人気の観光地！」", "「信州そばが有名なあそこよ！」"] },
        { name: "岐阜県", hints: ["「斎藤道三ゆかりの…」", "「白川郷が人気の観光地！」", "「飛騨牛が有名なあそこよ！」"] },
        { name: "静岡県", hints: ["「徳川家康ゆかりの…」", "「三保の松原が人気の観光地！」", "「浜松餃子が有名なあそこよ！」"] },
        { name: "愛知県", hints: ["「豊臣秀吉の出身地の…」", "「名古屋城が人気の観光地！」", "「味噌かつが有名なあそこよ！」"] },
        { name: "三重県", hints: ["「松尾芭蕉の出身地の…」", "「伊勢神宮が人気の観光地！」", "「松阪牛が有名なあそこよ！」"] },
        { name: "滋賀県", hints: ["「井伊直弼の出身地の…」", "「琵琶湖が人気の観光地！」", "「近江牛が有名なあそこよ！」"] },
        { name: "京都府", hints: ["「紫式部ゆかりの…」", "「金閣寺が人気の観光地！」", "「千枚漬けが有名なあそこよ！」"] },
        { name: "大阪府", hints: ["「千利休の出身地の…」", "「通天閣が人気の観光地！」", "「たこ焼きが有名なあそこよ！」"] },
        { name: "兵庫県", hints: ["「平清盛ゆかりの…」", "「姫路城が人気の観光地！」", "「明石焼きが有名なあそこよ！」"] },
        { name: "奈良県", hints: ["「聖徳太子ゆかりの…」", "「東大寺が人気の観光地！」", "「柿の葉寿司が有名なあそこよ！」"] },
        { name: "和歌山県", hints: ["「徳川吉宗ゆかりの…」", "「アドベンチャーワールドが人気の観光地！」", "「紀州の梅干しが有名なあそこよ！」"] },
        { name: "鳥取県", hints: ["「後醍醐天皇が流された船上山がある…」", "「鳥取砂丘が人気の観光地！」", "「二十世紀梨が有名なあそこよ！」"] },
        { name: "島根県", hints: ["「森鴎外の出身地の…」", "「出雲大社が人気の観光地！」", "「出雲そばが有名なあそこよ！」"] },
        { name: "岡山県", hints: ["「雪舟の出身地の…」", "「倉敷美観地区が人気の観光地！」", "「きびだんごが有名なあそこよ！」"] },
        { name: "広島県", hints: ["「毛利元就ゆかりの…」", "「厳島神社が人気の観光地！」", "「もみじ饅頭が有名なあそこよ！」"] },
        { name: "山口県", hints: ["「吉田松陰ゆかりの…」", "「秋芳洞が人気の観光地！」", "「ふぐ料理が有名なあそこよ！」"] },
        { name: "徳島県", hints: ["「蜂須賀家政ゆかりの…」", "「鳴門の渦潮が人気の観光地！」", "「徳島ラーメンが有名なあそこよ！」"] },
        { name: "香川県", hints: ["「空海（弘法大師）ゆかりの…」", "「金刀比羅宮が人気の観光地！」", "「讃岐うどんが有名なあそこよ！」"] },
        { name: "愛媛県", hints: ["「正岡子規の出身地の…」", "「道後温泉が人気の観光地！」", "「じゃこ天が有名なあそこよ！」"] },
        { name: "高知県", hints: ["「坂本龍馬の出身地の…」", "「桂浜が人気の観光地！」", "「カツオのタタキが有名なあそこよ！」"] },
        { name: "福岡県", hints: ["「菅原道真ゆかりの…」", "「太宰府天満宮が人気の観光地！」", "「明太子が有名なあそこよ！」"] },
        { name: "佐賀県", hints: ["「大隈重信の出身地の…」", "「吉野ヶ里遺跡が人気の観光地！」", "「呼子のイカが有名なあそこよ！」"] },
        { name: "長崎県", hints: ["「トーマス・グラバーゆかりの…」", "「ハウステンボスが人気の観光地！」", "「ちゃんぽんが有名なあそこよ！」"] },
        { name: "熊本県", hints: ["「加藤清正ゆかりの…」", "「熊本城が人気の観光地！」", "「馬刺しが有名なあそこよ！」"] },
        { name: "大分県", hints: ["「福沢諭吉の出身地の…」", "「別府温泉が人気の観光地！」", "「とり天が有名なあそこよ！」"] },
        { name: "宮崎県", hints: ["「小村寿太郎の出身地の…」", "「高千穂峡が人気の観光地！」", "「チキン南蛮が有名なあそこよ！」"] },
        { name: "鹿児島県", hints: ["「西郷隆盛の出身地の…」", "「桜島が人気の観光地！」", "「黒豚が有名なあそこよ！」"] },
        { name: "沖縄県", hints: ["「尚巴志ゆかりの…」", "「首里城が人気の観光地！」", "「サーターアンダギーが有名なあそこよ！」"] }
    ];
    let remainingPrefData = [];
    let score = 0;
    let currentTarget, hintStep, timer, timeLeft;
    function waitPhone() {
        if (score === 0) {
            // スコア0の時に出題リストをリセット
            remainingPrefData = [...allPrefData];
        }
        
        document.getElementById('wait-btn').classList.add('hidden');
        document.getElementById('ring-text').innerText = "……。";
        
        // 1.5秒後に電話が鳴る
        setTimeout(() => {
            document.getElementById('game-container').classList.add('calling');
            document.getElementById('phone-ui').classList.remove('hidden');
        }, 1500);
    }
    function startGame() {
        document.getElementById('game-container').classList.remove('calling');
        document.getElementById('start-screen').classList.add('hidden');
        document.getElementById('game-screen').classList.remove('hidden');
        initRound();
    }
    function initRound() {
        // 重複しないように残りのリストからランダムで1つ選ぶ
        let randomIndex = Math.floor(Math.random() * remainingPrefData.length);
        currentTarget = remainingPrefData[randomIndex];
        // 選ばれた都道府県をリストから削除
        remainingPrefData.splice(randomIndex, 1);
        hintStep = 0;
        timeLeft = 30;
        
        // UIの初期化
        document.getElementById('score-display').innerText = `連続正解: ${score} / 47`;
        document.getElementById('hint-area').innerHTML = "";
        document.getElementById('hint-btn').disabled = false;
        document.getElementById('hint-btn').innerText = "「えーっと、ヒントをください…」";
        
        // 5択作成（正解以外は全データからランダム）
        let choices = [currentTarget.name];
        let others = allPrefData.filter(p => p.name !== currentTarget.name);
        while(choices.length < 5) {
            let pick = others[Math.floor(Math.random() * others.length)].name;
            if(!choices.includes(pick)) choices.push(pick);
        }
        choices.sort(() => Math.random() - 0.5);
        const choiceArea = document.getElementById('choice-area');
        choiceArea.innerHTML = "";
        choices.forEach(c => {
            const btn = document.createElement('button');
            btn.innerText = c;
            btn.onclick = () => checkAnswer(c);
            choiceArea.appendChild(btn);
        });
        // タイマー開始
        timer = setInterval(() => {
            timeLeft--;
            document.getElementById('timer').innerText = `残り: ${timeLeft}秒`;
            if (timeLeft <= 0) {
                clearInterval(timer);
                gameOver("時間切れ！", false);
            }
        }, 1000);
    }
    function showNextHint() {
        const hintArea = document.getElementById('hint-area');
        const div = document.createElement('div');
        div.className = "hint-box";
        div.innerText = currentTarget.hints[hintStep];
        hintArea.appendChild(div);
        hintStep++;
        if (hintStep >= 3) {
            document.getElementById('hint-btn').disabled = true;
            document.getElementById('hint-btn').innerText = "「もう思い出せないわ！」";
        }
    }
    function checkAnswer(answer) {
        clearInterval(timer);
        if (answer === currentTarget.name) {
            score++;
            if (score >= 47) {
                gameClear();
            } else {
                gameOver("正解！", true);
            }
        } else {
            gameOver(`失敗... (正解は${currentTarget.name})`, false);
        }
    }
    function gameOver(titleText, isSuccess) {
        document.getElementById('game-screen').classList.add('hidden');
        document.getElementById('result-screen').classList.remove('hidden');
        
        const title = document.getElementById('result-title');
        const text = document.getElementById('result-text');
        const nextBtn = document.getElementById('next-btn');
        
        title.style.animation = "none";
        if(isSuccess) {
            title.innerText = "✨ " + titleText;
            title.style.color = "#2e7d32";
            text.innerText = `「そうそう、${currentTarget.name}！\nよくわかったわね、さすがプロだわ！本当にありがとう！」\n\n（連続正解数: ${score}）`;
            
            nextBtn.innerText = "次の電話を待つ";
            nextBtn.onclick = () => {
                document.getElementById('result-screen').classList.add('hidden');
                document.getElementById('start-screen').classList.remove('hidden');
                document.getElementById('phone-ui').classList.add('hidden');
                waitPhone();
            };
        } else {
            title.innerText = "❌ " + titleText;
            title.style.color = "#c62828";
            text.innerText = "「ちょっと、何言ってるの？全然違うわよ！もういいわ！（ガチャン！）」\n\n（連続正解が途切れました…）";
            
            nextBtn.innerText = "シフトを最初からやり直す";
            nextBtn.onclick = () => {
                score = 0;
                document.getElementById('result-screen').classList.add('hidden');
                document.getElementById('start-screen').classList.remove('hidden');
                document.getElementById('wait-btn').classList.remove('hidden');
                document.getElementById('phone-ui').classList.add('hidden');
                document.getElementById('ring-text').innerText = "……静かな事務所です……";
            };
        }
    }
    function gameClear() {
        document.getElementById('game-screen').classList.add('hidden');
        document.getElementById('result-screen').classList.remove('hidden');
        
        const title = document.getElementById('result-title');
        const text = document.getElementById('result-text');
        const nextBtn = document.getElementById('next-btn');
        title.innerText = "🎊 全国制覇！完全クリア！ 🎊";
        title.style.animation = "rainbow 2s infinite";
        title.style.fontSize = "28px";
        
        text.innerHTML = "<b>「素晴らしい！ブラボー！！」</b><br><br>47都道府県、すべてのお客様の送り先をノーミスで完璧に案内しきったね！<br>君の知識と対応力はまさに神業！<br>今日から君が、この受付センターの<b>「伝説のマスター」</b>だ！<br>本当にお疲れ様！！";
        
        nextBtn.innerText = "伝説から引退する（最初から）";
        nextBtn.onclick = () => {
            score = 0;
            document.getElementById('result-screen').classList.add('hidden');
            document.getElementById('start-screen').classList.remove('hidden');
            document.getElementById('wait-btn').classList.remove('hidden');
            document.getElementById('phone-ui').classList.add('hidden');
            document.getElementById('ring-text').innerText = "……静かな事務所です……";
        };
    }
</script>
</body>
</html>

		

■ 今日の学び

　今回のゲームはクイズゲームです。
最近、「AIは自信をもって嘘をつくことがある」と聞きました。

　嘘を見抜くには、こちら側に詳しい知識が必要です。
一か月ほど前、好きな歌手のクイズゲームを作ったときのことを思い出しました。

　AIは、タイトルのイメージから勝手に歌詞を想像して問題を作ってしまい、
すごく違和感がありました。
　たとえば、ペンギンというタイトルの“人間の恋人の歌”なのに、
ペンギンの世界の話になっていたり……。
〈歌手が誰か、分かる人には分かるかな〉（＾＾；）

　修正をお願いしても、そのたびに謝罪と、
「今度こそ完ぺきな問題を作りました！」という自信満々な返事。
　でも、また違う方向にズレてしまう……という実験ゲームがありました。

　今回は、分かりやすい選択肢とヒントのクイズなので大丈夫だと思いますが、
もし間違いがあったらごめんなさい。ｍ（－－；）ｍ

■次回は、ゲーム実験室です。

「できるかな」をもとに作ってみたゲームたちを紹介します。
実験的な要素が強めの、ちょっとクセのあるゲームたちです。

　どんな動きをするのか、どんな仕組みなのか……
作っている本人もワクワクしながら試した実験です。

　お楽しみに。（*＾v＾）ノシ

次の実験はこちら（回転・遠心力・重力・推進力）：
「ジターリングの物理」

　ゲーム作りが楽しくて、どんどん作品が増えています（*＾v＾*）
　もし応援していただけたら、とても励みになります。

☕応援する