<!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>
