I want to create a battle type game

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Battle Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    #battle-container {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }

    #player, #enemy {
      border: 1px solid #000;
      padding: 10px;
      width: 150px;
      margin-bottom: 10px;
    }

    #result {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h1>Battle Game</h1>

  <div id="battle-container">
    <div id="player">
      <h2>Player</h2>
      <p>Health: <span id="player-health">100</span></p>
      <button onclick="attack('player')">Attack</button>
    </div>

    <div id="enemy">
      <h2>Enemy</h2>
      <p>Health: <span id="enemy-health">100</span></p>
    </div>
  </div>

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

  <script>
    function attack(attacker) {
      var playerHealth = document.getElementById('player-health');
      var enemyHealth = document.getElementById('enemy-health');
      var result = document.getElementById('result');

      var playerDamage = Math.floor(Math.random() * 10) + 1;
      var enemyDamage = Math.floor(Math.random() * 10) + 1;

      if (attacker === 'player') {
        enemyHealth.innerText = Math.max(0, parseInt(enemyHealth.innerText) - playerDamage);
        result.innerText = `Player attacked! Enemy took ${playerDamage} damage.`;
        setTimeout(enemyAttack, 1000);
      } else {
        playerHealth.innerText = Math.max(0, parseInt(playerHealth.innerText) - enemyDamage);
        result.innerText = `Enemy attacked! Player took ${enemyDamage} damage.`;

        if (parseInt(playerHealth.innerText) <= 0) {
          result.innerText = 'Game over! You lost.';
          document.querySelector('button').disabled = true;
        }
      }
    }

    function enemyAttack() {
      attack('enemy');

      if (parseInt(document.getElementById('enemy-health').innerText) <= 0) {
        document.getElementById('result').innerText = 'Congratulations! You won!';
        document.querySelector('button').disabled = true;
      }
    }
  </script>

</body>
</html>

strong text

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!