勇者の聖典.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: 'Verdana', sans-serif;
            background-color: #121212;
            color: white;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        header {
            text-align: center;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.9);
            width: 100%;
            position: fixed;
            top: 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
        }

        h1 {
            font-size: 50px;
            margin: 0;
            text-shadow: 2px 2px 10px #ffcc00;
        }

        .container {
            background-color: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            width: 90%;
            max-width: 600px;
            margin-top: 100px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
        }

        .button {
            padding: 15px 30px;
            font-size: 18px;
            margin: 10px;
            cursor: pointer;
            background-color: #ffcc00;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #ffaa00;
        }

        .hidden {
            display: none;
        }

        footer {
            background-color: rgba(0, 0, 0, 0.9);
            padding: 20px;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 0;
        }

        select {
            font-size: 18px;
            padding: 10px;
            margin: 10px;
            background-color: #444;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<header>
    <h1>勇者の聖典 - クエスト＆バトル</h1>
</header>

<!-- メニュー画面 -->
<div class="container" id="menu-container">
    <h2>メニュー</h2>
    <button class="button" onclick="showTraining()">訓練場</button>
    <button class="button" onclick="showQuests()">クエストへ</button>
    <button class="button" onclick="showEquipment()">装備</button>
    <button class="button" onclick="showEnhancement()">装備の強化</button>
</div>

<!-- 訓練場画面 -->
<div class="container hidden" id="training-container">
    <h2>訓練を行ってレベルアップしましょう！</h2>
    <div class="training-actions">
        <button class="button" onclick="train('軽い訓練', 50)">軽い訓練 (50 XP)</button>
        <button class="button" onclick="train('中程度の訓練', 100)">中程度の訓練 (100 XP)</button>
        <button class="button" onclick="train('厳しい訓練', 200)">厳しい訓練 (200 XP)</button>
    </div>
    <button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>

<!-- クエスト選択画面 -->
<div class="container hidden" id="quest-container">
    <h2>クエストを選んでください</h2>
    <div class="quests">
        <button class="button" onclick="startQuest('王国への召喚', 'なし', 0, 0, 50, 'なし')">
            王国への召喚 (50 XP)
        </button>

        <button class="button" onclick="startQuest('初めての試練', 'ゴブリン', 500, 50, 70, '光の剣')">
            初めての試練 (70 XP)
        </button>

        <button class="button" onclick="startQuest('燃え盛る山の危機', '火山の魔物', 1800, 250, 200, '炎の剣')">
            燃え盛る山の危機 (200 XP)
        </button>

        <button class="button" onclick="startQuest('氷の洞窟の秘宝', '氷の魔物', 2000, 220, 250, 'アイススピア')">
            氷の洞窟の秘宝 (250 XP)
        </button>
    </div>
    <button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>

<!-- 装備画面 -->
<div class="container hidden" id="equipment-container">
    <h2>装備を選んでください</h2>
    <select id="equipment-select">
        <option value="光の剣">光の剣 (攻撃力 +20)</option>
        <option value="ドラゴンの鱗の盾">ドラゴンの鱗の盾 (防御力 +30)</option>
        <option value="精霊の指輪">精霊の指輪 (防御力 +10, 攻撃力 +10)</option>
        <option value="炎の剣">炎の剣 (攻撃力 +40)</option>
        <option value="アイススピア">アイススピア (攻撃力 +25, 防御力 +10)</option>
        <option value="暗黒の大剣">暗黒の大剣 (攻撃力 +50, 防御力 -10)</option>
    </select>
    <button class="button" onclick="equipItem()">装備する</button>
    <button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>

<!-- 装備の強化画面 -->
<div class="container hidden" id="enhancement-container">
    <h2>装備の強化</h2>
    <select id="enhance-select">
        <option value="光の剣">光の剣 (攻撃力 +20)</option>
        <option value="ドラゴンの鱗の盾">ドラゴンの鱗の盾 (防御力 +30)</option>
        <option value="精霊の指輪">精霊の指輪 (防御力 +10, 攻撃力 +10)</option>
        <option value="炎の剣">炎の剣 (攻撃力 +40)</option>
        <option value="アイススピア">アイススピア (攻撃力 +25, 防御力 +10)</option>
        <option value="暗黒の大剣">暗黒の大剣 (攻撃力 +50, 防御力 -10)</option>
    </select>
    <button class="button" onclick="enhanceItem()">強化する</button>
    <button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>

<!-- 戦闘画面 -->
<div class="container hidden" id="battle-container">
    <h2 id="battle-title">敵と戦っています...</h2>
    <div class="status">
        <div id="player-status">
            <h3>勇者のステータス</h3>
            <p>HP: <span id="player-hp">1000</span></p>
            <p>攻撃力: <span id="player-attack">100</span></p>
            <p>防御力: <span id="player-defense">50</span></p>
            <p>レベル: <span id="player-level">1</span></p>
            <p>経験値: <span id="player-xp">0</span> / <span id="xp-to-next-level">100</span></p>
        </div>
        <div id="enemy-status">
            <h3>敵のステータス</h3>
            <p>名前: <span id="enemy-name">ドラゴン</span></p>
            <p>HP: <span id="enemy-hp">1000</span></p>
            <p>攻撃力: <span id="enemy-attack">150</span></p>
        </div>
    </div>
    <div class="actions">
        <button class="button" onclick="attack()">攻撃</button>
        <button class="button" onclick="useSkill()">スキル使用</button>
        <button class="button" onclick="useItem()">アイテム使用</button>
    </div>
</div>

<!-- 報酬画面 -->
<div class="container hidden" id="reward-container">
    <h2>クエスト完了！</h2>
    <p id="reward-message">報酬を受け取って次のクエストへ進みましょう。</p>
    <p id="item-reward">獲得したアイテム: <span id="reward-item"></span></p>
    <button class="button" onclick="startNextQuest()">次のクエストへ</button>
    <button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>

<script>
    let player = {
        class: '',
        hp: 1000,
        maxHp: 1000,
        attack: 100,
        defense: 50,
        level: 1,
        xp: 0,
        xpToNextLevel: 100,
        skills: [],
        inventory: {
            healingPotion: 2,
            items: []
        },
        equipped: {
            weapon: '',
            shield: ''
        }
    };
    let enemy = {
        name: '',
        hp: 0,
        attack: 0
    };
    let currentQuestReward = '';

    function train(trainingType, xpEarned) {
        alert(`${trainingType}を行い、${xpEarned} XPを獲得しました！`);
        player.xp += xpEarned;
        checkLevelUp();
    }

    function checkLevelUp() {
        while (player.xp >= player.xpToNextLevel) {
            player.level++;
            player.xp -= player.xpToNextLevel;
            player.xpToNextLevel += 50;  // 次のレベルアップに必要なXPを増加
            player.maxHp += 100;         // レベルアップでHPが上昇
            player.attack += 10;         // レベルアップで攻撃力が上昇
            player.defense += 5;         // レベルアップで防御力が上昇
            alert(`レベルアップ！現在のレベルは ${player.level} です！`);
        }
        updateStatus();
    }

    function updateStatus() {
        document.getElementById('player-hp').textContent = player.hp;
        document.getElementById('player-attack').textContent = player.attack;
        document.getElementById('player-defense').textContent = player.defense;
        document.getElementById('player-level').textContent = player.level;
        document.getElementById('player-xp').textContent = player.xp;
        document.getElementById('xp-to-next-level').textContent = player.xpToNextLevel;
    }

    function showTraining() {
        document.getElementById('menu-container').classList.add('hidden');
        document.getElementById('training-container').classList.remove('hidden');
    }

    function returnToMenu() {
        document.getElementById('training-container').classList.add('hidden');
        document.getElementById('quest-container').classList.add('hidden');
        document.getElementById('battle-container').classList.add('hidden');
        document.getElementById('reward-container').classList.add('hidden');
        document.getElementById('equipment-container').classList.add('hidden');
        document.getElementById('enhancement-container').classList.add('hidden');
        document.getElementById('menu-container').classList.remove('hidden');
    }

    function showQuests() {
        document.getElementById('menu-container').classList.add('hidden');
        document.getElementById('quest-container').classList.remove('hidden');
    }

    function showEquipment() {
        document.getElementById('menu-container').classList.add('hidden');
        document.getElementById('equipment-container').classList.remove('hidden');
    }

    function showEnhancement() {
        document.getElementById('menu-container').classList.add('hidden');
        document.getElementById('enhancement-container').classList.remove('hidden');
    }

    function startQuest(questName, enemyName, enemyHp, enemyAttack, xpReward, rewardItem) {
        enemy.name = enemyName;
        enemy.hp = enemyHp;
        enemy.attack = enemyAttack;
        currentQuestReward = rewardItem;  // クエスト報酬アイテム
        player.xp += xpReward;            // クエスト完了時にXPを加算
        document.getElementById('battle-title').textContent = `${enemyName}との戦い`;
        document.getElementById('enemy-name').textContent = enemy.name;
        document.getElementById('enemy-hp').textContent = enemy.hp;
        document.getElementById('enemy-attack').textContent = enemy.attack;
        document.getElementById('quest-container').classList.add('hidden');
        document.getElementById('battle-container').classList.remove('hidden');
        updateStatus();
    }

    function equipItem() {
        const selectedItem = document.getElementById('equipment-select').value;
        if (selectedItem === '光の剣') {
            player.attack += 20;
            player.equipped.weapon = '光の剣';
        } else if (selectedItem === 'ドラゴンの鱗の盾') {
            player.defense += 30;
            player.equipped.shield = 'ドラゴンの鱗の盾';
        } else if (selectedItem === '精霊の指輪') {
            player.attack += 10;
            player.defense += 10;
            player.equipped.weapon = '精霊の指輪';
        } else if (selectedItem === '炎の剣') {
            player.attack += 40;
            player.equipped.weapon = '炎の剣';
        } else if (selectedItem === 'アイススピア') {
            player.attack += 25;
            player.defense += 10;
            player.equipped.weapon = 'アイススピア';
        } else if (selectedItem === '暗黒の大剣') {
            player.attack += 50;
            player.defense -= 10;
            player.equipped.weapon = '暗黒の大剣';
        }
        alert(`${selectedItem}を装備しました！`);
        updateStatus();
    }

    function enhanceItem() {
        const selectedItem = document.getElementById('enhance-select').value;
        if (selectedItem === '光の剣') {
            player.attack += 10;  // 強化による攻撃力アップ
            alert('光の剣を強化して攻撃力 +10！');
        } else if (selectedItem === 'ドラゴンの鱗の盾') {
            player.defense += 10;  // 強化による防御力アップ
            alert('ドラゴンの鱗の盾を強化して防御力 +10！');
        } else if (selectedItem === '精霊の指輪') {
            player.attack += 5;
            player.defense += 5;
            alert('精霊の指輪を強化して攻撃力 +5、防御力 +5！');
        } else if (selectedItem === '炎の剣') {
            player.attack += 15;
            alert('炎の剣を強化して攻撃力 +15！');
        } else if (selectedItem === 'アイススピア') {
            player.attack += 10;
            player.defense += 5;
            alert('アイススピアを強化して攻撃力 +10、防御力 +5！');
        } else if (selectedItem === '暗黒の大剣') {
            player.attack += 20;
            player.defense += 5;  // 強化による防御力の補正
            alert('暗黒の大剣を強化して攻撃力 +20、防御力 +5！');
        }
        updateStatus();
    }

    function attack() {
        const damage = Math.max(0, player.attack - enemy.attack / 4);
        enemy.hp -= damage;
        document.getElementById('enemy-hp').textContent = Math.max(0, enemy.hp);
        if (enemy.hp <= 0) {
            victory();
        } else {
            enemyAttack();
        }
    }

    function enemyAttack() {
        const damage = Math.max(0, enemy.attack - player.defense / 4);
        player.hp -= damage;
        document.getElementById('player-hp').textContent = Math.max(0, player.hp);
        if (player.hp <= 0) {
            defeat();
        }
    }

    function useSkill() {
        if (player.skills.length > 0) {
            const skillDamage = 150;  // スキルのダメージ
            enemy.hp -= skillDamage;
            alert(`スキルを使用して${skillDamage}ダメージを与えました！`);
            document.getElementById('enemy-hp').textContent = Math.max(0, enemy.hp);
            if (enemy.hp <= 0) {
                victory();
            } else {
                enemyAttack();
            }
        } else {
            alert("スキルをまだ習得していません！");
        }
    }

    function useItem() {
        if (player.inventory.healingPotion > 0) {
            player.hp = Math.min(player.maxHp, player.hp + 200);
            player.inventory.healingPotion--;
            alert("回復薬を使用してHPを200回復しました！");
            updateStatus();
        } else {
            alert("回復薬がありません！");
        }
    }

    function victory() {
        alert("勝利しました！");
        document.getElementById('battle-container').classList.add('hidden');
        document.getElementById('reward-container').classList.remove('hidden');
        document.getElementById('reward-item').textContent = currentQuestReward;
        player.inventory.items.push(currentQuestReward);  // Add reward to player's items
        checkLevelUp();
    }

    function defeat() {
        alert("敗北しました！");
        document.getElementById('battle-container').classList.add('hidden');
        document.getElementById('quest-container').classList.remove('hidden');
    }

    function startNextQuest() {
        document.getElementById('reward-container').classList.add('hidden');
        document.getElementById('quest-container').classList.remove('hidden');
    }

    window.onload = function() {
        document.getElementById('training-container').classList.add('hidden');
        document.getElementById('quest-container').classList.add('hidden');
        document.getElementById('battle-container').classList.add('hidden');
        document.getElementById('reward-container').classList.add('hidden');
        document.getElementById('equipment-container').classList.add('hidden');
        document.getElementById('enhancement-container').classList.add('hidden');
        document.getElementById('menu-container').classList.remove('hidden');
        updateStatus();
    };

</script>

</body>
</html>

投稿者: chosuke

趣味はゲームやアニメや漫画などです

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です