时间戳

首页 > 解决方案 > 计算 DnD 掷骰子应用的平均伤害

javascript - 计算 DnD 掷骰子应用的平均伤害

问题描述

我是 JS 新手（不到 20 小时），并且正在构建一个 Web 应用程序作为一种学习方式，可以像在 DnD 中一样掷骰子。它似乎工作正常，除了我不明白如何在每轮造成的伤害中增加致命一击。

如果您不熟悉，在 DnD 中，每次攻击都有机会根据临界百分比造成双倍伤害（骰子和奖金），我希望这能以每轮平均伤害表示。向您展示我到目前为止所做的工作可能会更容易，所以请看一下：

// Bonuses
const strenghBonus = document.querySelector('.strBonus');
const enchantmentBonus = document.querySelector('.enchBonus');
const otherBonus = document.querySelector('.otherBonus');
const totalDamageBonus = document.querySelector('.totalDamageBonus');

document.querySelectorAll('.bonus').forEach((item) => {
	item.addEventListener('click', calculateDamageBonus);
});

function calculateDamageBonus() {
	totalDamageBonus.value = Number(strenghBonus.value) + Number(enchantmentBonus.value) + Number(otherBonus.value);
}

// Rolls
const rollDamage = document.querySelector('.rollDamage');
const rollMinDamage = document.querySelector('.rollMinDamage');
const rollMaxDamage = document.querySelector('.rollMaxDamage');
const rollAverageDamage = document.querySelector('.rollAverageDamage');

// Totals
const totalDamage = document.querySelector('.totalDamage');
const minTotalDamage = document.querySelector('.minTotalDamage');
const maxTotalDamage = document.querySelector('.maxTotalDamage');
const averageTotalDamage = document.querySelector('.averageTotalDamage');
const minDamagePerRound = document.querySelector('.minDamagePerRound');
const maxDamagePerRound = document.querySelector('.maxDamagePerRound');
const averageDamagePerRound = document.querySelector('.averageDamagePerRound');

const criticalHitChance = document.querySelector('.criticalHit').value;

function rollDice() {
	let numberOfDice = document.querySelector('.numberOfDice').value;
	let numberOfSides = document.querySelector('.numberOfSides').value;
	let diceTotal = 0;
	let attacksPerRound = document.querySelector('.attacksPerRound').value;

	for (i = 1; i <= numberOfDice; i++) {
		diceTotal += Math.floor(Math.random() * numberOfSides + 1);
	}
	rollDamage.value = diceTotal;
	rollMinDamage.value = numberOfDice;
	rollMaxDamage.value = numberOfDice * numberOfSides;
	rollAverageDamage.value = (numberOfSides + 1) / 2 * numberOfDice / 10;

	totalDamage.value = diceTotal + Number(totalDamageBonus.value);
	minTotalDamage.value = Number(rollMinDamage.value) + Number(totalDamageBonus.value);
	maxTotalDamage.value = Number(rollMaxDamage.value) + Number(totalDamageBonus.value);
	averageTotalDamage.value = Number(rollAverageDamage.value) + Number(totalDamageBonus.value);

	minDamagePerRound.value = Number(minTotalDamage.value) * attacksPerRound;
	maxDamagePerRound.value = Number(maxTotalDamage.value) * attacksPerRound;
}

function resetForm() {
	document.getElementById('myForm').reset();
}
	
* {
	box-sizing: border-box;
}

.container {
	display: flex;
	width: 100%;
	height: 100%;
}

.column {
	flex: 1;
	color: white;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 20px;
}

.bonusesColumn {
	background-color: red;
}

.diceColumn {
	background-color: green;
}

.totalsColumn {
	background-color: blue;
}

.attribute {
	margin-top: 20px;
}

.dropDown {
	padding: 2px;
	width: 40%;
	height: 100%;
	margin: 2px;
}

input {
	padding: 2px;
	margin: 2px;
	width: 40%;
	height: 100%;
}

label {
	display: block;
}

.hitDice {
	justify-content: center;
	align-items: center;
	display: flex;
	margin: 5px 2px;
}

.hitDice p {
	margin: 15px 5px;
}

