実験#34：想像と健康×夢と目覚（夢メーカー）

■34個目「夢メーカー」

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

今回は、日々の生活習慣から「今夜見る夢」を紡ぎ出すお話です。

食事の時間、寝室の環境、寝る前のスマホ……。
何気ない行動のすべてが、あなたが迷い込む“夢の設計図”になっています。

心身ともにリラックスして眠れた夜は、
光り輝くファンタジーの世界があなたを癒やし、最高の朝へ導いてくれます。

しかし、無理のある生活が続いて眠りの質が落ちていると——
夢の世界は、少しずつ“バグ”を起こし始めます。

重力が狂った不思議な街。
出口のない不気味な図書館。
そして最悪の場合、背後に冷たい「何か」が這い寄ってくる最恐の悪夢へ……。

あなたの今の生活は、どんな夢へと繋がっているのでしょうか。
どうか、今夜も素敵な目覚めを迎えられますように。

　　　＿（　＿(　＝　―、＝)_ zｚZＺ

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

（＾＾*）今日もゲーム作ります。HTML形式で動かせるゲーム。
タイトルは「夢メーカー」。わくわく感のあるタイトル画面からスタート。
マウスクリックで進められる診断ゲームです。

今の生活が質の良い眠りにつながっているかを判定します。
環境・食事・運動・ストレス・体の健康状態の5項目があり、
それぞれ5つの質問を用意。項目ごとにランダムで2問出題され、
4択で回答できます。

選択肢ごとにポイントがあり、眠りに悪い影響ほど高得点。
合計ポイントで5段階の評価が決まり、その結果に応じた
「夢のストーリー（約800文字）」が読める仕組みです。
リアリティのあるファンタジーで、段階ごとに世界観が変わります。
もちろん、一番悪い段階はホラーです。

（AI）「夢メーカー」、とても魅力的なコンセプトですね！
いただいた内容で、ブラウザで動くHTMLゲームとして問題なく作成できます。

（＾_＾）まずはベースをしっかり組み立てましょう。

（AI）承知しました。後から調整しやすいように、
質問データや長文ストーリーは差し替え可能な構造にしています。
今回は最大30ポイントで計算し、結果を5段階に振り分けています。

（*＾＾）いい感じです。選択肢の並びはランダムでお願いします。

（AI）了解です！選択肢もランダム表示に対応しました。
睡眠の質を問うリアルな質問25問も作成済みです。
プレイヤーにはポイント表示を見せず、純粋に診断を楽しめるようにしています。

（*＾＾）umakusasikometayo .

（AI）動作確認ありがとうございます！「うまく差し込めたよ」とのこと、安心しました。

〈入力上手くいかなくても、きちんと読んでくれるのでありがたいです〉（＾＾；）

（AI）これで土台は完成です。残るは、このゲームの核となる
「5段階の夢のストーリー（各800文字）」ですね。

～夢のストーリー構成案～

【0〜6pt】極上のファンタジー：黄金の雲海と光の都
最高の眠り。意識が透き通り、背中に翼が生えたような自由。
目覚めた後も余韻が残る、現実より少し美しい世界。

【7〜12pt】穏やかなファンタジー：瑠璃色の森と星降る湖
深い癒やし。精霊たちに守られ、五感がゆるやかに整っていく。
心の奥に静かな余白が生まれるような夢。

【13〜18pt】不思議な日常：空飛ぶ列車の旅
少し奇妙で、でもどこか懐かしい。
現実の記憶の断片が混ざり合い、重力が曖昧になる世界。

【19〜24pt】不穏なファンタジー：静寂の石造迷宮
かすかな不安。出口のない回廊、ゆっくり歪む時間。
ミヒャエル・エンデ作品のように、現実の裏側にもう一つの真実が潜む世界。

【25〜30pt】戦慄のホラー：奈落の深淵と「這い寄るもの」
最悪の眠り。逃げても距離が縮まらない、底冷えする恐怖。
日常の安心が静かに崩れていく悪夢。

■ 実際の動作

まずは、AIと相談しながら作ってもらったゲームの初期状態です。
まだベース段階なので、質問内容はざっくりしています。

（画像：AIが最初に作った基本のベース画面）

ここから調整を重ねて、今回の仕上がりがこちら。
選択肢からポイントが分かりにくくなり、診断らしさが増しました。

（画像：質問選択の画面）

