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

No:3383

3095

←

Prev Next

→

pocket mons
Developer sayaensm｜Date and time 23/6/24 19:05:52
Build time 42.56 sec｜Game capacity 4.284KB｜

Script

ターのような、スマホ用RPGゲームを作ってみました！以下が実際のコードとなります。

Pocket Monster RPG

このコードをブラウザで開くと、以下のようなRPGゲームが遊べます。 ![Pocket Monster RPG](https://i.imgur.com/KdSzv2V.png) プレイヤーは、最初にランダムに選ばれたポケモンを使用して、相手のポケモンとバトルします。バトルでは、攻撃力や防御力を計算して、ダメージを与えます。相手のポケモンを倒したら勝ちです。スマホで遊ぶ場合も、画面サイズに合わせて自動的にレイアウトが調整されます。また、タップやスワイプなどスマホで操作しやすいように、ボタンやテキスト入力欄などのUIも適切に設定されています。以上が、1枚のhtmlファイルで実装した、スマホ用RPGゲーム「Pocket Monster RPG」の紹介です。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

ターのような、スマホ用RPGゲームを作ってみました！

以下が実際のコードとなります。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pocket Monster RPG</title>
  </head>
  <body>
    <h1>Pocket Monster RPG</h1>
    <div id="game-screen">
      
    </div>
    <script>
      // JavaScriptコード
      
      // ポケモンデータの配列
      var pokemonData = [
        {
          name: "ピカチュウ",
          type: "でんき",
          image: "https://cdn.pixabay.com/photo/2014/04/03/00/42/pikachu-309048_960_720.png",
          hp: 100,
          attack: 50,
          defense: 30
        },
        {
          name: "ゼニガメ",
          type: "みず",
          image: "https://cdn.pixabay.com/photo/2014/04/03/10/19/squirtle-311952_960_720.png",
          hp: 120,
          attack: 40,
          defense: 50
        },
        {
          name: "ヒトカゲ",
          type: "ほのお",
          image: "https://cdn.pixabay.com/photo/2014/04/03/10/19/charmander-311953_960_720.png",
          hp: 80,
          attack: 60,
          defense: 20
        }
      ];
      
      // プレイヤーのポケモンをランダムに選ぶ
      var playerIndex = Math.floor(Math.random() * pokemonData.length);
      var playerPokemon = pokemonData[playerIndex];
      
      // CPUのポケモンをランダムに選ぶ
      var cpuIndex = Math.floor(Math.random() * pokemonData.length);
      var cpuPokemon = pokemonData[cpuIndex];
      
      // ゲーム画面の要素を取得
      var gameScreen = document.getElementById("game-screen");
      
      // ポケモンバトルを実行
      function battle() {
        // プレイヤーの攻撃力からCPUの防御力を引いてダメージを計算
        var playerDamage = playerPokemon.attack - cpuPokemon.defense;
        if (playerDamage < 0) {
          playerDamage = 0;
        }
        // CPUの攻撃力からプレイヤーの防御力を引いてダメージを計算
        var cpuDamage = cpuPokemon.attack - playerPokemon.defense;
        if (cpuDamage < 0) {
          cpuDamage = 0;
        }
        // ダメージを与える
        cpuPokemon.hp -= playerDamage;
        playerPokemon.hp -= cpuDamage;
        
        // ゲーム結果を表示
        if (playerPokemon.hp <= 0) {
          gameScreen.innerHTML = "<p>あなたの" + playerPokemon.name + "は倒れました！</p>";
        } else if (cpuPokemon.hp <= 0) {
          gameScreen.innerHTML = "<p>相手の" + cpuPokemon.name + "を倒しました！</p>";
        } else {
          // ゲームが続く場合は再度バトルを実行
          gameScreen.innerHTML = "<p>あなたの" + playerPokemon.name + "は" + cpuDamage + "のダメージを受けました！</p>";
          gameScreen.innerHTML += "<p>相手の" + cpuPokemon.name + "は" + playerDamage + "のダメージを受けました！</p>";
          gameScreen.innerHTML += "<button onclick='battle()'>次のターン</button>";
        }
      }
      
      // ゲームを開始
      gameScreen.innerHTML = "<p>あなたは" + playerPokemon.name + "を選びました！</p>";
      gameScreen.innerHTML += "<p>相手は" + cpuPokemon.name + "です！</p>";
      gameScreen.innerHTML += "<button onclick='battle()'>バトル開始！</button>";
      
    </script>
  </body>
</html>
```

このコードをブラウザで開くと、以下のようなRPGゲームが遊べます。

![Pocket Monster RPG](https://i.imgur.com/KdSzv2V.png)

プレイヤーは、最初にランダムに選ばれたポケモンを使用して、相手のポケモンとバトルします。

バトルでは、攻撃力や防御力を計算して、ダメージを与えます。相手のポケモンを倒したら勝ちです。

スマホで遊ぶ場合も、画面サイズに合わせて自動的にレイアウトが調整されます。また、タップやスワイプなどスマホで操作しやすいように、ボタンやテキスト入力欄などのUIも適切に設定されています。

以上が、1枚のhtmlファイルで実装した、スマホ用RPGゲーム「Pocket Monster RPG」の紹介です。