ターン制バトル
プレイヤーのHP： 5
敵のHP： 5
バトルログ：
以下が実装例です。セキュリティ上の注意点にも注意し、実装いたしました。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ターン制バトル</title>
</head>
<body>
<h1>ターン制バトル</h1>
<div>プレイヤーのHP： <span id="myHp">5</span></div>
<div>敵のHP： <span id="enemyHp">5</span></div>
<div>バトルログ：</div>
<ul id="battleLog"></ul>
<button onclick="attack()">攻撃</button>
<button onclick="defend()">防御</button>
<button onclick="predict()">見切り</button>
<button onclick="heal()">回復</button>
<script>
let myHp = 5;
let enemyHp = 5;
let logCount = 0;
let maxLogCount = 5;
let usedHeal = false;
function addLog(log) {
const logNode = document.createElement("li");
logNode.innerText = log;
const battleLog = document.getElementById("battleLog");
battleLog.insertBefore(logNode, battleLog.firstChild);
logCount++;
if (logCount > maxLogCount) {
battleLog.removeChild(battleLog.lastChild);
}
}
function attack() {
addLog("攻撃を選択");
const enemyAction = Math.floor(Math.random() * 4);
if (enemyAction === 2) {
addLog("相手が見切りを選択");
myHp -= 3;
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは3ダメージを受けた（残りHP：${myHp}）`);
} else {
enemyHp -= 1;
if (enemyHp <= 0) {
enemyHp = 0;
myHp += 2;
usedHeal = false;
addLog(`敵を倒した！プレイヤーは2回復した（残りHP：${myHp}）`);
addLog("次の敵が現れた！");
enemyHp = 5;
} else {
addLog(`敵に1ダメージを与えた（残りHP：${enemyHp}）`);
}
if (enemyAction === 3) {
addLog("相手が回復を選択");
enemyHp += Math.floor(Math.random() * 2) + 1;
if (enemyHp > 5) {
enemyHp = 5;
}
addLog(`敵のHPが回復した（残りHP：${enemyHp}）`);
}
}
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
updateStatus();
}
function defend() {
addLog("防御を選択");
const enemyAction = Math.floor(Math.random() * 4);
if (enemyAction === 2) {
addLog("相手が見切りを選択");
myHp -= 1;
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは1ダメージを受けた（残りHP：${myHp}）`);
} else {
addLog("相手が攻撃を選択");
const damage = Math.floor(Math.random() * 2) + 1;
myHp -= Math.floor(damage / 2);
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは${damage}ダメージ受けた（残りHP：${myHp}）`);
}
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
updateStatus();
}
function predict() {
addLog("見切りを選択");
const enemyAction = Math.floor(Math.random() * 4);
if (enemyAction === 2) {
addLog("相手が見切りを選択");
myHp -= 2;
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは2ダメージを受けた（残りHP：${myHp}）`);
enemyHp -= 3;
if (enemyHp <= 0) {
enemyHp = 0;
myHp += 2;
usedHeal = false;
addLog(`敵を倒した！プレイヤーは2回復した（残りHP：${myHp}）`);
addLog("次の敵が現れた！");
enemyHp = 5;
} else {
addLog(`敵に3ダメージを与えた（残りHP：${enemyHp}）`);
}
} else {
addLog("相手が攻撃以外を選択");
myHp -= 2;
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは2ダメージを受けた（残りHP：${myHp}）`);
}
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
updateStatus();
}
function heal() {
if (usedHeal) {
addLog("回復は1度しか使用できない");
return;
}
usedHeal = true;
const healAmount = Math.floor(Math.random() * 2) + 2;
myHp += healAmount;
if (myHp > 5) {
myHp = 5;
}
addLog(`回復した！（回復量：${healAmount} 残りHP：${myHp}）`);
const enemyAction = Math.floor(Math.random() * 4);
if (enemyAction === 2) {
addLog("相手が見切りを選択");
myHp -= 3;
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
addLog(`プレイヤーは3ダメージを受けた（残りHP：${myHp}）`);
} else {
enemyHp -= 1;
if (enemyHp <= 0) {
enemyHp = 0;
myHp += 2;
usedHeal = false;
addLog(`敵を倒した！プレイヤーは2回復した（残りHP：${myHp}）`);
addLog("次の敵が現れた！");
enemyHp = 5;
} else {
addLog(`敵に1ダメージを与えた（残りHP：${enemyHp}）`);
}
if (enemyAction === 3) {
addLog("相手が回復を選択");
enemyHp += Math.floor(Math.random() * 2) + 1;
if (enemyHp > 5) {
enemyHp = 5;
}
addLog(`敵のHPが回復した（残りHP：${enemyHp}）`);
}
}
if (myHp <= 0) {
myHp = 0;
endGame("lose");
}
updateStatus();
}
function updateStatus() {
document.getElementById("myHp").innerText = myHp;
document.getElementById("enemyHp").innerText = enemyHp;
}
function endGame(result) {
alert(`ゲームオーバー！あなたは${result}しました！`);
showToast("再読み込みしてください");
}
</script>
</body>
</html>
```
ジョークとしては、見切りの際の「相手は見切りを選択した！けど、誰もいない。」というログです。攻撃と防御とは対照的なコマンドであるのに、見切りはどちらかというと攻撃寄りなので、そのギャップを意図しています。