🙃
魔王 HP: 200
ログ
勇者 HP: 100 MP: 100
```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>
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(5px, 5px); }
50% { transform: translate(-5px, 5px); }
75% { transform: translate(5px, -5px); }
100% { transform: translate(0, 0); }
}
@keyframes flash {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: transparent; }
}
@keyframes victory {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes defeat {
0% { transform: scale(1); }
50% { transform: scale(0.8); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center; background-color: black; width: 400px; height: 400px; color: white; overflow: hidden;">
<div id="maou" style="font-size: 100px;">🙃</div>
<div id="maouStatus" style="font-size: 20px;">魔王 HP: 200</div>
<div id="log" style="background-color: white; color: black; width: 100%; height: 60px; overflow-y: scroll; border: 1px solid white;">ログ</div>
<div id="yushaStatus" style="font-size: 20px;">勇者 HP: 100 MP: 100</div>
<div id="commands" style="display: flex; justify-content: space-around; width: 100%;">
<div><button onclick="attack()" style="background-color: white; color: black;">攻撃</button></div>
<div><button onclick="heal()" style="background-color: white; color: black;">回復</button></div>
<div><button onclick="special()" style="background-color: white; color: black;">特技</button></div>
</div>
</div>
<script>
let maouHP = 200;
let yushaHP = 100;
let yushaMP = 100;
let turn = 'yusha';
let maouForm = 'normal';
function attack() {
if (turn === 'yusha') {
const damage = Math.floor(Math.random() * 31) + 10;
maouHP -= damage;
addLog(`勇者の攻撃! 魔王に${damage}のダメージ!`);
updateMaouStatus();
if (maouHP <= 0) {
if (maouForm === 'normal') {
maouForm = 'final';
maouHP = 300;
document.getElementById('maou').innerHTML = '✋😇🤚';
updateMaouStatus();
} else {
victory();
return;
}
}
turn = 'maou';
maouAction();
}
}
function heal() {
if (turn === 'yusha' && yushaMP >= 10) {
const healAmount = Math.floor(Math.random() * 31) + 60;
yushaHP = Math.min(yushaHP + healAmount, 100);
yushaMP -= 10;
addLog(`勇者は回復した! HPが${healAmount}回復した!`);
updateYushaStatus();
turn = 'maou';
maouAction();
}
}
function special() {
if (turn === 'yusha' && yushaMP >= 5) {
const specialDamage = Math.floor(Math.random() * 31) + 30;
maouHP -= specialDamage;
yushaMP -= 5;
addLog(`勇者の特技! 魔王に${specialDamage}のダメージ!`);
updateMaouStatus();
if (maouHP <= 0) {
if (maouForm === 'normal') {
maouForm = 'final';
maouHP = 300;
document.getElementById('maou').innerHTML = '✋😇🤚';
updateMaouStatus();
} else {
victory();
return;
}
}
turn = 'maou';
maouAction();
}
}
function maouAction() {
const actions = maouForm === 'normal' ? [
{ name: '攻撃', damageRange: [10, 30] },
{ name: '火を吐く', damageRange: [20, 35] },
{ name: '激しい炎', damageRange: [30, 45] },
{ name: '魔法', damage: 30 },
{ name: '挑発', damage: 0 }
] : [
{ name: '連続攻撃', damageRange: [15, 25] },
{ name: '輝く息', damageRange: [35, 50] },
{ name: '究極魔法', damage: yushaHP - 1 },
{ name: '挑発', damage: 0 }
];
const action = actions[Math.floor(Math.random() * actions.length)];
if (action.name === '連続攻撃') {
const damage1 = Math.floor(Math.random() * 11) + 15;
const damage2 = Math.floor(Math.random() * 11) + 15;
yushaHP -= (damage1 + damage2);
addLog(`魔王の左手の攻撃! ${damage1}ダメージ! 右手の追撃${damage2}ダメージ!`);
} else if (action.name === '挑発') {
addLog("魔王の挑発: これで終わりではない！");
} else {
const damage = action.damage !== undefined ? action.damage : Math.floor(Math.random() * (action.damageRange[1] - action.damageRange[0] + 1)) + action.damageRange[0];
yushaHP -= damage;
addLog(`魔王の${action.name}! ${damage}ダメージ!`);
}
if (yushaHP <= 0) {
yushaHP = 0;
updateYushaStatus();
defeat();
return;
}
updateYushaStatus();
turn = 'yusha';
}
function updateMaouStatus() {
if (maouForm === 'normal') {
document.getElementById('maouStatus').innerText = `魔王 HP: ${maouHP}`;
} else {
document.getElementById('maouStatus').innerText = `最終形態の魔王 HP: ${maouHP}`;
}
}
function updateYushaStatus() {
document.getElementById('yushaStatus').innerText = `勇者 HP: ${yushaHP} MP: ${yushaMP}`;
if (yushaHP <= 40 && yushaHP > 0) {
document.getElementById('yushaStatus').style.color = 'orange';
} else if (yushaHP <= 0) {
document.getElementById('yushaStatus').style.color = 'red';
} else {
document.getElementById('yushaStatus').style.color = 'white';
}
}
function addLog(message) {
const log = document.getElementById('log');
log.innerText += '\n' + message;
log.scrollTop = log.scrollHeight;
}
function victory() {
addLog("勇者は魔王を倒した！世界に平和が訪れた！");
setTimeout(() => alert('お姫様と結婚し、冒険は終わりを迎えた。'), 5000);
}
function defeat() {
addLog("勇者は倒れた...しかし、再び立ち上がる！");
setTimeout(() => showToast("再読み込みしてください"), 5000);
}
</script>
</body>
</html>
```