勇者 HP: 100, MP: 100
魔王 HP: 300
世界の半分をお前にやろう！
勇者は倒れてしまった！
おめでとう！世界は平和になりました！
勝利を祝して、お姫様が現れた！
"勇者様、ありがとうございます！"
こちらがアプリのソースコードとなります。
``` html
<!DOCTYPE html>
<html>
<head>
<title>The Battle Against the Demon King</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f6f6f6;
margin: 0;
padding: 0;
}
#status {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #333;
color: white;
padding: 10px;
font-size: 20px;
}
#log {
background-color: white;
color: black;
padding: 10px;
font-size: 16px;
margin-top: 10px;
height: 160px;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
button {
background-color: #333;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#battle {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="status">
<div>勇者 HP: <span id="hero-hp">100</span>, MP: <span id="hero-mp">100</span></div>
<div>魔王 HP: <span id="demon-hp">300</span></div>
</div>
<div id="log"></div>
<div id="battle">
<div id="intro">
<p>世界の半分をお前にやろう！</p>
<button id="yes-button">はい</button>
<button id="no-button">いいえ</button>
</div>
<div id="fight" style="display: none;">
<button id="attack-button">攻撃</button>
<button id="heal-button">回復</button>
<button id="special-button">特技</button>
</div>
<div id="game-over" style="display: none;">
<p>勇者は倒れてしまった！</p>
<button id="retry-button">リトライ</button>
</div>
<div id="game-clear" style="display: none;">
<p>おめでとう！世界は平和になりました！</p>
</div>
<div id="princess" style="display: none;">
<p>勝利を祝して、お姫様が現れた！</p>
<p>"勇者様、ありがとうございます！"</p>
</div>
</div>
<script>
// ステータスの初期化
let heroHp = 100;
let heroMp = 100;
let demonHp = 300;
updateStatus();
// ログの初期化
let log = [];
// インタロゴ表示
document.querySelector('#yes-button').addEventListener('click', function() {
document.querySelector('#intro').style.display = 'none';
document.querySelector('#fight').style.display = 'block';
});
document.querySelector('#no-button').addEventListener('click', function() {
document.querySelector('body').style.backgroundColor = 'orange';
document.querySelector('body').style.color = 'white';
document.querySelector('#log').innerHTML = '<p>魔王：</p><p>残念だ……</p><p>魔王は世界を征服し、勇者は敗北を喫した。</p>';
});
// 戦闘ボタンクリック時の処理
document.querySelector('#attack-button').addEventListener('click', function() {
const damage = getRandomInt(10, 40);
demonHp -= damage;
logMessage('勇者', '攻撃', damage);
if (isDemonDead()) return;
demonAttack();
});
document.querySelector('#heal-button').addEventListener('click', function() {
if (heroMp <= 0) {
logMessage('勇者', 'MP切れ！', 0);
return;
}
const heal = getRandomInt(50, 60);
heroHp += heal;
heroMp -= 10;
if (heroHp > 100) {
heroHp = 100;
}
logMessage('勇者', '回復', heal);
});
document.querySelector('#special-button').addEventListener('click', function() {
if (heroMp <= 0) {
logMessage('勇者', 'MP切れ！', 0);
return;
}
const damage = getRandomInt(30, 60);
demonHp -= damage;
heroMp -= 5;
logMessage('勇者', '特技', damage);
if (isDemonDead()) return;
demonAttack();
});
document.querySelector('#retry-button').addEventListener('click', function() {
// HP・MPを初期化
heroHp = 100;
heroMp = 100;
demonHp = 300;
updateStatus();
// ログを初期化
log = [];
updateLog();
// 表示を初期化
document.querySelector('#game-over').style.display = 'none';
document.querySelector('#intro').style.display = 'block';
document.querySelector('#fight').style.display = 'none';
});
function demonAttack() {
const actionIndex = getRandomInt(0, 4);
let action, damage, message;
switch (actionIndex) {
case 0:
damage = getRandomInt(10, 40);
heroHp -= damage;
message = '魔王', '攻撃', damage);
break;
case 1:
damage = getRandomInt(20, 35);
heroHp -= damage;
message = '魔王', '火を吐く', damage);
break;
case 2:
damage = getRandomInt(40, 60);
heroHp -= damage;
message = '魔王', '激しい炎', damage);
break;
case 3:
damage = 30;
heroHp -= damage;
message = '魔王', '魔法', damage);
break;
case 4:
message = '魔王', '挑発', 0);
break;
}
logMessage(message);
if (isHeroDead()) return;
updateStatus();
updateLog();
}
function isDemonDead() {
if (demonHp <= 0) {
demonHp = 0;
updateStatus();
log.push('<p>勇者：</p><p>魔王を倒した！</p>');
updateLog();
document.querySelector('#fight').style.display = 'none';
document.querySelector('#game-clear').style.display = 'block';
setTimeout(function() {
document.querySelector('#princess').style.display = 'block';
}, 5000);
return true;
}
return false;
}
function isHeroDead() {
if (heroHp <= 0) {
heroHp = 0;
updateStatus();
document.querySelector('#fight').style.display = 'none';
document.querySelector('#game-over').style.display = 'block';
updateLog();
return true;
}
return false;
}
function updateStatus() {
document.querySelector('#hero-hp').textContent = heroHp;
document.querySelector('#hero-mp').textContent = heroMp;
document.querySelector('#demon-hp').textContent = demonHp;
}
function updateLog() {
let logHtml = '';
for (let i = Math.max(log.length - 4, 0); i < log.length; i++) {
logHtml += log[i];
}
document.querySelector('#log').innerHTML = logHtml;
}
function logMessage(actor, action, value) {
let message = '<p>' + actor + '：';
if (action === '回復') {
message += action + value + '回復した！</p>';
} else if (action === 'MP切れ！') {
message += action + '</p>';
} else if (value === 0) {
message += action + '</p>';
} else {
message += action + value + 'のダメージを与えた！</p>';
}
log.push(message);
updateLog();
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</body>
</html>
```
お楽しみいただければ幸いです！