HP Battle Game
プレイヤーのHP: 4
敵のHP: 4
以下が実装例となります。セキュリティ脆弱性に配慮し、evalを使わず、他のサイトに遷移させたりリダイレクトさせたりする機能は省きました。
```
<!DOCTYPE html>
<html>
<head>
<title>HP Battle Game</title>
</head>
<body>
<h1>HP Battle Game</h1>
<p>プレイヤーのHP: <span id="playerHP">4</span></p>
<p>敵のHP: <span id="enemyHP">4</span></p>
<hr>
<p id="battleLog"></p>
<button onclick="playerAction('attack')">攻撃</button>
<button onclick="playerAction('charge')">溜める</button>
<button onclick="playerAction('defend')">防御</button>
<button onclick="playerAction('none')">何もしない</button>
<script>
let playerHP = 4;
let enemyHP = 4;
let battleLog = [];
function playerAction(action){
let enemyAction = getEnemyAction();
let damage = 1;
let message = "プレイヤーは攻撃した！ 敵はダメージを受けた！";
if(action === "charge"){
damage = 2;
message = "プレイヤーは溜めている…";
} else if(action === "defend"){
damage = 0.5;
message = "プレイヤーは防御した！ ダメージを半分受けた！";
} else if(action === "none"){
message = "プレイヤーは何もしなかった…";
}
enemyHP -= damage;
battleLog.unshift("プレイヤーの行動: "+action+" 敵の行動: "+enemyAction+" "+message);
if(enemyHP <= 0){
win();
return;
}
if(enemyAction === "charge"){
damage = 2;
message = "敵は溜めている…";
} else {
message = "敵は攻撃を仕掛けてきた！ プレイヤーはダメージを受けた！";
}
playerHP -= damage;
battleLog.unshift("プレイヤーのHP: "+playerHP+" 敵のHP: "+enemyHP+" "+message);
if(playerHP <= 0){
lose();
return;
}
if(battleLog.length > 3){
battleLog.pop();
}
updateDisplay();
}
function getEnemyAction(){
let actions = ["attack", "charge", "none"];
let index = Math.floor(Math.random() * actions.length);
return actions[index];
}
function win(){
playerHP++;
enemyHP += 0.5;
battleLog.unshift("敵を倒した！ プレイヤーのHPが1回復した！");
updateDisplay();
if(enemyHP === 4.5){
battleLog.unshift("次の敵が現れた！ 敵のHPが0.5増加した！");
enemyHP = 4;
} else {
battleLog.unshift("次のターンに突入します。");
}
}
function lose(){
battleLog.unshift("プレイヤーは敗北した… もう一度挑戦しよう！");
playerHP = 4;
enemyHP = 4;
}
function updateDisplay(){
document.getElementById("playerHP").textContent = playerHP;
document.getElementById("enemyHP").textContent = enemyHP;
document.getElementById("battleLog").textContent = battleLog.join("\n");
}
</script>
</body>
</html>
```
ジョーク要素として、「敵は強そうだけど、実装者は弱いから、勝ちやすいぞ！」などのメッセージを表示することもできます。ただし、誹謗中傷などは避けましょう。