.buttonsAndDamage {
	margin: 10px;
}
<body>
 <form id="myForm">
  <div class="container">

    <div class="column bonusesColumn">
      
        <div class="attribute">
          <label>Strength Bonus</label>
          <input class="bonus strBonus" type="number" min="o" placeholder="0" value="0">
        </div>

        <div class="attribute">
          <label>Enchantment Bonus</label>
          <input class="bonus enchBonus" type="number" min="o" placeholder="0" value="0">
        </div>

        <div class="attribute">
          <label>Other Bonus</label>
          <input class="bonus otherBonus" type="number" min="o" placeholder="0"value="0" >
        </div>
         
        <div class="attribute">
          <label>Total Damage Bonus </label>
          <input class="totalDamageBonus" type="number" min="o" placeholder="0"value="0" readonly>
        </div>

        <div class="attribute">
          <label>Attacks Per Round</label>
          <select class="attacksPerRound dropDown" value="0" type="number">
            <option value="1">1</option>
            <option value="1.5">1.5</option>
            <option value="2">2</option>
            <option value="2.5">2.5</option>
            <option value="3">3</option>
            <option value="3.5">3.5</option>
            <option value="4">4</option>
            <option value="4.5">4.5</option>
            <option value="5">5</option>
          </select>
        </div>

        <div class="attribute">
          <label>Critical Hit Roll</label>
          <select class="criticalHit dropDown" value="0" type="number">
            <option type="number" value="1">1</option>
            <option type="number" value="0.95">2</option>
            <option type="number" value="0.9">3</option>
            <option type="number" value="0.85">4</option>
            <option type="number" value="0.8">5</option>
            <option type="number" value="0.75">6</option>
            <option type="number" value="0.7">7</option>
            <option type="number" value="0.65">8</option>
            <option type="number" value="0.6">9</option>
            <option type="number" value="0.55">10</option>
            <option type="number" value="0.5">11</option>
            <option type="number" value="0.45">12</option>
            <option type="number" value="0.40">13</option>
            <option type="number" value="0.35">14</option>
            <option type="number" value="0.30">15</option>
            <option type="number" value="0.25">16</option>
            <option type="number" value="0.20">17</option>
            <option type="number" value="0.15">18</option>
            <option type="number" value="0.1">19</option>
            <option type="number" selected="selected" value="0.05">20</option>
          </select>
        </div>
    </div>
  
    

    <div class="column diceColumn">
      <div class="hitDice">
        <input class="dice numberOfDice" type="number" min="0" placeholder="0" value="0">
        <p>D</p>
        <input class="dice numberOfSides" type="number" min="0" placeholder="0" value="0">
      </div>

      <div class="buttonsAndDamage">
        <div>
          <button type="button" onclick="rollDice()">ROLL</button>
          <button type="button" onclick="resetForm()">RESET</button>
        </div>

      
        <div class="attribute">
          <label>Damage</label>
          <input class="rollDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

       
        <div class="attribute">
          <label>Minimum Damage</label>
          <input class="rollMinDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>
        
        <div class="attribute">
          <label>Maximum Damage</label>
          <input class="rollMaxDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Average Damage</label>
          <input class="rollAverageDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

      </div>
    </div>
    

    <div class="column totalsColumn">
      
      
        <div class="attribute">
          <label>Total Damage</label>
          <input class="totalDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Minimum Total Damage</label>
          <input class="minTotalDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Maximum Total Damage</label>
          <input class="maxTotalDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Average Total Damage</label>
          <input class="averageTotalDamage" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Minimum Damage Per Round</label>
          <input class="minDamagePerRound" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Maximum Damage Per Round</label>
          <input class="maxDamagePerRound" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

        <div class="attribute">
          <label>Average Damage Per Round</label>
          <input class="averageDamagePerRound" type="number" min="0" placeholder="0" value="0" readonly>
        </div>

      
    </div>

  </div>

</form>
  <script type="text/javascript" src="index.js"></script>
</body>

我在另一个论坛上问了这个问题，但我得到的答案，虽然非常感谢，但完全超出了我的想象。 https://rpg.stackexchange.com/questions/170602/what-is-the-formula-for-damage-per-round/170604#170604

请帮我解决这个问题，以及是否还有其他需要更改/可以改进的部分。

谢谢

标签： javascript

解决方案

n 面骰子的平均掷骰数为 (n+1)/2。所以，如果你有 4d4+1d12+6，平均掷骰数是4*(2.5)+(6.5)+6 = 22.5

最低卷：4+1+6 = 11

最高卷：16+12+6=34

推荐阅读