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

No:25142

125

←

Prev Next

→

Turn based card battle game Where you must play ..ALL
Developer Dooz studio｜Date and time 23/11/18 7:47:56
Build time 104.453 sec｜Game capacity 3.155KB｜

Script

Sure! Here's a basic implementation of a turn-based card battle game in a single HTML file:

Card Battle Game

Player HP: 100

Opponent HP: 100

To play the game, simply copy the above code into a text editor and save it as a `.html` file. Open the saved file in a web browser, and you'll see the card battle game interface. Click the "Play Attack Card" or "Play Spell Card" buttons to attack or cast a spell respectively. The game will simulate the opponent's turn and update the HP values on the screen. Once either the player or the opponent reaches 0 HP, the game will end with a message and an option to restart.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a basic implementation of a turn-based card battle game in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Card Battle Game</title>
  <style>
    body {
      text-align: center;
    }
    #battlefield {
      margin: 50px auto;
      width: 400px;
      height: 200px;
      border: 1px solid black;
      padding: 20px;
    }
    button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Card Battle Game</h1>
  <div id="battlefield">
    <h2 id="player-hp">Player HP: 100</h2>
    <h2 id="opponent-hp">Opponent HP: 100</h2>
    <button id="attack-card" onclick="playCard('attack')">Play Attack Card</button>
    <button id="spell-card" onclick="playCard('spell')">Play Spell Card</button>
  </div>

// Function to play a card
    function playCard(cardType) {
      // Generate a random damage between 5 to 15
      const damage = Math.floor(Math.random() * 11) + 5;

// Update HP based on the card type played
      if (cardType === 'attack') {
        opponentHP -= damage;
      } else if (cardType === 'spell') {
        playerHP += damage;
      }

// Check if anyone has lost
      if (playerHP <= 0 || opponentHP <= 0) {
        endGame();
      } else {
        updateUI();
        opponentTurn();
      }
    }

// Function to simulate opponent's turn
    function opponentTurn() {
      // Generate a random card type (attack or spell) for the opponent to play
      const cardType = Math.random() < 0.5 ? 'attack' : 'spell';

// Generate a random damage between 5 to 15
      const damage = Math.floor(Math.random() * 11) + 5;

// Update HP based on the card type played by the opponent
      if (cardType === 'attack') {
        playerHP -= damage;
      } else if (cardType === 'spell') {
        opponentHP += damage;
      }

// Check if anyone has lost
      if (playerHP <= 0 || opponentHP <= 0) {
        endGame();
      } else {
        updateUI();
      }
    }

// Function to update the UI with current HP values
    function updateUI() {
      document.getElementById('player-hp').textContent = `Player HP: ${playerHP}`;
      document.getElementById('opponent-hp').textContent = `Opponent HP: ${opponentHP}`;
    }

// Function to end the game
    function endGame() {
      if (playerHP <= 0) {
        alert('You lost the game!');
      } else {
        alert('You won the game!');
      }
      // Reload the page to play again
      location.reload();
    }

// Initial UI update
    updateUI();
  </script>
</body>
</html>
```