<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Epic RPG</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#game-log {
background: #f4f4f4;
padding: 10px;
margin-bottom: 20px;
height: 200px;
overflow-y: auto;
border: 1px solid #ddd;
}
button {
margin: 5px;
padding: 10px;
}
#player-stats {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Epic RPG</h1>
<div id="player-stats">
<p><strong>Name:</strong> <span id="player-name">Hero</span></p>
<p><strong>HP:</strong> <span id="player-hp">100</span>/<span id="player-max-hp">100</span></p>
<p><strong>MP:</strong> <span id="player-mp">50</span>/<span id="player-max-mp">50</span></p>
<p><strong>Level:</strong> <span id="player-level">1</span></p>
<p><strong>EXP:</strong> <span id="player-exp">0</span>/100</p>
<p><strong>Gold:</strong> <span id="player-gold">0</span></p>
<p><strong>Inventory:</strong> <span id="player-inventory">Potion x1</span></p>
<p><strong>Skills:</strong> <span id="player-skills">Fireball</span></p>
<p><strong>Equipped Weapon:</strong> <span id="player-weapon">None</span></p>
<p><strong>Equipped Armor:</strong> <span id="player-armor">None</span></p>
<p><strong>Current Quest:</strong> <span id="player-quest">None</span></p>
<p><strong>Stage:</strong> <span id="current-stage">1</span></p>
</div>
<div id="game-log"></div>
<button onclick="attack()">Attack</button>
<button onclick="useSkill()">Use Skill</button>
<button onclick="heal()">Heal</button>
<button onclick="openShop()">Shop</button>
<button onclick="acceptQuest()">Quest</button>
<button onclick="craftItem()">Craft Item</button>
<button onclick="nextStage()">Next Stage</button>
<button onclick="restart()">Restart</button>
<script>
// プレイヤーと敵のデータ
let player = {
name: "Hero",
hp: 100,
maxHp: 100,
mp: 50,
maxMp: 50,
attackPower: 10,
defense: 5,
exp: 0,
level: 1,
gold: 50,
inventory: ["Potion", "Iron Ore"],
skills: ["Fireball"],
weapon: null,
armor: null,
quest: null,
stage: 1,
};
let enemy = {
name: "Goblin",
hp: 50,
maxHp: 50,
attackPower: 8,
defense: 3,
};
const quests = [
{ name: "Defeat 3 Goblins", progress: 0, goal: 3, reward: 100 },
{ name: "Collect 2 Potions", progress: 0, goal: 2, reward: 50 },
];
const stages = [
{ stage: 1, description: "The Forest of Beginnings", enemies: ["Goblin", "Orc"] },
{ stage: 2, description: "The Cursed Mines", enemies: ["Dark Bat", "Skeleton"] },
{ stage: 3, description: "The Dragon's Lair", enemies: ["Fire Dragon"] },
];
// ゲームログ表示関数
function log(message) {
const logDiv = document.getElementById("game-log");
logDiv.innerHTML += `<p>${message}</p>`;
logDiv.scrollTop = logDiv.scrollHeight;
}
// プレイヤーの攻撃
function attack() {
const damage = Math.max(Math.floor(Math.random() * player.attackPower) - enemy.defense, 1);
enemy.hp -= damage;
log(`You attack the ${enemy.name} for ${damage} damage!`);
if (enemy.hp <= 0) {
log(`You defeated the ${enemy.name}!`);
gainExp(20);
gainGold(Math.floor(Math.random() * 20) + 10);
updateQuestProgress("Defeat 3 Goblins");
spawnNewEnemy();
return;
}
enemyAttack();
}
// 敵の攻撃
function enemyAttack() {
const damage = Math.max(Math.floor(Math.random() * enemy.attackPower) - player.defense, 0);
player.hp -= damage;
log(`The ${enemy.name} attacks you for ${damage} damage! Current HP: ${player.hp}`);
if (player.hp <= 0) {
log("You have been defeated...");
log("Press 'Restart' to try again.");
}
updateStats();
}
// ステージ移動
function nextStage() {
player.stage++;
const currentStage = stages.find(stage => stage.stage === player.stage);
if (!currentStage) {
log("Congratulations! You have completed the game!");
return;
}
log(`You enter the ${currentStage.description}.`);
spawnNewEnemy();
updateStats();
}
// 新しい敵を生成
function spawnNewEnemy() {
const currentStage = stages.find(stage => stage.stage === player.stage);
const randomEnemyName = currentStage.enemies[Math.floor(Math.random() * currentStage.enemies.length)];
enemy = {
name: randomEnemyName,
hp: Math.floor(Math.random() * 30 + 50),
maxHp: Math.floor(Math.random() * 30 + 50),
attackPower: Math.floor(Math.random() * 5 + 10),
defense: Math.floor(Math.random() * 5),
};
log(`A wild ${enemy.name} appears with ${enemy.hp} HP!`);
}
// アイテムクラフト
function craftItem() {
if (player.inventory.includes("Iron Ore")) {
player.inventory.splice(player.inventory.indexOf("Iron Ore"), 1);
player.weapon = "Iron Sword";
player.attackPower += 5;
log("You crafted an Iron Sword! Attack power increased by 5.");
} else {
log("You don't have the required materials to craft an item.");
}
updateStats();
}
// ステータス更新
function updateStats() {
document.getElementById("player-name").innerText = player.name;
document.getElementById("player-hp").innerText = player.hp;
document.getElementById("player-max-hp").innerText = player.maxHp;
document.getElementById("player-mp").innerText = player.mp;
document.getElementById("player-max-mp").innerText = player.maxMp;
document.getElementById("player-level").innerText = player.level;
document.getElementById("player-exp").innerText = player.exp;
document.getElementById("player-gold").innerText = player.gold;
document.getElementById("player-inventory").innerText = player.inventory.join(", ") || "Empty";
document.getElementById("player-skills").innerText = player.skills.join(", ") || "None";
document.getElementById("player-weapon").innerText = player.weapon || "None";
document.getElementById("player-armor").innerText = player.armor || "None";
document.getElementById("player-quest").innerText = player.quest ? player.quest.name : "None";
document.getElementById("current-stage").innerText = player.stage;
}
// 初期化
log("Welcome to the RPG! A Goblin appears!");
updateStats();
spawnNewEnemy();
</script>
</body>
</html>
