ボス戦RPG
Boss
Player
戦闘開始！
本プログラムはセキュリティ脆弱性を排除し、alertを使用しないよう注意して作成しました。また、エラー処理は省略しましたので、予期しない動作が起こる可能性があります。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RPG風ゲーム</title>
<style>
body {
font-family: sans-serif;
background-color: #def;
}
h1 {
text-align: center;
font-size: 2em;
margin-top: 0.5em;
}
.button {
background-color: #abc;
border: none;
padding: 0.5em 1em;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.button:hover {
background-color: #bcd;
}
.boss {
width: 300px;
height: 200px;
background-color: #987;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.boss h2 {
color: #fed;
margin: 0;
font-size: 1.2em;
text-align: center;
margin-top: 0.5em;
}
.boss img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 0.5em;
animation: bossMove linear 2s infinite;
}
@keyframes bossMove {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 5px);
}
100% {
transform: translate(0, 0);
}
}
.player {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.player img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.player h2 {
margin: 0;
font-size: 1.2em;
color: #000;
}
.text {
text-align: center;
margin-top: 10px;
font-size: 1.2em;
color: #000;
}
</style>
</head>
<body>
<h1>ボス戦RPG</h1>
<div class="boss">
<img src="https://via.placeholder.com/100">
<h2>Boss</h2>
</div>
<div class="player">
<img src="https://via.placeholder.com/50">
<h2>Player</h2>
</div>
<div class="text">戦闘開始！</div>
<button class="button" onclick="attack()">攻撃する</button>
<script>
function attack() {
const damage = Math.floor(Math.random() * 10) + 1;
const bossHp = 30 - damage;
const playerDamage = Math.floor(Math.random() * 10) + 1;
const playerHp = 50 - playerDamage;
// ボスHPの更新
const boss = document.querySelector('.boss');
const bossHpText = document.createElement('p');
if (bossHp <= 0) {
bossHpText.textContent = 'HP: 0(倒した！)';
boss.innerHTML = '<img src="https://via.placeholder.com/100"><h2>Boss(倒れた)</h2>';
document.querySelector('.button').disabled = true;
document.querySelector('.text').textContent = '戦闘終了！';
return;
}
bossHpText.textContent = `HP: ${bossHp}`;
boss.appendChild(bossHpText);
// プレイヤーHPの更新
const player = document.querySelector('.player');
const playerHpText = document.createElement('p');
if (playerHp <= 0) {
playerHpText.textContent = 'HP: 0(敗北)';
player.innerHTML = '<img src="https://via.placeholder.com/50"><h2>Player(倒れた)</h2>';
document.querySelector('.button').disabled = true;
document.querySelector('.text').textContent = '戦闘終了！';
return;
}
playerHpText.textContent = `HP: ${playerHp}`;
player.appendChild(playerHpText);
}
</script>
</body>
</html>
```