pokemon_wordle_dp.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ポケモンWordle（ダイヤ・パールまで）</title>
    <style>
        body { font-family: sans-serif; text-align: center; background-color: #f0f2f5; margin: 0; padding: 20px; }
        h1 { color: #333; margin-bottom: 5px; }
        .sub { color: #4a6fa5; font-size: 14px; font-weight: bold; margin-bottom: 20px; }
        #grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; max-width: 300px; margin: 0 auto 20px; }
        .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
        .cell { border: 2px solid #ccc; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; background: white; border-radius: 4px; }
        .correct { background-color: #6aaa64 !important; border-color: #6aaa64; color: white; }
        .present { background-color: #c9b458 !important; border-color: #c9b458; color: white; }
        .absent { background-color: #787c7e !important; border-color: #787c7e; color: white; }
        #input-area { margin-top: 20px; }
        input { font-size: 18px; padding: 8px; width: 160px; text-align: center; letter-spacing: 2px; }
        button { font-size: 18px; padding: 8px 16px; margin-left: 5px; cursor: pointer; background: #4a6fa5; color: white; border: none; border-radius: 4px; }
        button:hover { background: #344e76; }
        #message { margin-top: 15px; font-size: 18px; font-weight: bold; color: #d9534f; }
    </style>
</head>
<body>

    <h1>ポケモンWordle</h1>
    <div class="sub">第1世代(赤緑) ～ 第4世代(ダイパ) 限定版</div>

    <div id="grid"></div>

    <div id="input-area">
        <input type="text" id="guessInput" maxlength="5" placeholder="カタカナ5文字" autofocus>
        <button onclick="makeGuess()">送信</button>
    </div>

    <div id="message"></div>

    <script>
        // 第4世代（ダイヤモンド・パール）までの5文字のポケモン厳選リスト（100匹）
        const pokemonList = [
            "リザードン", "カメックス", "ピカチュウ", "ニドキング", "ピクシー", "キュウコン", "プクリン", "ラフレシア", "モルフォン", "ダグトリオ",
            "ペルシアン", "ゴルダック", "オコリザル", "ウインディ", "フーディン", "カイリキー", "ウツボット", "ゴローニャ", "ギャロップ", "ヤドラン",
            "レアコイル", "ドードリオ", "パルシェン", "ゲンガー", "スリーパー", "キングラー", "サワムラー", "エビワラー", "ベロリンガ", "マタドガス",
            "サイドン", "モンジャラ", "ガルーラ", "シードラ", "アズマオウ", "スターミー", "ストライク", "ルージュラ", "エレブー", "ブーバー",
            "カイロス", "ケンタロス", "ギャラドス", "ラプラス", "シャワーズ", "サンダース", "ブースター", "オムスター", "カブトプス", "プテラ",
            "カビゴン", "フリーザー", "サンダー", "ファイヤー", "カイリュー", "ミュウツー", "バクフーン", "オーダイル", "ランターン", "ネイティオ",
            "デンリュウ", "キレイハナ", "マリルリ", "ウソッキー", "ニョロトノ", "ワタッコ", "キマワリ", "ヤドキング", "ノコッチ", "ハリーセン",
            "ハッサム", "ツボツボ", "ヘラクロス", "サニーゴ", "オクタン", "デリバード", "エアームド", "ヘルガー", "ドンファン", "ポリゴン２",
            "カポエラー", "ミルタンク", "ハピナス", "ライコウ", "エンテイ", "スイクン", "バンギラス", "ルギア", "ホウオウ", "ジュカイン",
            "バシャーモ", "ラグラージ", "グラエナ", "マッスグマ", "アゲハント", "ドクケイル", "ルンパッパ", "ダーテング", "オオスバメ", "ペリッパー",
            "サーナイト", "アメモース", "キノガッサ", "ケッキング", "テッカニン", "ヌケニン", "ゴニョニョ", "バクオング", "ハリテヤマ", "エネコロロ",
            "ヤミラミ", "クチート", "ボスゴドラ", "チャーレム", "ライボルト", "プラスル", "マイナン", "バルビート", "イルミーゼ", "マルノーム",
            "サメハダー", "ホエルオー", "バクーダ", "コータス", "ブーピッグ", "パッチール", "フライゴン", "ノクタス", "チルタリス", "ザングース",
            "ハブネーク", "ルナトーン", "ソルロック", "ナマズン", "シザリガー", "ネンドール", "ユレイドル", "アーマルド", "ミロカロス", "ポワルン",
            "カクレオン", "ジュペッタ", "サマヨール", "チリーン", "アブソル", "オニゴーリ", "トドゼルガ", "ハンテール", "サクラビス", "ジーランス",
            "ラブカス", "ボーマンダ", "メタグロス", "レジロック", "レジアイス", "レジスチル", "ラティアス", "ラティオス", "カイオーガ", "グラードン",
            "レックウザ", "ジラーチ", "デオキシス", "ドダイトス", "ゴウカザル", "エンペルト", "ムクホーク", "レントラー", "ロズレイド", "ラムパルド",
            "トリデプス", "ミノマダム", "ガーメイル", "フローゼル", "チェリム", "トリトドン", "エテボース", "ミミロップ", "ムウマージ", "ドンカラス",
            "ブニャット", "スカタンク", "ドータクン", "ミカルゲ", "ガブリアス", "ルカリオ", "ドラピオン", "ドクロッグ", "マスキッパ", "ネオラント",
            "ユキノオー", "マニューラ", "ジバコイル", "ベロベルト", "ドサイドン", "モジャンボ", "エレキブル", "ブーバーン", "トゲキッス", "メガヤンマ",
            "リーフィア", "グレイシア", "グライオン", "マンムー", "ポリゴンＺ", "エルレイド", "ダイノーズ", "ヨノワール", "ユキメノコ", "ロトム",
            "ユクシー", "エムリット", "アグノム", "ディアルガ", "パルキア", "ヒードラン", "レジギガス", "ギラティナ", "クレセリア", "ダークライ"
        ];
        
        // ランダムに正解を選択
        const solution = pokemonList[Math.floor(Math.random() * pokemonList.length)];
        const maxGuesses = 6;
        let currentGuessCount = 0;

        // グリッドの初期化
        const grid = document.getElementById("grid");
        for (let i = 0; i < maxGuesses; i++) {
            const row = document.createElement("div");
            row.className = "row";
            for (let j = 0; j < 5; j++) {
                const cell = document.createElement("div");
                cell.className = "cell";
                cell.id = `cell-${i}-${j}`;
                row.appendChild(cell);
            }
            grid.appendChild(row);
        }

        // Enterキーでも送信できるようにする
        document.getElementById("guessInput").addEventListener("keypress", function(e) {
            if (e.key === "Enter") makeGuess();
        });

        function makeGuess() {
            const input = document.getElementById("guessInput");
            let guess = input.value.trim();
            const message = document.getElementById("message");

            // バリデーション
            if (guess.length !== 5) {
                message.textContent = "5文字で入力してください。";
                return;
            }
            if (!/^[\u30A0-\u30FFー]+\$/.test(guess)) {
                message.textContent = "カタカナで入力してください。";
                return;
            }
            message.textContent = "";

            // 判定処理の準備
            const solutionLetters = guess.split("");
            const remainingSolution = solution.split("");

            // 1回目のパス: 🟩 正解（文字も位置も一致）の判定
            for (let i = 0; i < 5; i++) {
                const cell = document.getElementById(`cell-${currentGuessCount}-${i}`);
                cell.textContent = guess[i];
                
                if (guess[i] === solution[i]) {
                    cell.classList.add("correct");
                    remainingSolution[i] = null; 
                    solutionLetters[i] = null;
                }
            }

            // 2回目のパス: 🟨 含まれるが位置違い、⬛ 不一致の判定
            for (let i = 0; i < 5; i++) {
                if (solutionLetters[i] === null) continue;
                
                const cell = document.getElementById(`cell-${currentGuessCount}-${i}`);
                const index = remainingSolution.indexOf(guess[i]);
                
                if (index !== -1) {
                    cell.classList.add("present");
                    remainingSolution[index] = null;
                } else {
                    cell.classList.add("absent");
                }
            }

            currentGuessCount++;
            input.value = "";

            // 勝敗判定
            if (guess === solution) {
                message.style.color = "#6aaa64";
                message.textContent = `おめでとう！ ${currentGuessCount}回目で正解しました！`;
                input.disabled = true;
            } else if (currentGuessCount >= maxGuesses) {
                message.textContent = `ゲームオーバー！ 正解は「${solution}」でした。`;
                input.disabled = true;
            }
        }
    </script>
</body>
</html>