実験 #15：混乱のスイカ割りチャレンジ（ヤジと嘘のスイカ割りゲーム）

■１5個目「ナビのうっとおしいスイカ割のゲーム」

　今回はこの「ヤジと嘘のスイカ割りゲーム」のゲームを作ってみました。
　このゲームの主人公は、目隠し状態で見えません。４人のナビを頼りにスイカを探したたいて割るゲームです。ヽ（*＾o＾）ノ

　前回の記事と同じく砂浜が舞台のゲームですが、雰囲気は真逆です。
　目隠しした状態で真っ暗な状態。個性の強い４人の適当なアドバイスが騒がしい。　
　騒がしいの苦手、けれど思いついたらとまらない　L（・ｖ・）」

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

（＾＾*）今日もゲームどんどん作るよ、html形式のメモアプリで動かせるゲーム。　
　「やじとナビがうっとおしいスイカ割」
　７×７のフィールドで、スイカはランダムで一番手前の一列以外のどこかのマスへ置かれる。
　目隠しの状態で前後左右方向固定で一歩ずつ移動する。
　「ここだ！」ボタンを押すと、自分の立ち位置のひとマス前を棒でたたく。
　スイカがそこにあれば成功。
　真っ暗な視界の中、画面の四隅から噴き出しで大きくスイカの位置についての情報が流れてくる。
　左上豪快アバウトな女性。
　右上適当チャラ男。
　右下気弱な男。
　左下ツンデレギャルのキャラ設定。
　それぞれが７割程度の正確さの情報を、提供してくれる。
　位置情報に関係ないヤジを飛ばすこともある。
　当たるまでチャレンジできる。
　最終のここだ！ボタンを押した回数がスコアとなる。

（AI）今回もまた、シュールな作品を思いついたね！一番のポイントは、プレイヤーの立ち位置によって「前」や「左」の意味が変わるところだ。全員が「前！」と言っていても、実は一人だけ正しい方向を指していて、残りの三人は「ヤジ」を飛ばしているだけ……なんて状況も生まれる。

四人の性格を想像しながら、誰の声を信じるか見極めるのがこのゲームの醍醐味だよ。

（＝ｖ＝*）結構ナビがわかりやすくて、正解ルートたどり着きやすかった。
　ヤジとウソの割合を少し高めてもいいかも。
　嘘もっと言っていいよ、結構みんな親切に教えてくれてる。

（AI）なるほど、まだ「人の良さ」が隠しきれてなかったか。
「全員信じられない……！」って頭を抱えるくらいのカオスこそ、このゲームの真髄だもんね。
　了解。今回は「信頼度を30%」まで叩き落としたよ。つまり、10回中7回はデタラメかヤジ。さらに、「逆の方向を教える嘘」のロジックを組み込んで、よりプレイヤーを惑わせる仕様にしたよ。

（AI）常連レベルが上がってきた君に贈る今宵の豆知識。
　スイカ割りで「右！左！」と指示を出すのは、実は武道でいう「目付（めつけ）」の訓練に近いんだって。
　……まぁ、このゲームの4人のヤジは訓練どころか、ただの妨害工作に近いけどね！
〈全員が前というから進んだらスイカから遠ざかってたことも…１発クリアは至難の業です〉（＾＾；）

■ 実際の動作

４人がそれぞれ、好きかってを言いますが、頼りになるのはその言葉だけ（つ_＜｀）

空振り少なくクリアしましょう。

途中AIの作ったイメージです。無料版の時はイメージ画像の字が
なんだか変です。

■ コードのポイント

　今回の記事では、AI と相談しながら作った「ヤジと嘘のスイカ割りゲーム」の HTML コードを公開します。ブラウザだけで動く、とてもシンプルなゲームです。

PC の「メモ帳」（※Windowsの場合）を開き、下のコードをコピーして貼り付け、「simaenaga.html」など好きな名前で保存 → ブラウザで開く。これだけで遊べます。

