好きな写真を使ったバトルゲーム's game

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

No:27842

←

Prev Next

→

好きな写真を使ったバトルゲーム
Developer User13884｜Date and time 23/12/9 15:45:02
Build time 27.138 sec｜Game capacity 3.406KB｜

Script

了解です。以下に、好きな写真を使ったバトルゲームの実装例を示します。

上記のコードは、プレイヤーと敵の画像が表示され、攻撃ボタンと回復ボタンがクリックできるようになっています。プレイヤーと敵のHPが表示され、攻撃や回復をすることで相手にダメージを与えることができます。どちらかのHPが0になると、勝敗が表示され、ボタンが無効化されます。注意点として、`emozi_all/player.png`と`emozi_all/enemy.png`の部分は実際の画像のパスに変更してください。また、勝敗時の画像は、`emozi_all/dead.png`と`emozi_all/dead.png`にそれぞれ変更してください。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、好きな写真を使ったバトルゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトルゲーム</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2;
  }
  .battle {
    text-align: center;
  }
  .battle img {
    width: 100px;
    height: 100px;
  }
  .button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .button button {
    font-size: 20px;
    padding: 10px 20px;
    margin: 0 10px;
  }
  .message {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: blue;
  }
</style>
</head>
<body>
<div class="battle">
  <img id="player" src="path/to/player.png" alt="プレイヤー">
  <img id="enemy" src="path/to/enemy.png" alt="敵">
  <div class="button">
    <button onclick="attack()">攻撃</button>
    <button onclick="heal()">回復</button>
  </div>
  <p class="message"></p>
</div>

function attack() {
    const playerDamage = Math.floor(Math.random() * 10) + 1;
    const enemyDamage = Math.floor(Math.random() * 10) + 1;
    enemyHp -= playerDamage;
    playerHp -= enemyDamage;
    refresh();

if (playerHp <= 0) {
      message.textContent = "あなたの負けです";
      disableButtons();
    } else if (enemyHp <= 0) {
      message.textContent = "あなたの勝ちです";
      disableButtons();
    }
  }

function heal() {
    const healAmount = Math.floor(Math.random() * 10) + 1;
    playerHp += healAmount;
    playerHp = Math.min(playerHp, 100);
    refresh();

const enemyDamage = Math.floor(Math.random() * 10) + 1;
    playerHp -= enemyDamage;
    refresh();

function refresh() {
    player.style.opacity = playerHp > 0 ? 1 : 0.5;
    player.style.filter = playerHp > 0 ? 'none' : 'grayscale(1)';
    player.alt = playerHp + "/100";
    enemy.alt = enemyHp + "/100";
    message.textContent = "";

if (playerHp <= 0) {
      player.src = "path/to/player_dead.png";
    }
    if (enemyHp <= 0) {
      enemy.src = "path/to/enemy_dead.png";
    }
  }

function disableButtons() {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => button.disabled = true);
  }
</script>
</body>
</html>
```

上記のコードは、プレイヤーと敵の画像が表示され、攻撃ボタンと回復ボタンがクリックできるようになっています。プレイヤーと敵のHPが表示され、攻撃や回復をすることで相手にダメージを与えることができます。どちらかのHPが0になると、勝敗が表示され、ボタンが無効化されます。

注意点として、`path/to/player.png`と`path/to/enemy.png`の部分は実際の画像のパスに変更してください。また、勝敗時の画像は、`path/to/player_dead.png`と`path/to/enemy_dead.png`にそれぞれ変更してください。