ランク1の画面です。
背景色や漂う小物が、夢の世界観に合わせて変化します。

（画像：ランク１）

こちらはランク2。
少し幻想的で、柔らかい雰囲気の世界です。

（画像：ランク２）

ランク3は、日常と非日常が混ざり合うような不思議な空気感。

（画像：ランク３）

ランク4になると、静けさの中に不穏さが漂い始めます。

（画像：ランク４）

そしてランク5。
最も眠りの質が悪いときに見る、底冷えするような悪夢の世界です。

（画像：ランク５）

■ コードのポイント

今回の記事では、AI と相談しながら作った
「夢メーカー」の HTML コードを公開します。

ブラウザだけで動く、とてもシンプルなゲームです。
コードといっても難しい部分はありません。
貼り付けて保存するだけで動くので、気軽に試してみてください。

【遊ぶまでの手順】

1. PC の「メモ帳」（※Windows の場合）を開きます。
2. 下のコードをコピーして貼り付けます。
3. 「yume.html」など、好きな名前で保存します。
4. 保存したファイルをブラウザで開くだけで遊べます。

【操作方法】

① 診断をスタート
タイトル画面の **「診断を始める」** ボタンをクリックすると、夢の世界への扉が開きます。

② 10個の質問に直感で答えよう
「環境・食事・運動・ストレス・体の健康状態」の5つのカテゴリーから、
毎回ランダムで10問が出題されます。
画面に表示される4つの選択肢の中から、
今の自分に一番近いものをクリックしてください。
※深く考えず、直感でサクサク答えるのがおすすめです。

③ 運命の診断結果へ…
10問すべてに答えると、あなたの睡眠の質が自動で計算され、
結果に応じた「夢のストーリー」が表示されます。

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

			
<!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 {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            /* 初期状態の背景 */
            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
            transition: background 1.5s ease; /* 背景変化をゆっくりにする */
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
            overflow: hidden; /* 枠外のアイテムがはみ出さないようにする */
        }
        /* 背景の演出用コンテナ（一番後ろに配置） */
        #bg-effects {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none; /* クリックを邪魔しない */
            z-index: 0;
        }
        #game-container {
            position: relative;
            z-index: 10; /* 背景エフェクトより前に出す */
            background: rgba(0, 0, 0, 0.65);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
            max-width: 600px;
            width: 90%;
            backdrop-filter: blur(5px); /* 少しすりガラス風にして高級感を出す */
        }
        .screen {
            display: none;
        }
        .screen.active {
            display: block;
            animation: fadeIn 0.8s ease-in-out;
        }
        h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        p.subtitle {
            color: #ccc;
            margin-bottom: 30px;
        }
        button {
            background-color: #e94560;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            margin: 10px 0;
            width: 100%;
            max-width: 400px;
        }
        button:hover {
            background-color: #ff6b81;
            transform: scale(1.05);
        }
        .choice-btn {
            background-color: #4a4e69;
            display: block;
            margin: 15px auto;
        }
        .choice-btn:hover {
            background-color: #9a8c98;
        }
        #story-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: left;
            line-height: 1.8;
            max-height: 50vh;
            overflow-y: auto;
            margin-bottom: 20px;
            white-space: pre-wrap;
        }
        #category-label {
            color: #e94560;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* --- 枠外演出用のアニメーション --- */
        .floating-item {
            position: absolute;
            opacity: 0;
            animation: floatUp linear infinite;
        }
        @keyframes floatUp {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
        }
        /* ホラー（ランク5）用のバグった動き */
        .glitch-item {
            position: absolute;
            color: #8b0000;
            font-family: monospace;
            font-weight: bold;
            animation: jitter 0.1s infinite;
        }
        @keyframes jitter {
            0% { transform: translate(0, 0); }
            25% { transform: translate(3px, -3px); }
            50% { transform: translate(-3px, 3px); }
            75% { transform: translate(3px, 3px); }
            100% { transform: translate(-3px, -3px); }
        }
    </style>
