Click here for free DL of the app version that can save data.

No:35602

122

←

Prev Next

→

RPG
Developer User16570｜Date and time 24/1/15 0:05:10
Build time 17.883 sec｜Game capacity 4.021KB｜

Script

了解しました。以下は、HTMLファイル内に実装されたシンプルなRPGゲームの例です。

RPG Game

Welcome to the RPG game!

上記のコードは、シンプルなRPGゲームを実装したものです。プレイヤーと敵の体力を表示し、攻撃や回復のボタンをクリックすることでゲームを進めることができます。ゲームが進行するとメッセージが表示され、体力が相手の攻撃や回復によって変化します。どちらかの体力が0以下になるとゲームが終了し、結果が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

了解しました。以下は、HTMLファイル内に実装されたシンプルなRPGゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>RPG Game</title>
  <meta charset="UTF-8">
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #message {
      font-size: 24px;
      margin-bottom: 20px;
    }
    #options {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #4287f5;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:disabled {
      background-color: gray;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>RPG Game</h1>
  <div id="message">Welcome to the RPG game!</div>
  <div id="options">
    <button onclick="attack()">Attack</button>
    <button onclick="heal()">Heal</button>
  </div>
  
  <script>
    // ゲームの状態を管理する変数
    let playerHealth = 100;
    let enemyHealth = 100;
  
    /**
     * 攻撃を行う関数
     */
    function attack() {
      const playerAttackPoint = Math.floor(Math.random() * 10) + 1;
      const enemyAttackPoint = Math.floor(Math.random() * 10) + 1;
  
      enemyHealth -= playerAttackPoint;
      playerHealth -= enemyAttackPoint;
  
      updateMessage(`Player attacked and dealt ${playerAttackPoint} damage!`);
      updateMessage(`Enemy attacked and dealt ${enemyAttackPoint} damage!`);
  
      updateHealth();
  
      if (playerHealth <= 0) {
        endGame(false);
      } else if (enemyHealth <= 0) {
        endGame(true);
      }
    }
  
    /**
     * 回復を行う関数
     */
    function heal() {
      const playerHealPoint = Math.floor(Math.random() * 10) + 1;
      const enemyAttackPoint = Math.floor(Math.random() * 10) + 1;
  
      playerHealth += playerHealPoint;
      playerHealth -= enemyAttackPoint;
  
      updateMessage(`Player healed for ${playerHealPoint} HP!`);
      updateMessage(`Enemy attacked and dealt ${enemyAttackPoint} damage!`);
  
      updateHealth();
  
      if (playerHealth <= 0) {
        endGame(false);
      } else if (enemyHealth <= 0) {
        endGame(true);
      }
    }
  
    /**
     * メッセージを更新する関数
     * @param {string} text - 更新するメッセージテキスト
     */
    function updateMessage(text) {
      const messageElement = document.getElementById("message");
      messageElement.innerText = text;
    }
  
    /**
     * プレイヤーと敵の体力を更新する関数
     */
    function updateHealth() {
      const playerHealthElement = document.getElementById("player-health");
      const enemyHealthElement = document.getElementById("enemy-health");
  
      playerHealthElement.innerText = `Player HP: ${playerHealth}`;
      enemyHealthElement.innerText = `Enemy HP: ${enemyHealth}`;
    }
  
    /**
     * ゲーム終了時の処理を行う関数
     * @param {boolean} isPlayerWin - プレイヤーが勝利したかどうか
     */
    function endGame(isPlayerWin) {
      const messageElement = document.getElementById("message");
      const optionsElement = document.getElementById("options");
  
      if (isPlayerWin) {
        messageElement.innerText = "Congratulations! You won the game!";
      } else {
        messageElement.innerText = "Game over! You lost the game!";
      }
  
      optionsElement.innerHTML = "";
    }
  
    // 初期状態の表示
    updateHealth();
  </script>
</body>
</html>
```