Rpg

[pd470101-jpg]

// --- Definições do Jogo --- const player = { name: "Andarilho", level: 1, maxHP: 100, currentHP: 100, attack: 10, defense: 5, isDefending: false, };

let enemy = { name: "Gnomo Bandido", maxHP: 30, currentHP: 30, attack: 6, defense: 2, };

let isCombatActive = true;

// --- Elementos do DOM --- const log = document.getElementById('text-log'); const promptText = document.getElementById('current-prompt'); const btnAttack = document.getElementById('action-attack'); const btnDefend = document.getElementById('action-defend'); const btnNext = document.getElementById('action-next');

// Barras de Status const playerHPBar = document.getElementById('player-health-bar'); const playerHPText = document.getElementById('player-hp-text'); const enemyHPContainer = document.getElementById('enemy-hp-container'); const enemyHPLabel = document.getElementById('enemy-hp-label');

// --- Funções de Atualização da UI ---

/**

• Adiciona uma nova linha de texto ao log de forma estilizada.
• @param {string} text - O texto a ser adicionado. */ function appendToLog(text) { const p = document.createElement('p'); p.textContent = text; // Remove o efeito 'new-text' do texto anterior const lastP = log.querySelector('.new-text'); if (lastP) { lastP.classList.remove('new-text'); } // Adiciona o efeito de máquina de escrever ao novo texto p.classList.add('new-text'); log.appendChild(p); // Rola para o final log.scrollTop = log.scrollHeight; }

/**

• Atualiza todas as barras de status e textos. */ function updateStatus() { // 1. Jogador HP const playerHealthPercent = (player.currentHP / player.maxHP) * 100; playerHPBar.style.width = ${playerHealthPercent}%; playerHPText.textContent = ${player.currentHP}/${player.maxHP};

  // 2. Inimigo HP (usando o estilo RPGUI progress) const enemyHealthPercent = (enemy.currentHP / enemy.maxHP) * 100; enemyHPContainer.style.setProperty('--progress-value', ${enemyHealthPercent}%); enemyHPLabel.textContent = ${enemy.currentHP}/${enemy.maxHP} HP (${enemy.name});

  // 3. Status superior document.getElementById('player-level').textContent = player.level; document.getElementById('player-attack').textContent = player.attack; document.getElementById('player-defense').textContent = player.defense; }

// --- Funções de Combate ---

function enemyTurn() { if (!isCombatActive) return;

const damageTaken = Math.max(0, enemy.attack - (player.isDefending ? player.defense * 2 : player.defense));
player.currentHP = Math.max(0, player.currentHP - damageTaken);

if (player.isDefending) {
    appendToLog(`O ${enemy.name} ataca! Sua defesa o protege, mas você leva ${damageTaken} de dano.`);
} else {
    appendToLog(`O ${enemy.name} ataca e causa ${damageTaken} de dano.`);
}

player.isDefending = false; // A defesa dura apenas um turno

updateStatus();

if (player.currentHP === 0) {
    endGame(false);
} else {
    promptText.textContent = "O que você fará no próximo turno?";
    enableCombatButtons();
}

}

function playerAttack() { // 1. Dano do Jogador const damageDealt = Math.max(1, player.attack - enemy.defense); // Garante dano mínimo de 1 enemy.currentHP = Math.max(0, enemy.currentHP - damageDealt);

appendToLog(`Você ataca o ${enemy.name} e causa ${damageDealt} de dano.`);

updateStatus();
disableCombatButtons();

// 2. Verifica vitória
if (enemy.currentHP === 0) {
    endCombat(true);
} else {
    // 3. Turno do inimigo após 1.5s
    setTimeout(enemyTurn, 1500); 
}

}

function playerDefend() { player.isDefending = true; appendToLog("Você se prepara e aumenta sua defesa!"); disableCombatButtons();

// Turno do inimigo após 1.5s
setTimeout(enemyTurn, 1500); 

}

// --- Funções de Controle do Jogo ---

function disableCombatButtons() { btnAttack.disabled = true; btnDefend.disabled = true; btnAttack.style.opacity = 0.5; btnDefend.style.opacity = 0.5; }

function enableCombatButtons() { btnAttack.disabled = false; btnDefend.disabled = false; btnAttack.style.opacity = 1; btnDefend.style.opacity = 1; }

function endCombat(isVictory) { isCombatActive = false; disableCombatButtons(); enemyHPContainer.style.display = 'none';

if (isVictory) {
    player.level++;
    player.attack += 2;
    player.defense += 1;
    player.maxHP += 10;
    player.currentHP = Math.min(player.maxHP, player.currentHP + 15); // Cura parcial e aumenta o limite
    
    appendToLog(`\n*** VITÓRIA! ***`);
    appendToLog(`Você derrotou o ${enemy.name}! Você sobe para o Nível ${player.level} e se sente mais forte.`);
    promptText.textContent = "Seu caminho está livre. Pressione AVANÇAR para continuar.";
    btnNext.style.display = 'inline-block';
    updateStatus();

} else {
    endGame(false);
}

}

function endGame(isWon) { isCombatActive = false; disableCombatButtons(); btnNext.style.display = 'none';

if (isWon) {
    appendToLog("🎉 Você alcançou o final do nosso pequeno demo! Parabéns, Andarilho!");
    promptText.textContent = "FIM DE JOGO: VITÓRIA. Obrigado por jogar!";
} else {
    appendToLog("💀 Você caiu na batalha. A floresta escura te reclama.");
    promptText.textContent = "FIM DE JOGO: DERROTA. Atualize para tentar novamente.";
}

}

function nextEncounter() { // Lógica simples para o próximo evento/inimigo if (player.level === 2) { // Define o próximo inimigo enemy = { name: "Grande Lobo Faminto", maxHP: 50, currentHP: 50, attack: 12, defense: 4, };

    // Configura a UI para o novo combate
    isCombatActive = true;
    enemyHPContainer.style.display = 'block';
    btnNext.style.display = 'none';
    
    appendToLog(`\nVocê se aprofunda na floresta. Um ${enemy.name} rosnando aparece bloqueando o caminho!`);
    promptText.textContent = "Um novo inimigo o aguarda. O que você fará?";
    enableCombatButtons();
    updateStatus(); // Atualiza a barra do novo inimigo
} else {
    endGame(true); // Fim da demonstração
}

}

// --- Inicialização e Event Listeners ---

document.addEventListener('DOMContentLoaded', () => { updateStatus(); // Inicializa as barras e stats enemyHPContainer.style.setProperty('--progress-value', '100%'); // Inicializa a barra RPGUI

btnAttack.addEventListener('click', playerAttack);
btnDefend.addEventListener('click', playerDefend);
btnNext.addEventListener('click', nextEncounter);

});

A Lenda do Último Andarilho

Um jogo de texto e escolhas.

    <div class="status-bar">
        <div class="stat">
            <span id="player-name" class="stat-value">Andarilho</span>
            <p class="stat-label">Nome</p>
        </div>
        <div class="stat">
            <span id="player-level" class="stat-value">1</span>
            <p class="stat-label">Nível</p>
        </div>
        <div class="stat">
            <span id="player-attack" class="stat-value">10</span>
            <p class="stat-label">Ataque</p>
        </div>
        <div class="stat">
            <span id="player-defense" class="stat-value">5</span>
            <p class="stat-label">Defesa</p>
        </div>
    </div>

    <div id="text-log">
        <p class="new-text">Você acorda em uma floresta escura, a memória turva. À sua frente, um Gnomo Bandido fareja o ar...</p>
    </div>

    <div class="rpgui-content">
        <div id="action-area" class="rpgui-container framed">
            <p id="current-prompt">O que você fará?</p>
            <button id="action-attack" class="rpgui-button action-button">Ataque</button>
            <button id="action-defend" class="rpgui-button action-button">Defesa</button>
            <button id="action-next" class="rpgui-button action-button" style="display:none;">Avançar</button>
        </div>
        
        <div id="enemy-hp-container" class="rpgui-progress" data-value="100" data-max="100">
            <div class="rpgui-progress-label" id="enemy-hp-label">100/100 HP (Gnomo Bandido)</div>
        </div>

        <p>Sua Vida:</p>
        <div class="health-bar-container">
            <div id="player-health-bar" class="health-bar" style="width: 100%;"></div>
        </div>
        <span id="player-hp-text">100/100</span>

    </div>
</div>

<script src="script.js"></script>

Bem-vindo ao reino! O que deseja fazer?

Ataque Defesa

<div class="rpgui-progress" data-value="75" data-max="100">
    <div class="rpgui-progress-label">75/100 HP</div>
</div>