</head>
<body>
<div id="bg-effects"></div>
<div id="game-container">
    <div id="title-screen" class="screen active">
        <h1>夢メーカー</h1>
        <p class="subtitle">あなたの今の生活は、どんな夢を紡ぐのか……</p>
        <button onclick="startGame()">診断を始める</button>
    </div>
    <div id="question-screen" class="screen">
        <p id="progress">質問 1 / 10</p>
        <div id="category-label">カテゴリー</div>
        <h2 id="question-text">ここに質問文が入ります</h2>
        <div id="choices-container"></div>
    </div>
    <div id="result-screen" class="screen">
        <h2 id="result-title">診断結果</h2>
        <div id="story-box">
            <p id="result-story">ここにストーリーが表示されます。</p>
        </div>
        <button onclick="resetGame()">もう一度診断する</button>
    </div>
</div>
<script>
    const categories = ['環境', '食事', '運動', 'ストレス', '体の健康状態'];
    const questionDatabase = {
        '環境': [
            { text: "寝室の「明るさ」はどのくらいですか？", choices: [{ text: "真っ暗にして寝ている", points: 0 }, { text: "足元灯や豆電球だけつけている", points: 1 }, { text: "外の街灯や月明かりが結構入ってくる", points: 2 }, { text: "テレビや部屋の電気をつけたまま寝落ちしがち", points: 3 }] },
            { text: "寝室の「音」の環境はどうですか？", choices: [{ text: "とても静か", points: 0 }, { text: "時計の針など小さな音が少しある", points: 1 }, { text: "家族の生活音や外の車の音が気になる", points: 2 }, { text: "常にテレビや動画の音を流している", points: 3 }] },
            { text: "使っている「寝具」のフィット感は？", choices: [{ text: "枕も布団も自分にぴったり", points: 0 }, { text: "特に不満はない", points: 1 }, { text: "少し首や腰が浮く感じがする", points: 2 }, { text: "朝起きると体が痛い・合っていない", points: 3 }] },
            { text: "寝る直前、布団の中でのスマホやPCは？", choices: [{ text: "寝室には持ち込まない・見ない", points: 0 }, { text: "アラームをセットする程度", points: 1 }, { text: "10〜20分くらいSNSなどをチェックする", points: 2 }, { text: "1時間以上動画を見たりゲームをしてしまう", points: 3 }] },
            { text: "寝室の「温度・湿度」は快適ですか？", choices: [{ text: "季節に合わせて完璧に調整している", points: 0 }, { text: "概ね快適に過ごせている", points: 1 }, { text: "少し暑い、または寒いと感じて起きることがある", points: 2 }, { text: "寝汗をかいたり、寒くて震えることがある", points: 3 }] }
        ],
        '食事': [
            { text: "夕食は寝る何時間前に済ませていますか？", choices: [{ text: "3時間以上前には終わっている", points: 0 }, { text: "2時間前くらい", points: 1 }, { text: "1時間前くらい", points: 2 }, { text: "食べてすぐ寝てしまうことが多い", points: 3 }] },
            { text: "午後3時以降に、コーヒーなどのカフェインをとりますか？", choices: [{ text: "全く飲まない、またはノンカフェイン", points: 0 }, { text: "夕方までに1杯程度", points: 1 }, { text: "夜でも2〜3杯は飲む", points: 2 }, { text: "寝る直前までエナジードリンクや濃いお茶を飲む", points: 3 }] },
            { text: "夕食の「ボリューム」はどのくらいですか？", choices: [{ text: "腹八分目で消化の良いもの", points: 0 }, { text: "普通に一人前を食べる", points: 1 }, { text: "お腹いっぱい、少し苦しいくらい食べる", points: 2 }, { text: "油っこいものや激辛など、胃に負担がかかるものをドカ食いする", points: 3 }] },
            { text: "寝る前のお酒（アルコール）の量は？", choices: [{ text: "飲まない", points: 0 }, { text: "軽くグラス1杯程度", points: 1 }, { text: "ほろ酔いになるくらい", points: 2 }, { text: "寝酒として、酔い潰れるまで飲む", points: 3 }] },
            { text: "寝る前の「水分補給」はどうしていますか？", choices: [{ text: "コップ1杯の白湯や水を飲む", points: 0 }, { text: "喉が渇いていれば少し飲む", points: 1 }, { text: "何も飲まない", points: 2 }, { text: "大量にガブ飲みして、夜中にトイレに起きる", points: 3 }] }
        ],
        '運動': [
            { text: "日中、歩いたり体を動かす時間はどのくらいですか？", choices: [{ text: "1時間以上しっかり動いている", points: 0 }, { text: "通勤や買い物で30分程度は歩く", points: 1 }, { text: "家の中やオフィスを歩く程度", points: 2 }, { text: "1日中座りっぱなし・寝転がりっぱなし", points: 3 }] },
            { text: "寝る前のストレッチやリラックス体操は？", choices: [{ text: "毎日欠かさず行っている", points: 0 }, { text: "気が向いた時や疲れた時にやる", points: 1 }, { text: "あまりやらない", points: 2 }, { text: "全くやらない", points: 3 }] },
            { text: "激しい運動（筋トレやランニングなど）のタイミングは？", choices: [{ text: "午前中や夕方までに済ませている", points: 0 }, { text: "夜の早めの時間に行う", points: 1 }, { text: "寝る直前にがっつり追い込む", points: 3 }, { text: "激しい運動は全くしない", points: 2 }] },
            { text: "日中、太陽の光を浴びていますか？", choices: [{ text: "朝起きてすぐにしっかり浴びる", points: 0 }, { text: "通勤や外出時に浴びている", points: 1 }, { text: "窓越しに少し明るさを感じる程度", points: 2 }, { text: "一日中カーテンを閉めた暗い部屋にいる", points: 3 }] },
            { text: "普段の生活で、自然や外の空気を感じることは？", choices: [{ text: "意識して自然に触れる時間を作っている", points: 0 }, { text: "たまに公園などを散歩する", points: 1 }, { text: "移動の時に外の空気を感じるくらい", points: 2 }, { text: "外の空気は全く吸っていない", points: 3 }] }
        ],
        'ストレス': [
            { text: "布団に入った時、何を考えていますか？", choices: [{ text: "何も考えず、リラックスしている", points: 0 }, { text: "楽しかったことや明日の予定", points: 1 }, { text: "今日の失敗や、仕事・人間関係の悩み", points: 2 }, { text: "不安や怒りで頭がいっぱいで眠れない", points: 3 }] },
            { text: "1日の中で、ホッと一息つける時間はありますか？", choices: [{ text: "十分にある", points: 0 }, { text: "少しだけある", points: 1 }, { text: "あまりない", points: 2 }, { text: "全くなく、常に何かに追われている", points: 3 }] },
            { text: "自分の感情を外に出せていますか？", choices: [{ text: "誰かに話したり、趣味でうまく発散できている", points: 0 }, { text: "たまに愚痴をこぼす程度", points: 1 }, { text: "我慢してしまうことが多い", points: 2 }, { text: "感情を完全に押し殺している", points: 3 }] },
            { text: "日中、無意識に歯を食いしばったり、肩に力が入っていませんか？", choices: [{ text: "全くない", points: 0 }, { text: "たまに気づいて力を抜く", points: 1 }, { text: "頻繁に力が入っている", points: 2 }, { text: "常にガチガチに緊張している", points: 3 }] },
            { text: "今の生活に対する満足度は？", choices: [{ text: "充実していて楽しい", points: 0 }, { text: "まあまあ満足している", points: 1 }, { text: "不満の方が多い", points: 2 }, { text: "毎日が辛くて仕方ない", points: 3 }] }
        ],
        '体の健康状態': [
            { text: "目の疲れ（眼精疲労）は感じますか？", choices: [{ text: "スッキリしている", points: 0 }, { text: "夕方になると少し疲れる", points: 1 }, { text: "常に目がしょぼしょぼする", points: 2 }, { text: "目の奥が痛く、頭痛もする", points: 3 }] },
            { text: "寝る時、手足の温度はどうですか？", choices: [{ text: "ポカポカと温かい", points: 0 }, { text: "ちょうどいい", points: 1 }, { text: "少し冷たい", points: 2 }, { text: "氷のように冷え切って痛い", points: 3 }] },
            { text: "朝起きた時の「スッキリ感」は？", choices: [{ text: "疲れが完全に取れて爽快！", points: 0 }, { text: "まあまあ起きられる", points: 1 }, { text: "まだ眠い、だるい", points: 2 }, { text: "寝る前より疲れている気がする", points: 3 }] },
            { text: "いびきや、寝ている間の呼吸について言われたことは？", choices: [{ text: "静かに寝ていると言われる（または自覚なし）", points: 0 }, { text: "疲れている時に少しいびきをかく", points: 1 }, { text: "日常的にいびきをかいている", points: 2 }, { text: "呼吸が止まっていると言われたことがある", points: 3 }] },
            { text: "日中の眠気はどうですか？", choices: [{ text: "全く眠くならない", points: 0 }, { text: "昼食後に少し眠くなる程度", points: 1 }, { text: "頻繁に強い眠気に襲われる", points: 2 }, { text: "気づくと一瞬寝落ちしていることがある", points: 3 }] }
        ]
    };
    // 背景色と降らせるアイテムのデータを追加しています
    const dreams = [
        { 
            maxPoints: 6,  
            title: "ランク1：生命の源泉流れる光の河", 
            text: "深い眠りの底からふわりと体が浮き上がるような感覚とともに、あなたの意識は透き通った世界へと降り立ちました。\n\n目を開けると、そこは視界の端まで続く雄大な大樹の森と、その中央をゆったりと流れる大河のほとりでした。木漏れ日はプリズムのように七色に輝き、眩しいほどの夏の光が水面をキラキラと乱反射させています。空気はどこまでも澄み渡り、深く息を吸い込むと、肺の隅々まで新鮮な生命力が染み渡っていくのがわかります。\n\n波打ち際を歩くと、足元には長い時間をかけて角が取れ、丸くすべすべになった宝石のようなガラス片がいくつも落ちていました。瑠璃色や翠緑色に淡く発光するその欠片を一つ拾い上げると、手のひらからじんわりと温かい波動が伝わり、凝り固まっていた心の緊張がふっと解けていきます。\n\n誘われるように、透明度が高く底までくっきりと見える川の浅瀬に足を踏み入れました。水は冷たすぎず、体温と溶け合うような心地よい温度です。清らかな水流が足首を撫でるたび、日々の生活で蓄積された疲労や、無意識に抱え込んでいた重たい感情が、文字通り水に溶け出し、遠くへ洗い流されていくのを感じます。\n\nやがて、遠くの山並みから黄金色の太陽がゆっくりと昇り始めました。その光はあなたの体を包み込み、細胞の一つ一つを新しく生まれ変わらせるような力強い熱を与えてくれます。全身にみなぎる圧倒的な活力。背中に見えない羽が生えたかのように体が軽く、今ならどんなことでも成し遂げられるという静かで確かな自信が満ち溢れてきます。\n\n光が最高潮に達した瞬間、あなたは自分のベッドの上で静かに目を開けました。\n夢の余韻は消えることなく、確かな熱量として体の中に残っています。頭は冴え渡り、窓から差し込む朝日に向かって大きく伸びをすると、全身の筋肉が喜ぶように目覚めました。最高のコンディションで迎える、素晴らしい一日の始まりです。",
            bgColor: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
            items: ["✨", "💎", "💧", "🌟"],
            animType: "float"
        },
        { 
            maxPoints: 12, 
            title: "ランク2：木漏れ日の箱庭と白い妖精", 
            text: "柔らかな草の感触を背中に感じて、あなたはゆっくりとまぶたを開けました。\n\nそこは、背の高い木々に守られた、秘密の箱庭のような美しい野原です。ぽかぽかとした春の陽だまりのような暖かさが、緊張でこわばっていた体を芯からほぐしていきます。風が吹き抜けるたび、草花がかすかに擦れる心地よい環境音が耳をくすぐります。\n\nふと足元に目を落とすと、そこには見渡す限りのクローバーの絨毯が広がっていました。何気なくしゃがみ込んで指先で撫でてみると、不思議なことに、そこにあるのはすべて四つ葉のクローバーでした。一つ一つが淡い緑色の光を帯びており、触れるだけで心がふんわりと軽くなるような、優しい魔法がかけられています。\n\nしばらくその光景に癒されていると、頭上の枝から愛らしい鳴き声が聞こえてきました。見上げると、雪玉のように真っ白で丸みを帯びた、小さな鳥たちが何羽も集まっています。彼らはあなたの肩や頭にちょこんととまり、その羽毛の信じられないほどの柔らかさが、頬を優しく撫でていきます。\n\nふいに、どこかで誰かが丁寧にハンドドリップで淹れたような、深く香ばしい香りが風に乗って微かに漂ってきました。それはハワイコナのようなフルーティーで甘い香りで、あなたの嗅覚から脳の奥深くまでを完全にリラックスさせてくれます。何も急ぐ必要のない、永遠に続くかのような穏やかな時間。心の中にあった小さなささくれや不安は、この空間に溶けて完全に消え去りました。\n\nやがて、白い鳥たちのさえずりが少しずつ遠ざかり、現実の朝の小鳥の声へと重なっていきます。\nゆっくりと目覚めると、心は穏やかな充足感で満たされていました。爆発的なエネルギーというよりは、今日起きるどんなことにも優しく向き合えるような、心のゆとりと静かなる活力を胸に秘めて、あなたの一日が始まります。",
            bgColor: "linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%)",
            items: ["🍀", "🕊️", "🍃", "🌿"],
            animType: "float"
        },
        { 
            maxPoints: 18, 
            title: "ランク3：重力の軽い青空市と脱調するコーヒー", 
            text: "気がつくと、あなたは活気あふれる見慣れた青空市の通りに立っていました。しかし、見上げる空はなぜか淡い紫色に染まっています。\n\n一歩踏み出そうとして、違和感に気づきました。重力がほんの少しだけ軽いのです。軽く地面を蹴るだけで、まるで月面を歩くように、ふわり、ふわりと体が宙に浮き上がります。周囲の人々もそれを気にする様子はなく、のんびりと買い物を楽しんでいます。\n\nふと立ち寄った古い玩具の露店には、金属製のリングが並んでいました。誰も手を触れていないのに、リングについている小さな金属のコマが、シャラシャラと心地よい音を立てて永遠に高速回転し続けています。\n\n喉が渇き、近くの屋台でコーヒーを注文しました。差し出されたカップの中を覗き込むと、黒い液体の底で楕円形の小さな回転子が猛スピードで回っており、見事なすり鉢状の渦（ボルテックス）を作り出していました。じっと見つめていると、不意に回転の同期がズレて「カタカタッ！」と脱調を起こし、跳ねたコーヒーのしずくが、小さなハムスターに姿を変えてわらわらと足元へ逃げていきました。\n\n驚いて顔を上げると、介護職のエプロンを着た人が、宙に浮く巨大なイシガメを散歩させながらのんびりと通り過ぎていきます。現実ではありえない光景なのに、夢の中のあなたにはとても懐かしく、すべてが「そういうものだ」と腑に落ちる不思議な安心感がありました。\n\n遠くで鳴るチャイムの音とともに、景色が水彩画のように滲んでいきます。\n目を覚ますと、いつもの自分の部屋でした。疲労感もありませんが、特段力がみなぎるわけでもない、フラットな目覚めです。ただ、頭の片隅にあの奇妙で愉快な世界の余韻が残っており、いつもの現実がほんの少しだけ面白く見えそうな、そんな不思議な気分で一日が始まります。",
            bgColor: "linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)",
            items: ["🐹", "☕", "🛸", "🐢"],
            animType: "float"
        },
        { 
            maxPoints: 24, 
            title: "ランク4：忘れ去られた時の回廊と沈黙の読書家", 
            text: "夢の入り口を抜けると、そこは果てしなく続く、薄暗い石造りの大図書館でした。\n\n天井は見えないほど高く、その影には、無数の、そしてすべてが異なる時刻を刻む巨大な時計が、不気味な静寂の中で時折、小さく「カタン、カタン」と奇妙な音を立てています。ある時計の針は逆に回り、あるものは一箇所で震え続けています。\n\n本棚には、見たこともない文字で書かれた古びた書物が、びっしりと並んでいます。思わず一冊を手に取ってみると、それは本というより、結晶化した時間そのもののようでした。ページをめくると、文字ではなく、遠い誰かの記憶の断片が、霧のように立ち上り、目の前で静かに消えていきます。\n\n自分はこの場所で何かを探しているはずなのに、それが何だったのか、そしてここからどうやって出ればいいのか、思い出せません。遠くに、他の人影が見えました。しかし、彼らは皆、何かに夢中になり、顔は深く影に覆われ、まるで時間という不可視の霧に飲み込まれ、個性を失ってしまったかのような、幽霊じみた存在でした。声をかけても、彼らの反応は、遠くで聞こえる風の音のように、かすかなものでした。\n\n閉塞感が、ゆっくりとあなたの心を締め付けていきます。この図書館全体が、忘れ去られたものたちの墓場であり、自分もまたその一部になろうとしている、という奇妙な確信が生まれます。足元に広がる影が、わずかにあなたを「読もう」としている、そんな感覚さえありました。\n\nあなたは走り出しました。出口を求めて、無数に続く回廊を。しかし、走れば走るほど、その回廊は歪み、同じ景色を繰り返します。壁の石が、あなたの焦りを映すかのように、不器用に波打っています。あなたは、自分がまだ想像もしないドアを探していることに気づくのです。\n\nやがて、遠くで鳴り響く、不協和音のチャイムが聞こえました。その音とともに、大図書館の石壁が、霧のように dissolving し、崩れ去っていきます。\nあなたは、自分のベッドの上で目を開けました。部屋はいつものままですが、体は鉛のように重く、心には、あの忘れ去られた場所の、冷たい静寂が残っています。夢の余韻は、確かな疲労感としてあなたの体に刻まれており、今日という一日を始めるための活力が、少しだけ奪われてしまったかのような、そんな目覚めでした。",
            bgColor: "linear-gradient(135deg, #5c5c5c 0%, #2b2b2b 100%)",
            items: ["🕰️", "📖", "🌫️", "⌛"],
            animType: "float"
        },
        { 
            maxPoints: 30, 
            title: "ランク5：書き換えられる深夜のメモ帳", 
            text: "気がつくと、あなたは深夜の薄暗い部屋で、PCのモニターを見つめていました。画面には、いつも使い慣れた真っ白な「メモ帳」だけが開かれています。\n\nカタ、カタカタ…。\nあなたの意思とは無関係に、両手が勝手にキーボードを叩き始めます。画面に打ち込まれていくのは、見慣れたはずのHTMLコード。しかし、入力されている内容はどこか異様でした。\n\n<body style=\"movement: none; breathing: false;\">\n\nその一行が記述された瞬間、あなたの全身から完全に感覚が消失しました。指先ひとつ動かせず、瞬きすらできません。胸の上に巨大な岩が乗っているかのように重く、息を吸い込むことすらできなくなります。完全な金縛りです。\n\n静まり返った部屋の中で、あなたの背後にある空間だけが、異様に冷たく淀み始めました。\n『ズズ……、ズリ……』\n振り返ることはできないのに、床を這い、ゆっくりとあなたの椅子へと近づいてくる「何か」の気配が、びっしりと鳥肌を立たせます。酷く生臭い、泥水のようなにおいが鼻をつきました。\n\nメモ帳のカーソルが、勝手に動き出します。\n『――うしろ、みてるよ』\n\n直後、あなたの肩越しに、異常に細く長く、どす黒い血管が透けた「腕」がヌルリと伸びてきました。その腕は、あなたの首筋に冷たく湿った指を撫で這わせながら、キーボードへ向かいます。\n\nカタ、カタ。\n画面に『 <delete> 』と打ち込まれた瞬間。\n\n視界が急速にひび割れ、強烈なノイズが頭蓋骨を内側から削るように鳴り響きます。背後の「何か」があなたの耳元に顔を寄せ、濡れた粘膜が擦れ合うような声で囁きました。\n\n「……コード、消シテアゲル……」\n\n絶叫しようとした瞬間、あなたは自分のベッドの上で激しく咳き込みながら飛び起きました。\nパジャマは冷や汗でぐっしょりと濡れ、心臓が肋骨を突き破りそうなほど激しく早鐘を打っています。部屋はすっかり朝を迎えているのに、首筋の湿った感触が消えません。まるで、まだ部屋の隅の暗がりに「それ」がうずくまって、あなたが再び目を閉じるのを待っているかのような……。\n疲労は全く取れておらず、拭い去れない恐怖と重苦しさを抱えたまま、最悪の一日が始まります。",
            bgColor: "linear-gradient(135deg, #050505 0%, #3a0000 100%)",
            items: ["<delete>", "ERROR", "👁️", "null"],
            animType: "glitch"
        }
    ];
    let currentQuestions = [];
    let currentQuestionIndex = 0;
    let totalPoints = 0;
    function shuffle(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 startGame() {
        totalPoints = 0;
        currentQuestionIndex = 0;
        currentQuestions = [];
        
        // 演出リセット
        document.body.style.background = "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)";
        document.getElementById('bg-effects').innerHTML = '';
        categories.forEach(cat => {
            let shuffledCat = shuffle([...questionDatabase[cat]]);
            currentQuestions.push(shuffledCat[0], shuffledCat[1]);
        });
        currentQuestions = shuffle(currentQuestions);
        switchScreen('question-screen');
        showQuestion();
    }
    function showQuestion() {
        const q = currentQuestions[currentQuestionIndex];
        document.getElementById('progress').innerText = `質問 ${currentQuestionIndex + 1} / 10`;
        document.getElementById('category-label').innerText = `【 ${q.category} 】`;
        document.getElementById('question-text').innerText = q.text;
        const choicesContainer = document.getElementById('choices-container');
        choicesContainer.innerHTML = ''; 
        const shuffledChoices = shuffle([...q.choices]);
        shuffledChoices.forEach(choice => {
            const btn = document.createElement('button');
            btn.className = 'choice-btn';
            btn.innerText = choice.text;
            btn.onclick = () => selectChoice(choice.points);
            choicesContainer.appendChild(btn);
        });
    }
    function selectChoice(points) {
        totalPoints += points;
        currentQuestionIndex++;
        if (currentQuestionIndex < currentQuestions.length) {
            showQuestion();
        } else {
            showResult();
        }
    }
    function showResult() {
        let finalDream = dreams[dreams.length - 1]; 
        
        for (let i = 0; i < dreams.length; i++) {
            if (totalPoints <= dreams[i].maxPoints) {
                finalDream = dreams[i];
                break;
            }
        }
        document.getElementById('result-title').innerText = finalDream.title;
        document.getElementById('result-story').innerText = `【獲得ポイント：${totalPoints}】\n\n` + finalDream.text;
        // --- 枠外の演出処理 ---
        document.body.style.background = finalDream.bgColor;
        const bgEffects = document.getElementById('bg-effects');
        bgEffects.innerHTML = ''; // 一度クリア
        // アイコンや文字を30個生成して配置
        for(let i = 0; i < 30; i++) {
            const item = document.createElement('div');
            // ホラーかそれ以外かで動きのクラスを分ける
            item.className = finalDream.animType === 'glitch' ? 'glitch-item' : 'floating-item';
            
            // 用意したアイテム群からランダムに選ぶ
            item.innerText = finalDream.items[Math.floor(Math.random() * finalDream.items.length)];
            
            // 画面の横幅ランダムな位置に配置
            item.style.left = Math.random() * 100 + 'vw';
            
            if(finalDream.animType === 'glitch') {
                // ホラーの場合は画面全体にランダム配置して、不気味に点滅させる
                item.style.top = Math.random() * 100 + 'vh';
                item.style.opacity = Math.random() * 0.5 + 0.1;
                item.style.fontSize = (1 + Math.random() * 2) + 'rem';
            } else {
                // 通常の場合は下から上へフワフワと上がる
                item.style.animationDelay = (Math.random() * 5) + 's'; // 発生タイミングをずらす
                item.style.animationDuration = (8 + Math.random() * 10) + 's'; // 上昇スピードをばらけさせる
                item.style.fontSize = (1.5 + Math.random() * 2.5) + 'rem'; // 大きさもばらけさせる
            }
            
            bgEffects.appendChild(item);
        }
        switchScreen('result-screen');
    }
    function resetGame() {
        // 背景演出をリセットしてタイトルへ
        document.body.style.background = "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)";
        document.getElementById('bg-effects').innerHTML = '';
        switchScreen('title-screen');
    }
    function switchScreen(screenId) {
        document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
        document.getElementById(screenId).classList.add('active');
    }
</script>
</body>
</html>

		

■ 今日の学び

今回は、5段階それぞれに約800字の夢ストーリーをAIと相談しながら作りました。
作っている途中で、今までのゲームに登場したキーワードが
ふと夢の中に混ざり込んでくるのがとても面白かったです。

どのランクの夢も個性が強く、つい全部読みたくなってしまいます。
質問をよく読むと、「この選択は健康にどう影響するんだろう？」と
自然に考えるようになり、診断ゲームとしての面白さも増しました。

そして、5つのストーリーを読み終えた頃には、
きっと誰もが“ランク1の夢”に向けて
少しだけ生活を整えたくなるはず……です！（＞ｖ＜）ｂ

■ 次回は、ちょっと危険な実験ゲームです。

　舞台はアマゾン川。
　水面をたたくと、あの魚たちが一斉に寄ってくる——
　そんな変わった釣りに挑戦します。

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

次の実験はこちら（水面をたたく・寄ってくる）：「ピラニア釣り」

　今日も最後まで読んでくださって、ありがとうございます。
みーの実験室は、みなさんの応援で元気に動いています。（*＾v＾*）

☕応援する