```html
<!DOCTYPE html>
<html>
<head>
<title>ファミコンRPG風ゲーム</title>
<style>
@keyframes hpLost {
0% {color: #ff0000;}
100% {color: #ffffff;}
}
@keyframes mpLost {
0% {color: #0000ff;}
100% {color: #ffffff;}
}
@keyframes attackAnim {
0% {transform: translateX(0);}
50% {transform: translateX(-10px);}
100% {transform: translateX(0);}
}
@keyframes healAnim {
0% {color: #00ff00;}
100% {color: #ffffff;}
}
</style>
<script>
let heroHP = 100, heroMP = 100, demonKingHP = 300, log = [];
let actionLog = document.createElement('div');
let gameOver = false, gameClear = false;
function init() {
document.body.innerHTML = `
<div style="width: 400px; height: 400px; border: 2px solid #000; padding: 10px; position: relative; background: #d3d3d3;">
<div id="status" style="margin-bottom: 10px;">
👑 魔王: HP <span id="demonHP">300</span> | 勇者: HP <span id="heroHP">100</span> MP <span id="heroMP">100</span>
</div>
<div id="logContainer" style="height: 240px; overflow-y: auto; border: 1px solid #000; background: #fff;">
${log.join('<br>')}
</div>
<div id="actions" style="position: absolute; bottom: 10px; width: 100%;">
<button onclick="attack()">攻撃</button>
<button onclick="heal()" id="healBtn">回復</button>
<button onclick="special()" id="specialBtn">特技</button>
</div>
<div id="question" style="position: absolute; top: 150px; width: 100%; text-align: center;">
👑 魔王: 世界の半分をお前にやろう！<br>
<button onclick="startBattle(true)">はい</button>
<button onclick="startBattle(false)">いいえ</button>
</div>
</div>
`;
actionLog = document.getElementById('logContainer');
}
function updateStatus() {
document.getElementById('demonHP').innerText = demonKingHP;
document.getElementById('heroHP').innerText = heroHP;
document.getElementById('heroMP').innerText = heroMP;
if(heroMP <= 0) {
document.getElementById('healBtn').disabled = true;
document.getElementById('specialBtn').disabled = true;
}
}
function addLog(message) {
log.unshift(message);
if(log.length > 4) log.pop();
actionLog.innerHTML = log.join('<br>');
}
function startBattle(choice) {
document.getElementById('question').style.display = 'none';
if(choice) {
document.body.innerHTML = '<div style="text-align: center; color: red; font-size: 30px;">👑 魔王: ゲームオーバー<br>勇者は贈り物を受け入れた。</div>';
} else {
addLog('👑 魔王: では、戦いだ!');
}
}
function attack() {
if(gameOver || gameClear) return;
let damage = Math.floor(Math.random() * (40 - 10 + 1)) + 10;
demonKingHP -= damage;
addLog(`⚔️ 勇者の攻撃！${damage}のダメージ`);
document.getElementById('heroHP').animate([{transform: 'scale(1.1)'},{transform: 'scale(1)'}], 300);
if(demonKingHP <= 0) {
endBattle(true);
return;
}
demonKingTurn();
}
function heal() {
if(gameOver || gameClear || heroMP < 10) return;
let recovery = Math.floor(Math.random() * (60 - 50 + 1)) + 50;
heroHP = Math.min(heroHP + recovery, 100);
heroMP -= 10;
addLog(`💉 勇者は体力を回復! ${recovery}回復`);
document.getElementById('heroHP').animate([{color: '#00ff00'}, {color: '#ffffff'}], 300);
demonKingTurn();
}
function special() {
if(gameOver || gameClear || heroMP < 5) return;
let damage = Math.floor(Math.random() * (60 - 30 + 1)) + 30;
demonKingHP -= damage;
heroMP -= 5;
addLog(`💥 勇者の特技! ${damage}のダメージ`);
document.getElementById('heroHP').animate([{transform: 'translateY(-10px)'},{transform: 'translateY(0)'}], 300);
if(demonKingHP <= 0) {
endBattle(true);
return;
}
demonKingTurn();
}
function demonKingTurn() {
setTimeout(() => { if(gameOver || gameClear) return;
let actions = [ 'attack()', 'fireBreath()', 'intenseFlame()', 'magic()', 'taunt()' ];
let action = actions[Math.floor(Math.random() * actions.length)];
eval(action);
}, 1000);
}
function endBattle(playerWins) {
if(playerWins) {
gameClear = true;
addLog('🎉 世界が平和になった！👸 お姫様と結婚しました。');
setTimeout(() => {
document.body.innerHTML += '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: green;">👸 お姫様: 本当にありがとう勇者様。<br>ゲームクリア</div>';
}, 5000);
} else {
gameOver = true;
document.body.innerHTML += '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: red;">👑 魔王: ゲームオーバー！<br>勇者は倒された...</div>';
}
}
function demonKingAction(action, damage, message) {
heroHP -= damage;
addLog(`👹 魔王: ${message} ${damage}のダメージ`);
if(heroHP <= 0) {
endBattle(false);
return;
}
updateStatus();
}
function attack() {
demonKingAction('攻撃', Math.floor(Math.random() * (40 - 10 + 1)) + 10, '攻撃を仕掛けてきた!');
}
function fireBreath() {
demonKingAction('火を吐いた', Math.floor(Math.random() * (35 - 20 + 1)) + 20, '火を吐いた！');
}
function intenseFlame() {
demonKingAction('激しい炎', Math.floor(Math.random() * (60 - 40 + 1)) + 40, '激しい炎を放った！');
}
function magic() {
demonKingAction('魔法', 30, '魔法を使った！');
}
function taunt() {
addLog('👹 魔王: ふん、君など恐るるに足らん！');
}
window.onload = init;
</script>
</head>
<body>
</body>
</html>
```
