<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gladiator Battle Simulation | GladiatorsBattle.com</title>
  <meta name="description" content="Experience an interactive gladiator battle simulation with real-time combat controls! Choose actions for each gladiator and view dynamic animations. Play now on GladiatorsBattle.com">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to the Gladiator Battle Simulation!</h1>
    <p>Engage in an epic battle simulation, where you control two gladiators with attack, defend, and dodge actions. Brought to you by <a href="https://gladiatorsbattle.com" target="_blank">GladiatorsBattle.com</a> – immerse yourself in the ancient world of the arena!</p>
  </header>

  <div class="battlefield">
    <!-- Gladiator A -->
    <div class="gladiator" id="gladiatorA">
      <img src="https://i.ibb.co/jDfphjc/DALL-E-2024-11-13-18-39-50-Create-an-image-of-a-Roman-gladiator-in-a-dramatic-battle-stance-removebg.png" alt="Gladiator A">
      <div class="health-bar"><span class="health" id="healthA">100</span> HP</div>
      <div class="controls">
        <button onclick="attack('A')">Attack</button>
        <button onclick="defend('A')">Defend</button>
        <button onclick="dodge('A')">Dodge</button>
      </div>
    </div>

    <!-- Gladiator B -->
    <div class="gladiator" id="gladiatorB">
      <img src="https://i.ibb.co/SB685DB/DALL-E-2024-11-13-18-39-30-Create-an-image-of-a-Roman-gladiator-in-a-defensive-stance-removebg-previ.png" alt="Gladiator B">
      <div class="health-bar"><span class="health" id="healthB">100</span> HP</div>
      <div class="controls">
        <button onclick="attack('B')">Attack</button>
        <button onclick="defend('B')">Defend</button>
        <button onclick="dodge('B')">Dodge</button>
      </div>
    </div>
  </div>

  <!-- Battle status, control buttons, and combat log -->
  <div class="battle-controls">
    <p id="battle-status">Press "Start Battle" to begin</p>
    <button onclick="startBattle()">Start Battle</button>
    <button onclick="resetBattle()">Reset</button>

    <!-- Combat Log Section -->
    <div class="combat-log">
      <h3>Combat Log</h3>
      <ul id="log-list"></ul>
    </div>
  </div>

  <footer>
    <p>Experience more gladiator battles and strategy games on <a href="https://gladiatorsbattle.com" target="_blank">GladiatorsBattle.com</a>!</p>
  </footer>

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

/* Global Styles */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #1a1a2e, #0f0f1e);
  font-family: Arial, sans-serif;
  color: #f1f1f1;
  overflow: hidden;
}

/* Header styling */
header {
  text-align: center;
  padding: 20px;
  color: #f9c74f;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  margin-top: 20px;
}

header h1 {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0px 0px 10px rgba(255, 215, 0, 0.7), 0px 0px 15px rgba(255, 255, 255, 0.5);
  color: #ffd700;
  letter-spacing: 1.5px;
}

header p {
  font-size: 18px;
  color: #e0e0e0;
  margin-top: 10px;
  line-height: 1.6;
}

header a {
  color: #f9844a;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, text-shadow 0.3s;
}

header a:hover {
  color: #ffd700;
  text-shadow: 0px 0px 8px rgba(255, 215, 0, 0.5), 0px 0px 12px rgba(255, 255, 0, 0.5);
}

/* Battlefield layout */
.battlefield {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
  padding: 20px;
  gap: 50px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.2);
}

.gladiator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

img {
  width: 180px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0px 5px 10px rgba(255, 215, 0, 0.5));
}

.health-bar {
  width: 100%;
  background-color: #222;
  padding: 8px;
  border-radius: 8px;
  color: #f1f1f1;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 0, 0, 0.4);
}

/* Controls styling */
.controls button {
  background: #ff5757;
  color: white;
  border: none;
  padding: 10px;
  margin: 3px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s ease;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

.controls button:hover {
  background: #ff4040;
  transform: scale(1.1);
  box-shadow: 0px 5px 15px rgba(255, 64, 64, 0.5);
}

.controls button:active {
  transform: scale(0.95);
  box-shadow: 0px 2px 5px rgba(255, 64, 64, 0.3);
}

/* Combat log section */
.battle-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 300px;
}

#battle-status {
  color: #f1f1f1;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  text-align: center;
}

.battle-controls button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.battle-controls button:hover {
  background: #45a049;
}

