영웅 통계 비교 계산기: 두 판 사이의 차이

SKY's Kingshot
← 이전 편집다음 편집 →
편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
<html>
<html>
<div style="background-color: rgba(22, 22, 26, 0.95); padding: 25px; border-radius: 12px; border: 2px solid #FF8C00; box-shadow: 0 10px 30px rgba(0,0,0,0.8); max-width: 600px; margin: auto; color: #d1d5db; font-family: sans-serif;">
<style>
    <h2 style="color: #FF8C00; text-align: center; margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 10px; font-weight: 900;">⚔️ SKY 연맹 영웅 통계 비교 계산기</h2>
  #HeroBox { max-width: 600px; margin: 30px auto; padding: 20px; background: #1a1a1d; border-radius: 10px; border: 2px solid #FF8C00; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: 'Segoe UI', sans-serif; font-size: 14px; box-sizing: border-box; color: #d1d5db; }
   
  #HeroBox h3 { text-align: center; margin-bottom: 20px; font-size: 20px; color: #FF8C00; font-weight: 900; }
    <div style="display: flex; justify-content: space-between; margin-top: 20px; gap: 15px; flex-wrap: wrap;">
  .level-selection-container { display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
        <div style="flex: 1; min-width: 200px; background-color: #121215; padding: 15px; border-radius: 8px; border: 1px solid #333;">
  .level-selection-container .form-group { flex: 0 1 auto; width: auto; }
            <h3 style="color: #e0e0e0; margin-top: 0; text-align: center;">🛡️ 기존 주력 영웅</h3>
  .hero-selection-container { display: flex; justify-content: space-around; margin-bottom: 20px; flex-wrap: wrap; background: #121215; padding: 15px; border-radius: 8px; border: 1px solid #333; }
            <label style="color: #bbb; font-size: 14px; font-weight: bold;">세대 (Generation)</label>
  .form-group { margin-bottom: 15px; text-align: center; }
            <select id="old_gen" style="width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 15px; background: #222; color: #fff; border: 1px solid #555; border-radius: 5px;">
  .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #ccc; }
                <option value="1">1세대 (Gen 1)</option><option value="2">2세대 (Gen 2)</option><option value="3">3세대 (Gen 3)</option><option value="4">4세대 (Gen 4)</option><option value="5">5세대 (Gen 5)</option>
  .form-group select { width: 100%; padding: 8px; font-size: 14px; border-radius: 4px; border: 1px solid #555; background: #222; color: #fff; text-align: center; }
            </select>
  .hero-selection-container .hero-display { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 150px; max-width: 45%; box-sizing: border-box; padding: 0 10px; }
            <label style="color: #bbb; font-size: 14px; font-weight: bold;">성급 (Stars)</label>
  .hero-image { width: 80px; height: 80px; margin-top: 10px; border-radius: 8px; object-fit: cover; border: 2px solid #555; background: #000; }
            <select id="old_star" style="width: 100%; padding: 10px; margin-top: 5px; background: #222; color: #fff; border: 1px solid #555; border-radius: 5px;">
  .calc-btn { width: 100%; padding: 12px; font-size: 16px; background: #FF8C00; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }
                <option value="1">⭐ 1성</option><option value="2">⭐⭐ 2성</option><option value="3">⭐⭐⭐ 3성</option><option value="4">⭐⭐⭐⭐ 4성</option><option value="5" selected>⭐⭐⭐⭐⭐ 5성</option>
  .calc-btn:hover { background: #ffaa00; box-shadow: 0 0 15px rgba(255,140,0,0.4); }
            </select>
  #message { text-align: center; margin-top: 10px; font-size: 13px; color: #999; }
        </div>
  #results { margin-top: 20px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; padding: 15px; border: 1px dashed #FF8C00; border-radius: 5px; background-color: rgba(255, 140, 0, 0.1); display: none; }
</style>
 
<div id="HeroBox">
  <h3>⚔️ 킹샷 영웅 스탯 정밀 비교기</h3>
 
  <div class="level-selection-container">
    <div class="form-group">
      <label for="levelSelect">⭐ 비교할 기준 성급/티어 선택:</label>
      <select id="levelSelect"></select>
    </div>
  </div>
 
  <div class="hero-selection-container">
    <div class="form-group hero-display">
      <label for="hero1Select">🛡️ 현재 사용 중인 영웅:</label>
      <select id="hero1Select" onchange="updateHero1Selection()"></select>
      <img id="hero1Image" src="https://via.placeholder.com/80/333333/ffffff?text=Hero+1" alt="Your Hero" class="hero-image">
    </div>


        <div style="flex: 1; min-width: 200px; background-color: #121215; padding: 15px; border-radius: 8px; border: 1px solid #333;">
    <div class="form-group hero-display">
            <h3 style="color: #ffaa00; margin-top: 0; text-align: center;">⚔️ 신규 영웅</h3>
      <label for="hero2Select">⚔️ 교체 후보 영웅:</label>
            <label style="color: #bbb; font-size: 14px; font-weight: bold;">세대 (Generation)</label>
      <select id="hero2Select" onchange="updateHeroImage('hero2')"></select>
            <select id="new_gen" style="width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 15px; background: #222; color: #fff; border: 1px solid #555; border-radius: 5px;">
      <img id="hero2Image" src="https://via.placeholder.com/80/333333/ffffff?text=Hero+2" alt="Compare Hero" class="hero-image">
                <option value="1">1세대 (Gen 1)</option><option value="2" selected>2세대 (Gen 2)</option><option value="3">3세대 (Gen 3)</option><option value="4">4세대 (Gen 4)</option><option value="5">5세대 (Gen 5)</option>
            </select>
            <label style="color: #bbb; font-size: 14px; font-weight: bold;">성급 (Stars)</label>
            <select id="new_star" style="width: 100%; padding: 10px; margin-top: 5px; background: #222; color: #fff; border: 1px solid #555; border-radius: 5px;">
                <option value="1">⭐ 1성</option><option value="2">⭐⭐ 2성</option><option value="3">⭐⭐⭐ 3성</option><option value="4" selected>⭐⭐⭐⭐ 4성</option><option value="5">⭐⭐⭐⭐⭐ 5성</option>
            </select>
        </div>
     </div>
     </div>
  </div>


    <button onclick="calculateHero()" style="width: 100%; padding: 15px; margin-top: 25px; background-color: #FF8C00; color: #fff; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 0 15px rgba(255,140,0,0.4); transition: 0.3s;">
  <button class="calc-btn" onclick="compareHeroes()">영웅 교체 효율 분석하기</button>
        비교 분석 실행
  <p id="message">위 스탯은 기본 위력을 기준으로 하며, 위젯이나 장비는 별도 계산입니다.</p>
    </button>
  <div id="results"></div>
   
    <div id="calc_result" style="margin-top: 20px; padding: 15px; text-align: center; font-size: 18px; font-weight: bold; border-radius: 5px; display: none;"></div>
</div>
</div>


<script>
<script>
function calculateHero() {
// 1. 레벨(성급/티어) 목록 정의
     var og = parseInt(document.getElementById('old_gen').value);
const levelNames = [
     var os = parseInt(document.getElementById('old_star').value);
    '0-Star (T0)', '1-Star (T0)', '2-Star (T0)', '3-Star (T0)', '4-Star (T0)',
     var ng = parseInt(document.getElementById('new_gen').value);
    '1-Star (T1)', '2-Star (T1)', '3-Star (T1)', '4-Star (T1)',
     var ns = parseInt(document.getElementById('new_star').value);
    '1-Star (T2)', '2-Star (T2)', '3-Star (T2)', '4-Star (T2)',
    '1-Star (T3)', '2-Star (T3)', '3-Star (T3)', '4-Star (T3)',
    '1-Star (T4)', '2-Star (T4)', '3-Star (T4)', '4-Star (T4)',
    '1-Star (T5)', '2-Star (T5)', '3-Star (T5)', '4-Star (T5)', '5-Star (T5)'
];
 
// 2. 영웅 데이터베이스 (암호화 해제됨 - 천화님이 원하시는 수치를 직접 기입하시면 됩니다)
// stats 배열의 순서는 위 levelNames의 순서와 1:1로 일치합니다.
const heroes = [
    {
        name: "1세대: 로사 (Rosa)",
        type: "Infantry",
        stats: [1000, 1200, 1500, 1800, 2200, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 11000, 12000, 13000, 14000, 15000],
        image: "https://via.placeholder.com/80/ff5e00/ffffff?text=Rosa"
    },
    {
        name: "2세대: 헬가 (Helga)",
        type: "Infantry",
        stats: [1500, 1800, 2250, 2700, 3300, 3750, 4500, 5250, 6000, 6750, 7500, 8250, 9000, 9750, 10500, 11250, 12000, 12750, 13500, 14250, 15000, 16500, 18000, 19500, 21000, 22500],
        image: "https://via.placeholder.com/80/0073aa/ffffff?text=Helga"
    },
    {
        name: "3세대: 아마네 (Amane)",
        type: "Cavalry",
        stats: [2250, 2700, 3375, 4050, 4950, 5625, 6750, 7875, 9000, 10125, 11250, 12375, 13500, 14625, 15750, 16875, 18000, 19125, 20250, 21375, 22500, 24750, 27000, 29250, 31500, 33750],
        image: "https://via.placeholder.com/80/28a745/ffffff?text=Amane"
    }
];
 
// 3. 드롭다운 메뉴 초기화 세팅
function populateDropdowns() {
     const levelSelect = document.getElementById('levelSelect');
     const hero1Select = document.getElementById('hero1Select');
   
    // 레벨 추가
    levelNames.forEach((name, index) => {
        levelSelect.innerHTML += `<option value="${index}">${name}</option>`;
    });
     // 기본으로 4-Star (T5) 정도를 선택 상태로 두기
    levelSelect.selectedIndex = 24;
 
    // 내 영웅 추가
    heroes.forEach((hero, index) => {
        hero1Select.innerHTML += `<option value="${index}">${hero.name}</option>`;
    });
 
    updateHero1Selection(); // 비교 영웅 드롭다운 연동
}
 
// 4. 내 영웅 선택 시, 비교 영웅 목록 업데이트 및 이미지 변경
function updateHero1Selection() {
    const hero1Index = document.getElementById('hero1Select').value;
     const hero2Select = document.getElementById('hero2Select');
    const selectedHero = heroes[hero1Index];
      
      
     // 킹샷 로직: 세대가 넘어갈 때마다 기본 전투력이 약 1.5배 증가
     // 내 영웅 이미지 업데이트
     var old_power = Math.pow(1.5, og - 1) * os * 1000;
     document.getElementById('hero1Image').src = selectedHero.image;
     var new_power = Math.pow(1.5, ng - 1) * ns * 1000;
 
    // 비교 영웅 드롭다운 초기화
     hero2Select.innerHTML = '';
      
      
     var resBox = document.getElementById('calc_result');
     // 내 영웅과 같은 타입(보병, 기병 등)이면서 세대가 더 높은 영웅만 필터링해서 보여줌
    heroes.forEach((hero, index) => {
        if(hero.type === selectedHero.type && index > hero1Index) {
            hero2Select.innerHTML += `<option value="${index}">${hero.name}</option>`;
        }
    });
 
    if(hero2Select.options.length === 0) {
        hero2Select.innerHTML = `<option value="">상위 영웅 없음</option>`;
        document.getElementById('hero2Image').src = "https://via.placeholder.com/80/333333/ffffff?text=None";
    } else {
        updateHeroImage('hero2');
    }
}
 
// 5. 교체 영웅 이미지 업데이트
function updateHeroImage(type) {
    if(type === 'hero2') {
        const h2Index = document.getElementById('hero2Select').value;
        if(h2Index !== "") {
            document.getElementById('hero2Image').src = heroes[h2Index].image;
        }
    }
}
 
// 6. 🚀 대망의 비교 로직
function compareHeroes() {
    const levelIdx = document.getElementById('levelSelect').value;
    const h1Idx = document.getElementById('hero1Select').value;
    const h2Idx = document.getElementById('hero2Select').value;
    const resBox = document.getElementById('results');
 
    if(h2Idx === "") {
        resBox.style.display = "block";
        resBox.style.color = "#ff4444";
        resBox.style.borderColor = "#ff4444";
        resBox.innerHTML = "❌ 비교할 상위 영웅이 없습니다.";
        return;
    }
 
    const stat1 = heroes[h1Idx].stats[levelIdx];
    const stat2 = heroes[h2Idx].stats[levelIdx];
 
     resBox.style.display = "block";
     resBox.style.display = "block";
   
 
     if (new_power > old_power) {
     if(stat2 > stat1) {
         var diff = Math.round((new_power / old_power - 1) * 100);
         const diff = Math.round((stat2 / stat1 - 1) * 100);
        resBox.style.backgroundColor = "rgba(0, 255, 0, 0.1)";
        resBox.style.border = "1px solid #00ff00";
         resBox.style.color = "#00ff00";
         resBox.style.color = "#00ff00";
         resBox.style.boxShadow = "0 0 10px rgba(0,255,0,0.2)";
         resBox.style.borderColor = "#00ff00";
         resBox.innerHTML = "✅ 신규 영웅으로 교체를 추천합니다! (효율 " + diff + "% 상승)<br><span style='font-size:14px; color:#ccc; font-weight:normal;'>기존 위력: " + Math.round(old_power) + " vs 신규 위력: " + Math.round(new_power) + "</span>";
         resBox.innerHTML = `✅ 교체를 강력히 추천합니다! <br> (효율 ${diff}% 상승)<br><span style='font-size:13px; color:#aaa;'>현재: ${stat1} vs 교체: ${stat2}</span>`;
    } else if (new_power == old_power) {
        resBox.style.backgroundColor = "rgba(255, 255, 0, 0.1)";
        resBox.style.border = "1px solid #ffff00";
        resBox.style.color = "#ffff00";
        resBox.style.boxShadow = "0 0 10px rgba(255,255,0,0.2)";
        resBox.innerHTML = "⚖️ 두 영웅의 위력이 동일합니다.<br><span style='font-size:14px; color:#ccc; font-weight:normal;'>전용 장비(Widget) 상황에 따라 선택하세요.</span>";
     } else {
     } else {
        resBox.style.backgroundColor = "rgba(255, 68, 68, 0.1)";
        resBox.style.border = "1px solid #ff4444";
         resBox.style.color = "#ff4444";
         resBox.style.color = "#ff4444";
         resBox.style.boxShadow = "0 0 10px rgba(255,68,68,0.2)";
         resBox.style.borderColor = "#ff4444";
         resBox.innerHTML = "❌ 아직은 기존 영웅을 계속 사용하는 것이 강력합니다.<br><span style='font-size:14px; color:#ccc; font-weight:normal;'>기존 위력: " + Math.round(old_power) + " vs 신규 위력: " + Math.round(new_power) + "</span>";
         resBox.innerHTML = `❌ 아직 교체할 타이밍이 아닙니다. <br><span style='font-size:13px; color:#aaa;'>현재: ${stat1} vs 교체: ${stat2}</span>`;
     }
     }
}
}
// 스크립트 실행
window.onload = populateDropdowns;
</script>
</script>
</html>
</html>

2026년 5월 16일 (토) 23:01 판

⚔️ 킹샷 영웅 스탯 정밀 비교기

Your Hero
Compare Hero

위 스탯은 기본 위력을 기준으로 하며, 위젯이나 장비는 별도 계산입니다.

원본 주소 "https://fax.ai.kr/index.php?title=영웅_통계_비교_계산기&oldid=400"