Widget:PriceCalculator

实现详见价格计算器

<div style="display: flex;">选择猴子：<select id="towers"></select></div>
<div style="display: flex;">选择难度：<form id="difficulty" onchange=""><input type="radio" name="option" value="0.85" checked></input>简单<input type="radio" name="option" value="1"></input>普通<input type="radio" name="option" value="1.08"></input>困难</form><input type="checkbox" id="impoppable"></input>不可击破</div>
<div>升级路线：</div>
<span class="path-line" data-path="0"><span class="tier-square">1</span><span class="tier-square">2</span><span class="tier-square">3</span><span class="tier-square">4</span><span class="tier-square">5</span></span>
<span class="path-line" data-path="1"><span class="tier-square">1</span><span class="tier-square">2</span><span class="tier-square">3</span><span class="tier-square">4</span><span class="tier-square">5</span></span>
<span class="path-line" data-path="2"><span class="tier-square">1</span><span class="tier-square">2</span><span class="tier-square">3</span><span class="tier-square">4</span><span class="tier-square">5</span></span>
<table class="wikitable"><tr><th>购买价格</th><td style="width:100px" id="buyprice">-</td></tr><tr><th>出售价格</th><td id="sellprice">-</td></tr></table>
<style>
  .tier-square {
    background: #00CC00;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #000000;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 30px;
    color: #FFF;
  }

  .path-line {
    display: flex;
    margin-bottom: 10px;
  }
</style>
<script>
  "use strict";
  const allTowers = [
    'DartMonkey', 'BoomerangMonkey', 'BombShooter', 'TackShooter', 'IceMonkey', 'GlueGunner', 'Desperado',
    'SniperMonkey', 'MonkeySub', 'MonkeyBuccaneer', 'MonkeyAce', 'HeliPilot', 'MortarMonkey', 'DartlingGunner',
    'WizardMonkey', 'SuperMonkey', 'NinjaMonkey', 'Alchemist', 'Druid', 'Mermonkey',
    'BananaFarm', 'SpikeFactory', 'MonkeyVillage', 'EngineerMonkey', 'BeastHandler'
  ];

  const allTowersZH = [
    '飞镖猴', '回旋镖猴', '大炮', '图钉塔', '冰猴', '胶水炮手', '亡命猴',
    '狙击手猴', '猴子潜艇', '海盗猴', '王牌飞行员', '直升机飞行员', '迫击炮猴', '机枪猴',
    '法师猴', '超猴侠', '忍者猴', '炼金术士', '德鲁伊', '人鱼猴',
    '香蕉农场', '刺钉工厂', '猴子村', '工程师猴', '野兽之主'
  ];

  let paths = [0, 0, 0];

  (() => {
    let e = document.getElementById('towers');
    for (let i = 0; i < allTowers.length; i++) {
      let opt = document.createElement('option');
      opt.value = allTowers[i];
      opt.innerText = allTowersZH[i];
      e.appendChild(opt);
    }
  })();

  const prices = JSON.parse(document.getElementById('prices').innerText);

  const round = (num) => {
    let a = Math.trunc(num);
    let b = num - a;
    if (b !== 0.5) {
      return Math.round(num);
    }
    return a + (a % 2 === 0 ? 0 : 1);
  }

  const roundTo5 = (num) => {
    return round(num / 5) * 5
  }

  const calcBasePrice = (base, mul = 1) => {
    return roundTo5(base * mul);
  }

  const calcUpgradePrice = (base, mul = 1) => {
    return roundTo5(Math.floor(base * mul));
  }

  const getDifficultyMultiplier = () => {
    const base = parseFloat(document.querySelector('input[name="option"]:checked').value);
    const impoppable = document.getElementById('impoppable').checked;
    return base * (impoppable ? 10/9 : 1);
  }

  const validate = () => {
    return paths.toSorted()[0] === 0 && paths.toSorted()[1] < 3;
  }

  const calc = () => {
    if (!validate()) {
      document.getElementById('buyprice').innerHTML = '<span style="color:#F00">升级路径错误</span>';
      document.getElementById('sellprice').innerHTML = '<span style="color:#F00">升级路径错误</span>';
      return;
    }
    const tower = document.getElementById('towers').selectedOptions[0].value;
    let price = calcBasePrice(prices[tower]['base'], getDifficultyMultiplier());
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < paths[i]; j++) {
        price += calcUpgradePrice(prices[tower][String(i + 1)][j], getDifficultyMultiplier());
      }
    }
    document.getElementById('buyprice').innerHTML = price;
    document.getElementById('sellprice').innerHTML = Math.ceil(price * 0.7);
  }

  (() => {
    let squares = document.getElementsByClassName('tier-square');
    Array(...squares).forEach((e) => {
      e.addEventListener('click', () => {
        let clear = false;
        let path = parseInt(e.parentElement.dataset.path);
        if (parseInt(e.innerText) === paths[path]) {
          clear = true;
        }
        e.parentElement.querySelectorAll('span').forEach((t) => {
          if (t.innerText > e.innerText) {
            t.style.backgroundColor = '';
          } else {
            t.style.backgroundColor = clear ? '' : '#DD0000';
          }
        })
        paths[path] = clear ? 0 : parseInt(e.innerText);
        calc();
      })
    })
    document.getElementById('towers').onchange = calc;
    document.getElementById('difficulty').onchange = calc;
    document.getElementById('impoppable').onchange = calc;
  })();
</script>