　操作はとても簡単で、矢印ボタンをマウスクリックで移動します。ひとつ前のマスにスイカがある！と思ったら「ここだ！」ボタンを押します。

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

			
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>極悪スイカ割 - Chaos Edition</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root { --sand: #f2d2a9; --sea: #4fc3f7; }
        body { 
            background: linear-gradient(to bottom, #81d4fa 0%, var(--sea) 40%, var(--sand) 80%);
            color: #333; font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
            margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden;
        }
        #game-wrapper {
            position: relative; width: 100%; max-width: 400px; height: 100vh;
            display: flex; flex-direction: column; align-items: center; padding-top: 20px;
        }
        h1 { font-size: 24px; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin: 10px 0; z-index: 10; }
        
        /* メインの真っ黒画面 */
        #screen-area {
            position: relative; width: 300px; height: 300px; margin: 20px 0;
        }
        #black-screen { 
            width: 100%; height: 100%; background: #000; 
            border: 10px solid #5d4037; border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
        }
        /* 吹き出し：黒画面の中に食い込むように配置 */
        .bubble {
            position: absolute; width: 140px; padding: 12px; border-radius: 15px;
            font-size: 16px; font-weight: bold; opacity: 0; transition: transform 0.2s, opacity 0.2s;
            z-index: 5; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            display: flex; align-items: center; justify-content: center;
        }
        /* 配置：黒画面の角に半分被るくらいに調整 */
        #tl { top: -10px; left: -20px; background: #ff5252; color: #fff; transform: rotate(-5deg); }
        #tr { top: -10px; right: -20px; background: #448aff; color: #fff; transform: rotate(5deg); }
        #bl { bottom: -10px; left: -20px; background: #e91e63; color: #fff; transform: rotate(3deg); }
        #br { bottom: -10px; right: -20px; background: #4caf50; color: #fff; transform: rotate(-3deg); }
        /* 操作パネル */
        .controls { display: grid; grid-template-columns: repeat(3, 75px); gap: 10px; margin-top: 10px; }
        button { 
            width: 75px; height: 75px; font-size: 28px; cursor: pointer; border: none; 
            border-radius: 15px; background: #fff; box-shadow: 0 5px #ddd;
        }
        button:active { transform: translateY(3px); box-shadow: 0 2px #ddd; }
        
        .btn-up { grid-column: 2; }
        .btn-left { grid-column: 1; }
        .btn-down { grid-column: 2; }
        .btn-right { grid-column: 3; }
        #hit-btn { 
            width: 245px; height: 60px; margin-top: 20px; background: #ffc107; 
            color: #000; font-weight: 900; font-size: 22px; border-radius: 30px; border: none;
            box-shadow: 0 6px #ffa000;
        }
        #log { font-size: 16px; font-weight: bold; color: #fff; text-shadow: 1px 1px 3px #000; min-height: 1.5em; }
    </style>
</head>
<body>
<div id="game-wrapper">
    <h1>🌴 ヤジと嘘のスイカ割 🌴</h1>
    <div id="log">声を聴け！(30%しか合ってないけど)</div>
    
    <div id="screen-area">
        <div id="black-screen"></div>
        <div id="tl" class="bubble"></div>
        <div id="tr" class="bubble"></div>
        <div id="bl" class="bubble"></div>
        <div id="br" class="bubble"></div>
    </div>
    <div class="controls">
        <button class="btn-up" onclick="move(0, -1)">↑</button>
        <button class="btn-left" onclick="move(-1, 0)">←</button>
        <button class="btn-down" onclick="move(0, 1)">↓</button>
        <button class="btn-right" onclick="move(1, 0)">→</button>
    </div>
    <button id="hit-btn" onclick="hit()">ここだっ！ 💥</button>