.combat-log {
  background-color: #1f1f2f;
  padding: 15px;
  border-radius: 10px;
  overflow-y: auto;
  max-height: 200px;
  width: 100%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.combat-log h3 {
  color: #f9c74f;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

#log-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
  color: #fff;
}

#log-list li {
  margin-bottom: 5px;
}

/* Footer styling */
footer {
  text-align: center;
  padding: 20px;
  color: #f1f1f1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: 100%;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
  margin-top: 20px;
}

footer a {
  color: #ffd700;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

footer a:hover {
  color: #f9844a;
}

let healthA = 100;
let healthB = 100;
let isBattleActive = false;

function startBattle() {
  healthA = 100;
  healthB = 100;
  isBattleActive = true;
  updateHealthDisplay();
  document.getElementById('battle-status').innerText = 'Battle Started!';
  addToCombatLog('The battle has begun!');

  // Enable buttons after battle starts
  document.querySelectorAll('.controls button').forEach(button => {
    button.disabled = false;
  });
}

function attack(gladiator) {
  if (!isBattleActive) return;

  const target = gladiator === 'A' ? 'B' : 'A';
  const damage = Math.floor(Math.random() * 20) + 5;

  document.getElementById(`gladiator${gladiator}`).querySelector('img').style.animation = 'attackAnimation 0.5s';

  setTimeout(() => {
    applyDamage(target, damage);
    addToCombatLog(`Gladiator ${gladiator} attacks Gladiator ${target} for ${damage} damage.`);
    checkForWinner();
  }, 300);
}

function defend(gladiator) {
  if (!isBattleActive) return;

  document.getElementById(`gladiator${gladiator}`).querySelector('img').style.transform = 'scale(1.1)';
  setTimeout(() => {
    document.getElementById(`gladiator${gladiator}`).querySelector('img').style.transform = 'scale(1)';
  }, 500);

  addToCombatLog(`Gladiator ${gladiator} defends.`);
}

function dodge(gladiator) {
  if (!isBattleActive) return;

  const gladiatorElement = document.getElementById(`gladiator${gladiator}`);
  gladiatorElement.querySelector('img').style.transform = 'translateX(-10px)';
  setTimeout(() => {
    gladiatorElement.querySelector('img').style.transform = 'translateX(10px)';
  }, 300);
  setTimeout(() => {
    gladiatorElement.querySelector('img').style.transform = 'translateX(0)';
  }, 600);

  addToCombatLog(`Gladiator ${gladiator} dodges.`);
}

function applyDamage(gladiator, damage) {
  if (gladiator === 'A') {
    healthA -= damage;
    healthA = Math.max(0, healthA);
    document.getElementById('healthA').innerText = healthA;
  } else {
    healthB -= damage;
    healthB = Math.max(0, healthB);
    document.getElementById('healthB').innerText = healthB;
  }

  const damageText = document.createElement('div');
  damageText.classList.add('damage-text');
  damageText.innerText = `-${damage}`;
  document.getElementById(`gladiator${gladiator}`).appendChild(damageText);

  setTimeout(() => {
    damageText.remove();
  }, 500);
}

function checkForWinner() {
  if (healthA <= 0 || healthB <= 0) {
    isBattleActive = false;
    const winner = healthA > 0 ? 'Gladiator A' : 'Gladiator B';
    document.getElementById('battle-status').innerText = `${winner} Wins!`;
    addToCombatLog(`${winner} is victorious!`);

    // Disable buttons after battle ends
    document.querySelectorAll('.controls button').forEach(button => {
      button.disabled = true;
    });
  }
}

function resetBattle() {
  isBattleActive = false;
  healthA = 100;
  healthB = 100;
  updateHealthDisplay();
  document.getElementById('battle-status').innerText = 'Press "Start Battle" to begin';
  document.getElementById('log-list').innerHTML = ''; // Clear combat log
  addToCombatLog('The battle has been reset.');

  // Reset animations and enable buttons
  document.querySelectorAll('.controls button').forEach(button => {
    button.disabled = false;
  });
  document.querySelectorAll('.gladiator img').forEach(img => {
    img.style.transform = 'scale(1)';
    img.style.animation = 'none';
  });
}

function updateHealthDisplay() {
  document.getElementById('healthA').innerText = healthA;
  document.getElementById('healthB').innerText = healthB;
}

function addToCombatLog(message) {
  const logList = document.getElementById('log-list');
  const logEntry = document.createElement('li');
  logEntry.textContent = message;
  logList.appendChild(logEntry);
  logList.scrollTop = logList.scrollHeight; // Auto-scroll to the latest log entry
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.