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

No:9097

199

Anomalocaris vs. trilobites
Developer User4246｜Date and time 23/7/21 4:54:58
Build time 33.377 sec｜Game capacity 2.714KB｜

了解です。以下に「アノマロカリスvs三葉虫」というゲームの一部を実装したHTMLファイルを示します。

アノマロカリス vs 三葉虫

🦞

🐜

このプログラムでは、「アノマロカリス(vs)三葉虫」というゲームを実装しています。HTMLファイル内にはアノマロカリスと三葉虫のそれぞれの体力を表示する要素、攻撃ボタン、メッセージを表示する要素が用意されています。JavaScriptで攻撃ボタンのクリックイベントに応じてアノマロカリスと三葉虫の体力を更新し、勝敗メッセージを表示しています。ただし、スマホ操作前提となっているため、実際のゲームとして遊ぶのではなく、ボタンをタップして攻撃を行うことができます。また、絵文字は表示されないかもしれませんが、代わりにアノマロカリスと三葉虫のアイコンが表示されるようになっています。なお、このプログラムは一例であり、ゲームをさらに拡張することも可能です。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

了解です。以下に「アノマロカリスvs三葉虫」というゲームの一部を実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アノマロカリスvs三葉虫</title>
  <style>
    body {
      background-color: #c4c4c4;
      text-align: center;
      font-size: 24px;
      padding-top: 50px;
    }

#anomalocaris {
      font-size: 100px;
    }

#trilobite {
      font-size: 80px;
    }

button {
      padding: 10px 20px;
      font-size: 28px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>アノマロカリス vs 三葉虫</h1>
  
  <p id="message"></p>
  
  <div id="anomalocaris">🦞</div>
  <div id="trilobite">🐜</div>
  
  <button onclick="attack()">攻撃！</button>
  
  <script>
    let anomalocaris = {
      hp: 100,
      attack: 10
    };
    
    let trilobite = {
      hp: 200,
      attack: 5
    };
    
    function attack() {
      trilobite.hp -= anomalocaris.attack;
      anomalocaris.hp -= trilobite.attack;
      
      if (anomalocaris.hp > 0 && trilobite.hp > 0) {
        document.getElementById("message").textContent = `アノマロカリスの体力: ${anomalocaris.hp}, 三葉虫の体力: ${trilobite.hp}`;
      } else if (anomalocaris.hp <= 0 && trilobite.hp > 0) {
        document.getElementById("message").textContent = "三葉虫の勝利！";
      } else if (anomalocaris.hp > 0 && trilobite.hp <= 0) {
        document.getElementById("message").textContent = "アノマロカリスの勝利！";
      } else {
        document.getElementById("message").textContent = "引き分け！";
      }
    }
  </script>
</body>
</html>
```

このプログラムでは、「アノマロカリス(vs)三葉虫」というゲームを実装しています。HTMLファイル内にはアノマロカリスと三葉虫のそれぞれの体力を表示する要素、攻撃ボタン、メッセージを表示する要素が用意されています。JavaScriptで攻撃ボタンのクリックイベントに応じてアノマロカリスと三葉虫の体力を更新し、勝敗メッセージを表示しています。

ただし、スマホ操作前提となっているため、実際のゲームとして遊ぶのではなく、ボタンをタップして攻撃を行うことができます。また、絵文字は表示されないかもしれませんが、代わりにアノマロカリスと三葉虫のアイコンが表示されるようになっています。

なお、このプログラムは一例であり、ゲームをさらに拡張することも可能です。