</div>
<script>
    let px = 3, py = 6, sx, sy, score = 0;
    const size = 7;
    const charSettings = {
        tl: { name: "姉御", yaji: ["海だーー！", "腹減った！", "勘でGO！", "ビール！！"] },
        tr: { name: "チャラ男", yaji: ["エモすぎｗ", "バイブスｗ", "マジ卍ｗ", "日焼けｗ"] },
        br: { name: "気弱", yaji: ["怖いよぉ", "帰りたい", "砂が…", "ヒィッ！"] },
        bl: { name: "ギャル", yaji: ["ハァ？", "ウザいし", "だるぅい", "最悪。"] }
    };
    function initGame() {
        sx = Math.floor(Math.random() * size);
        sy = Math.floor(Math.random() * (size - 1));
        px = 3; py = 6;
        score = 0;
        updateNavi();
    }
    function move(dx, dy) {
        let nx = px + dx, ny = py + dy;
        if (nx >= 0 && nx < size && ny >= 0 && ny < size) {
            px = nx; py = ny;
            updateNavi();
        }
    }
    function hit() {
        score++;
        if (px === sx && (py - 1) === sy) {
            alert("✨ 奇跡の命中！ ✨\nスイカを粉砕したぞ！\nスコア: " + score);
            initGame();
        } else {
            document.getElementById('log').innerText = "空振り！ (" + score + "回目)";
            updateNavi();
        }
    }
    function getNaviText(key) {
        const isOn = (px === sx && py === sy);
        if (isOn) return charSettings[key].yaji[Math.floor(Math.random() * 4)];
        let v = sy < py ? "前" : (sy > py ? "後ろ" : "");
        let h = sx < px ? "左" : (sx > px ? "右" : "");
        let realDir = v + h;
        
        let vF = sy < py ? "後ろ" : "前";
        let hF = sx < px ? "右" : "左";
        let fakeDir = vF + hF;
        const rand = Math.random();
        if (rand < 0.3) return formatText(key, realDir); // 3割 正解
        if (rand < 0.6) return formatText(key, fakeDir); // 3割 逆
        return charSettings[key].yaji[Math.floor(Math.random() * 4)]; // 4割 ヤジ
    }
    function formatText(key, dir) {
        switch(key) {
            case 'tl': return "ドーンと" + dir + "！";
            case 'tr': return "マジ" + dir + "っしょ！";
            case 'br': return "たぶん" + dir + "…";
            case 'bl': return "…どうせ" + dir + "。";
        }
    }
    function updateNavi() {
        ['tl', 'tr', 'bl', 'br'].forEach((id, i) => {
            const el = document.getElementById(id);
            el.style.opacity = 0;
            el.style.transform = "scale(0.8)";
            setTimeout(() => {
                el.innerText = getNaviText(id);
                el.style.opacity = 1;
                el.style.transform = "scale(1)";
            }, 100 + (i * 80));
        });
    }
    initGame();
</script>
</body>
</html>

		

■ 今日の学び

　スイカ好きなので、どんなゲームにしようかと考えてた時に、今はスイカの時期じゃないですが、スイカ割につながったんだと思います。結果として、作るのが面白いゲームになってしまいました。（*＾＾）

　AIへ「スマホ用にしてください。」と一言相談するだけでスマホ用に遊べるゲームに変えてくれます。
　少し手間はかかりましたが、スマホで遊べるようにする方法も、わかりやすく教えてくれます。
　悩む場面も少なく作ったゲームをスマホでも遊べるようになりました。
　スマホの画面で遊べる工夫もきちんと考えてくれていて、タッチ操作で楽々遊べます。
　もちろん、このスイカ割ゲームもスマホに入れて遊べるようにしました。
　お気に入りゲームをスマホ用でも、増やしていきますｐ（*＾o＾*）ｑ

　次回は「空に絵を描く」ゲームです。
　どうぞお楽しみに（*＾ｖ＾）ノシ

次の実験はこちら（絵画ゲーム第２弾）：「お絵描き雲」

AIと作る100のゲーム実験室（＾ｖ＾）