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

No:15880

Faz um jogo de batalha cartas de monstros com cart..ALL
Developer User6970｜Date and time 23/9/13 5:43:43
Build time 36.366 sec｜Game capacity 4.701KB｜

Script

Batalha de Cartas de Monstros

Neste exemplo, criei um jogo de batalha de cartas de monstros com cartas que possuem armas e efeitos. O jogo é implementado em um único arquivo HTML com JavaScript. As cartas dos jogadores (Player e Enemy) são exibidas na tela, com seus respectivos nomes, imagens, armas e efeitos. O jogador inicia a batalha ao clicar no botão "Iniciar Batalha". O resultado da batalha é exibido na tela com base no cálculo de dano das armas. Tanto as cartas como as informações são apresentadas usando elementos HTML e estilizadas com CSS.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Jogo de Batalha de Cartas de Monstros</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }

.container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }

.card {
        border: 2px solid #000;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 10px;
        background-color: #f0f0f0;
      }

.button {
        display: inline-block;
        padding: 10px;
        margin-top: 10px;
        border: none;
        border-radius: 5px;
        background-color: #333;
        color: #fff;
        cursor: pointer;
      }

#player-card,
      #enemy-card {
        display: none;
      }

#battle-result {
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Batalha de Cartas de Monstros</h1>
      <div id="player-card" class="card">
        <img id="player-image" src="player.png" alt="Player" width="100" height="100">
        <h2 id="player-name"></h2>
        <p id="player-weapon"></p>
        <p id="player-effect"></p>
      </div>
      <div id="enemy-card" class="card">
        <img id="enemy-image" src="enemy.png" alt="Enemy" width="100" height="100">
        <h2 id="enemy-name"></h2>
        <p id="enemy-weapon"></p>
        <p id="enemy-effect"></p>
      </div>
      <button id="start-battle" class="button">Iniciar Batalha</button>
      <p id="battle-result"></p>
    </div>

var enemy = {
        name: "Inimigo",
        weapon: "Machado",
        effect: "Dano +5",
      };

var playerCard = document.getElementById("player-card");
      var playerName = document.getElementById("player-name");
      var playerImage = document.getElementById("player-image");
      var playerWeapon = document.getElementById("player-weapon");
      var playerEffect = document.getElementById("player-effect");

var enemyCard = document.getElementById("enemy-card");
      var enemyName = document.getElementById("enemy-name");
      var enemyImage = document.getElementById("enemy-image");
      var enemyWeapon = document.getElementById("enemy-weapon");
      var enemyEffect = document.getElementById("enemy-effect");

var battleButton = document.getElementById("start-battle");
      var battleResult = document.getElementById("battle-result");

battleButton.addEventListener("click", startBattle);

function startBattle() {
        showCard(player, playerCard, playerName, playerImage, playerWeapon, playerEffect);
        showCard(enemy, enemyCard, enemyName, enemyImage, enemyWeapon, enemyEffect);
        var result = performBattle(player, enemy);
        battleResult.textContent = result;
      }

function showCard(card, cardElement, nameElement, imageElement, weaponElement, effectElement) {
        cardElement.style.display = "block";
        nameElement.textContent = card.name;
        imageElement.src = card.image;
        weaponElement.textContent = "Arma: " + card.weapon;
        effectElement.textContent = "Efeito: " + card.effect;
      }

function performBattle(player, enemy) {
        var playerDamage = calculateDamage(player.weapon);
        var enemyDamage = calculateDamage(enemy.weapon);

if (playerDamage > enemyDamage) {
          return player.name + " venceu a batalha!";
        } else if (playerDamage < enemyDamage) {
          return enemy.name + " venceu a batalha!";
        } else {
          return "Empate!";
        }
      }