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

No:21341

Jogo de cartas onde as cartas tem ataque e defesa ..ALL
Developer User9781｜Date and time 23/10/15 2:20:37
Build time 146.419 sec｜Game capacity 5.448KB｜

Script

Jogo de Cartas

Ataque: Clique para jogar a carta

Sua Mão

Mão do Oponente

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo de Cartas</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        
        .card {
            width: 100px;
            height: 150px;
            background-color: lightblue;
            border: 2px solid blue;
            border-radius: 5px;
            margin: 10px;
            padding: 10px;
            float: left;
            cursor: pointer;
        }
        
        .card:hover {
            box-shadow: 0 0 5px blue;
        }
        
        #player {
            margin-bottom: 20px;
        }
        
        #opponent {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Jogo de Cartas</h1>
    <h2>Ataque: Clique para jogar a carta</h2>
    <div id="game-container">
        <div id="player">
            <h3>Sua Mão</h3>
            <div id="player-hand"></div>
        </div>
        <div id="opponent">
            <h3>Mão do Oponente</h3>
            <div id="opponent-hand"></div>
        </div>
    </div>
    
    <script>
        // Classe para representar uma carta
        class Card {
            constructor(name, attack, defense, cost) {
                this.name = name;
                this.attack = attack;
                this.defense = defense;
                this.cost = cost;
            }
        }
        
        // Baralho de cartas do jogador
        let playerDeck = [
            new Card("Carta 1", 10, 5, 3),
            new Card("Carta 2", 8, 6, 4),
            new Card("Carta 3", 6, 7, 3),
            new Card("Carta 4", 12, 2, 5)
        ];
        
        // Baralho de cartas do oponente
        let opponentDeck = [
            new Card("Carta 5", 7, 4, 2),
            new Card("Carta 6", 9, 3, 4),
            new Card("Carta 7", 5, 8, 3),
            new Card("Carta 8", 11, 1, 5)
        ];
        
        // Função para criar uma div de cartas
        function createCardElement(card, isPlayer) {
            let cardElement = document.createElement("div");
            cardElement.className = "card";
            
            if (isPlayer) {
                cardElement.addEventListener("click", function() {
                    if (card.cost > playerMana) {
                        alert("Você não possui mana suficiente para jogar essa carta!");
                    } else {
                        playerMana -= card.cost;
                        updateMana();
                        playCard(card, cardElement);
                    }
                });
            }
            
            let cardName = document.createElement("h4");
            cardName.textContent = card.name;
            
            let cardAttack = document.createElement("p");
            cardAttack.textContent = "Ataque: " + card.attack;
            
            let cardDefense = document.createElement("p");
            cardDefense.textContent = "Defesa: " + card.defense;
            
            let cardCost = document.createElement("p");
            cardCost.textContent = "Custo: " + card.cost;
            
            cardElement.appendChild(cardName);
            cardElement.appendChild(cardAttack);
            cardElement.appendChild(cardDefense);
            cardElement.appendChild(cardCost);
            
            return cardElement;
        }
        
        // Função para atualizar a visualização da mana
        function updateMana() {
            manaElement.textContent = "Mana: " + playerMana;
        }
        
        // Função para jogar uma carta
        function playCard(card, cardElement) {
            playerDeck.splice(playerDeck.indexOf(card), 1);
            playerHandElement.removeChild(cardElement);
            console.log("Você jogou a carta " + card.name);
            
            let opponentCard = opponentDeck[Math.floor(Math.random() * opponentDeck.length)];
            opponentDeck.splice(opponentDeck.indexOf(opponentCard), 1);
            console.log("O oponente jogou a carta " + opponentCard.name);
            
            // Lógica para determinar o vencedor
            if (card.attack > opponentCard.defense) {
                console.log("Você venceu!");
            } else if (card.attack < opponentCard.defense) {
                console.log("O oponente venceu!");
            } else {
                console.log("Empate!");
            }
        }
        
        let playerMana = 10; // Mana inicial do jogador
        
        let gameContainer = document.getElementById("game-container");
        let playerHandElement = document.getElementById("player-hand");
        let opponentHandElement = document.getElementById("opponent-hand");
        let manaElement = document.createElement("h3");
        updateMana();
        
        playerDeck.forEach(function(card) {
            let cardElement = createCardElement(card, true);
            playerHandElement.appendChild(cardElement);
        });
        
        opponentDeck.forEach(function(card) {
            let cardElement = createCardElement(card, false);
            opponentHandElement.appendChild(cardElement);
        });
        
        gameContainer.appendChild(manaElement);
    </script>
</body>
</html>