魔王側RPGゲーム

勇者たちの侵攻が始まりました。魔王様、どうしますか？
ご依頼ありがとうございます。以下が、魔王側RPGゲームの実装例になります。

注意事項：セキュリティに配慮して、evalや他のサイトへの遷移、リダイレクトは行いません。また、alertも使いません。

＜魔王側RPGゲーム＞
※ごめんなさい、ジョークが思いつかなかったため省略します。

<html>
  <head>
    <meta charset="UTF-8">
    <title>魔王側RPGゲーム</title>
  </head>
  <body>
    <h1>魔王側RPGゲーム</h1>
    <p>勇者たちの侵攻が始まりました。魔王様、どうしますか？</p>

    <button id="attack">攻撃する</button>
    <button id="escape">逃げる</button>

    <div id="result"></div>

    <script>
      // 魔王様のHP
      let maoHP = 100;

      // 攻撃をクリックしたら、魔王様が反撃する
      document.getElementById("attack").addEventListener("click", function() {
        // 勇者が与えるダメージ
        let damage = Math.floor(Math.random()*10);

        // 魔王様が与えるダメージ
        let maoDamage = Math.floor(Math.random()*5);

        // 魔王様のHPを更新
        maoHP -= damage;

        // 結果を表示
        document.getElementById("result").innerHTML = "勇者に" + damage + "のダメージを与えた。<br>魔王様の残りHP：" + maoHP;

        // 魔王様のHPが0以下になった場合、勇者に倒されたことを伝える
        if (maoHP <= 0) {
          document.getElementById("result").innerHTML += "<br>魔王様は倒されてしまった...。";
        } else {
          // 魔王様が反撃
          maoHP -= maoDamage;

          // 結果を表示
          document.getElementById("result").innerHTML += "<br>魔王様は反撃してきた！<br>勇者の残りHP：" + (100 - maoDamage);
        }
      });

      // 逃げるをクリックしたら、魔王様が降参する
      document.getElementById("escape").addEventListener("click", function() {
        // 結果を表示
        document.getElementById("result").innerHTML = "魔王様は降参しました。";
      });
    </script>
  </body>
</html>