Calculator Tools Calculator Tools
Create

Damage Calculator

Nov 18, 2023

About this app

A calculator for computing damage in a battle scenario based on various parameters.

Damage Calculator 🗡️ Damage Calculator 🛡️ Level: Attack Power: Defense Power: Move Power: Attack Modifier Level (-5 to 5): Defense Modifier Level (-5 to 5): Effectiveness: Normal Super Effective Not Very Effective Critical Hit: Target HP: Calculate Damage

Related apps

Put this on your site

Source

                    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Damage Calculator</title>
<meta name="description" content="A calculator for computing damage in a battle scenario based on various parameters.">
<meta name="keywords" content="damage calculator, attack, defense, battle, game">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Press Start 2P', cursive;
background: linear-gradient(45deg, #6dd5ed, #2193b0);
color: #333;
text-align: center;
padding: 20px;
}
#main-container {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
max-width: 500px;
margin: auto;
}
.form-group {
margin-bottom: 1rem;
}
.form-control {
width: 100%;
padding: .375rem .75rem;
font-size: .8rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.btn {
color: #fff;
background-color: #007bff;
border-color: #007bff;
padding: .375rem .75rem;
font-size: .8rem;
line-height: 1.5;
border-radius: .25rem;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f7f7f7;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="main-container">
<h1>🗡️ Damage Calculator 🛡️</h1>
<div>
<div class="form-group">
<label for="level">Level:</label>
<input type="number" id="level" class="form-control" value="50">
</div>
<div class="form-group">
<label for="attack">Attack Power:</label>
<input type="number" id="attack" class="form-control" value="100">
</div>
<div class="form-group">
<label for="defense">Defense Power:</label>
<input type="number" id="defense" class="form-control" value="100">
</div>
<div class="form-group">
<label for="movePower">Move Power:</label>
<input type="number" id="movePower" class="form-control" value="80">
</div>
<div class="form-group">
<label for="attackMod">Attack Modifier Level (-5 to 5):</label>
<input type="number" id="attackMod" class="form-control" value="0" min="-5" max="5">
</div>
<div class="form-group">
<label for="defenseMod">Defense Modifier Level (-5 to 5):</label>
<input type="number" id="defenseMod" class="form-control" value="0" min="-5" max="5">
</div>
<div class="form-group">
<label for="effectiveHit">Effectiveness:</label>
<select id="effectiveHit" class="form-control">
<option value="1">Normal</option>
<option value="1.2">Super Effective</option>
<option value="0.75">Not Very Effective</option>
</select>
</div>
<div class="form-group">
<label for="criticalHit">Critical Hit:</label>
<input type="checkbox" id="criticalHit">
</div>
<div class="form-group">
<label for="targetHp">Target HP:</label>
<input type="number" id="targetHp" class="form-control" value="200">
</div>
<button id="calculate" class="btn">Calculate Damage</button>
</div>
<div id="result" class="output"></div>
</div>
<script>
function calculateDamage() {
const level = parseInt(document.getElementById('level').value);
const attack = parseInt(document.getElementById('attack').value);
const defense = parseInt(document.getElementById('defense').value);
const movePower = parseInt(document.getElementById('movePower').value);
const attackMod = parseInt(document.getElementById('attackMod').value);
const defenseMod = parseInt(document.getElementById('defenseMod').value);
const effectiveHit = parseFloat(document.getElementById('effectiveHit').value);
const criticalHit = document.getElementById('criticalHit').checked;
const targetHp = parseInt(document.getElementById('targetHp').value);

// Modifiers handling
const attackMultiplier = attackMod >= 0 ? 1 + 0.2 * attackMod : 1 / (1 - 0.2 * attackMod);
const defenseMultiplier = defenseMod >= 0 ? 1 + 0.2 * defenseMod : 1 / (1 - 0.2 * defenseMod);
const defenseValue = criticalHit ? defense / 2 : defense;

// Damage equation
let damage = (((2 * level + 10) / 250) * (attack / (defenseValue * defenseMultiplier)) * (movePower + 2) * attackMultiplier * effectiveHit);
damage = Math.max(0, Math.round(damage)); // Round and ensure it's not negative

// Damage variance roll (+-15%)
const variance = 1 + (Math.random() * 0.3 - 0.15);
damage = Math.max(1, Math.round(damage * variance));

// Calculate the number of hits required to KO
const hitsToKO = Math.ceil(targetHp / damage);

// Display the result
document.getElementById('result').innerHTML = `
<p>Damage Dealt: ${damage}</p>
<p>Hits to KO: ${hitsToKO}</p>
`;
}

document.getElementById('calculate').addEventListener('click', calculateDamage);
</script>
</body>
</html>