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);

});

<title>A Lenda do Último Andarilho</title>

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>