魔王のHP: 300
勇者のHP: 100, MP: 100
勇者のHP: 100, MP: 100
世界の半分をお前にやろう！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>勇者 vs 魔王</title>
<style>
body {
background-color: #FFF8DC;
}
#status {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
#log {
margin-top: 20px;
padding: 10px;
background-color: #FFFFFF;
border: 1px solid #808080;
height: 120px;
overflow-y: scroll;
text-align: left;
}
#log div {
margin-bottom: 4px;
}
#log div:last-child {
margin-bottom: 0;
}
#log .enemy {
color: #DC143C;
}
#log .hero {
color: #4169E1;
}
.button {
padding: 10px;
background-color: #4169E1;
color: #FFFFFF;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
margin-right: 10px;
margin-bottom: 10px;
transition: background-color 0.3s ease-out;
}
.button:hover {
background-color: #6495ED;
}
.hero-buttons {
text-align: center;
margin-bottom: 20px;
}
.enemy-speech {
color: #DC143C;
font-style: italic;
margin-top: 10px;
}
.hero-speech {
color: #4169E1;
font-style: italic;
margin-top: 10px;
}
.gameover {
text-align: center;
font-size: 36px;
font-weight: bold;
color: #FFA500;
margin-top: 50px;
}
.retry {
display: block;
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #4169E1;
cursor: pointer;
transition: color 0.3s ease-out;
}
.retry:hover {
color: #6495ED;
}
.cleared {
text-align: center;
font-size: 36px;
font-weight: bold;
color: #4169E1;
margin-top: 100px;
}
.princess-speech {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="status">
<span class="enemy">魔王のHP:</span> <span id="enemy-hp">300</span><br>
<span class="hero">勇者のHP:</span> <span id="hero-hp">100</span>, <span class="hero">MP:</span> <span id="hero-mp">100</span>
</div>
<div id="log"></div>
<div id="question" style="text-align: center;">
<p>世界の半分をお前にやろう！</p>
<button class="button" id="answer-yes">はい</button>
<button class="button" id="answer-no">いいえ</button>
</div>
<div id="battle" style="display: none;">
<div class="hero-buttons">
<button class="button" id="attack">攻撃</button>
<button class="button" id="heal">回復</button>
<button class="button" id="special">特技</button>
</div>
<p class="enemy-speech" id="enemy-speech"></p>
<p class="hero-speech" id="hero-speech"></p>
</div>
<script>
window.onload = function() {
// ステータスの初期化
var enemyHP = 300;
var heroHP = 100;
var heroMP = 100;
// DOMの取得
var enemyHPElement = document.getElementById("enemy-hp");
var heroHPElement = document.getElementById("hero-hp");
var heroMPElement = document.getElementById("hero-mp");
var logElement = document.getElementById("log");
var questionElement = document.getElementById("question");
var answerYesElement = document.getElementById("answer-yes");
var answerNoElement = document.getElementById("answer-no");
var battleElement = document.getElementById("battle");
var attackElement = document.getElementById("attack");
var healElement = document.getElementById("heal");
var specialElement = document.getElementById("special");
var enemySpeechElement = document.getElementById("enemy-speech");
var heroSpeechElement = document.getElementById("hero-speech");
var gameOver = false;
// 魔王のセリフリスト
var enemySpeechList = [
"ははは！ この程度か！",
"我が魔力が召喚せしものよ、破壊の力を示せ！",
"お前の勇気も、あと少しで尽きるところだったな...",
"こんなところで命を落とすとは、情けない奴め。",
"喰らえ！ 地獄の炎風！",
"まだまだ良いところさ！ これだけで終わりか？",
"美しい月の光に心奪われ、邪悪なる魔力の渦へ…",
"この魔法でお前を粉砕してやる！",
"真っ赤な夕日よ、お前は一体何を見る？",
"もっと楽しく話そうじゃないか！",
];
// 勇者のセリフリスト
var heroSpeechList = [
"来い！",
"こんなことで倒れるわけにはいかない！",
"根性を見せるときが来た！",
"俺はまだ死にたくない！",
"魔王よ、俺たちは絶対に負けない！",
"さぁ、全力を尽くすぞ！",
"お前に負けるわけにはいかん！",
"テヘ！",
"世の中は広いね！",
"やってやるぜ！",
];
// 敵の行動リスト
var enemyActions = [
{ type: "attack", damageMin: 10, damageMax: 40 },
{ type: "fire", damageMin: 20, damageMax: 35},
{ type: "flame", damageMin: 40, damageMax: 60 },
{ type: "magic", damage: 30 },
{ type: "taunt", damage: 0 },
];
// 勇者の行動：攻撃
function heroAttack() {
// ダメージ計算
var damage = Math.floor(Math.random() * 31) + 10;
// 敵のHPを減らす
enemyHP -= damage;
// ゲームオーバーチェック
if(enemyHP <= 0) {
gameOver = true;
log("魔王を倒した！<br>世界は平和になり、お姫様と結婚した。<br><br>");
setTimeout(function() {
log("<span class=\"princess-speech\">おめでとう！ あなたが私を助けてくれたおかげで、世界は平和になったのよ。</span><br>");
setTimeout(function() {
log("<span class=\"cleared\">ゲームクリア！</span><br>");
}, 5000);
}, 5000);
}
// HPを更新
enemyHPElement.innerHTML = enemyHP;
// ログに追加
log("<span class=\"hero\">勇者</span>の攻撃！ 魔王に<span class=\"enemy\">" + damage + "</span>のダメージを与えた！<br>");
// 敵のターン
if(!gameOver) {
enemyTurn();
}
}
// 勇者の行動：回復
function heroHeal() {
// MPチェック
if(heroMP < 10) {
log("<span class=\"hero\">勇者</span>はMPが足りないため、回復を使えない！<br>");
return;
}
// 回復量計算
var heal = Math.floor(Math.random() * 11) + 50;
// HPを回復
heroHP += heal;
// 上限を超えた場合は調整
if(heroHP > 100) {
heroHP = 100;
}
// MPを消費
heroMP -= 10;
// HPとMPを更新
heroHPElement.innerHTML = heroHP;
heroMPElement.innerHTML = heroMP;
// ログに追加
log("<span class=\"hero\">勇者</span>は回復魔法を唱えた！ HPが<span class=\"hero\">" + heal + "</span>回復した！ MPを<span class=\"hero\">10</span>消費した！<br>");
// 敵のターン
enemyTurn();
}
// 勇者の行動：特技
function heroSpecial() {
// MPチェック
if(heroMP < 5) {
log("<span class=\"hero\">勇者</span>はMPが足りないため、特技を使えない！<br>");
return;
}
// ダメージ計算
var damage = Math.floor(Math.random() * 31) + 30;
// 敵のHPを減らす
enemyHP -= damage;
// MPを消費
heroMP -= 5;
// HPとMPを更新
enemyHPElement.innerHTML = enemyHP;
heroMPElement.innerHTML = heroMP;
// ゲームオーバーチェック
if(enemyHP <= 0) {
gameOver = true;
log("魔王を倒した！<br>世界は平和になり、お姫様と結婚した。<br><br>");
setTimeout(function() {
log("<span class=\"princess-speech\">おめでとう！ あなたが私を助けてくれたおかげで、世界は平和になったのよ。</span><br>");
setTimeout(function() {
log("<span class=\"cleared\">ゲームクリア！</span><br>");
}, 5000);
}, 5000);
}
// ログに追加
log("<span class=\"hero\">勇者</span>は、『" + heroSpeechList[Math.floor(Math.random()*heroSpeechList.length)] + "』と叫びながら、魔王に<span class=\"enemy\">" + damage + "</span>のダメージを与えた！ MPを<span class=\"hero\">5</span>消費した！<br>");
// 敵のターン
if(!gameOver) {
enemyTurn();
}
}
// 敵のターン
function enemyTurn() {
if(gameOver) {
return;
}
// 行動をランダムに決定
var action = enemyActions[Math.floor(Math.random()*enemyActions.length)];
// セリフをランダムに決定
var speech = enemySpeechList[Math.floor(Math.random()*enemySpeechList.length)];
// 行動に応じた処理
switch(action.type) {
case "attack":
// ダメージ計算
var damage = Math.floor(Math.random() * (action.damageMax - action.damageMin + 1)) + action.damageMin;
// 勇者のHPを減らす
heroHP -= damage;
// HPを更新
heroHPElement.innerHTML = heroHP;
// ログに追加
log("<span class=\"enemy\">魔王</span>の攻撃！ 勇者に<span class=\"hero\">" + damage + "</span>のダメージを与えた！<br>");
// ゲームオーバーチェック
if(heroHP <= 0) {
gameOver = true;
log("<span class=\"gameover\">勇者は倒れてしまった...<br>勇者を鼓舞するメッセージとともにリトライボタンをだしてください。</span><br>");
}
break;
case "fire":
// ダメージ計算
var damage = Math.floor(Math.random() * (action.damageMax - action.damageMin + 1)) + action.damageMin;
// 勇者のHPを減らす
heroHP -= damage;
// HPを更新
heroHPElement.innerHTML = heroHP;
// ログに追加
log("<span class=\"enemy\">魔王</span>は火を吐いた！ 勇者に<span class=\"hero\">" + damage + "</span>のダメージを与えた！<br>");
// ゲームオーバーチェック
if(heroHP <=