EP.24 คำนวณสเตตัสแร็กนาร็อก

noMerzy | 2016-09-26 09:46:55

คำนวณสเตตัส แร็กนาร็อก

calc.html
<!DOCTYPE html> <html> <head> <title>Ragnarok Status Calculator</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, tr, td{ border: 1px solid #f1f1f1; border-collapse:collapse; padding: 8px; } table { margin-top: 15px; margin-bottom: 15px; } input[type=text] { width: 50px; } select { margin-left: 15px; } </style> </head> <body onload="statCalc()"> <span>LV.99 / 50</span> <select name="class" onchange="jobClass(this.value)"> <option value="0">Knight</option> <option value="1">Assasin</option> <option value="2">Priest</option> <option value="3">Hunter</option> <option value="4">Wizard</option> <option value="5">Blacksmith</option> <option value="6">Crusader</option> <option value="7">Rogue</option> <option value="8">Monk</option> <option value="9">Bard</option> <option value="10">Dancer</option> <option value="11">Sage</option> <option value="12">Alchemist</option> </select> <table> <tr> <td>STR</td> <td><input type="text" id="str" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 8</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('str')">-</button> <button onclick="statUp('str')">+</button></td> </tr> <tr> <td>AGI</td> <td><input type="text" id="agi" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 2</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('agi')">-</button> <button onclick="statUp('agi')">+</button></td> </tr> <tr> <td>VIT</td> <td><input type="text" id="vit" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 10</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('vit')">-</button> <button onclick="statUp('vit')">+</button></td> </tr> <tr> <td>INT</td> <td><input type="text" id="int" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 0</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('int')">-</button> <button onclick="statUp('int')">+</button></td> </tr> <tr> <td>DEX</td> <td><input type="text" id="dex" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 6</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('dex')">-</button> <button onclick="statUp('dex')">+</button></td> </tr> <tr> <td>LUK</td> <td><input type="text" id="luk" value="1" onchange="statCalc(this)"></td> <td class="jobBonus">+ 4</td> <td class="pointUp">(2)</td> <td><button onclick="statDown('luk')">-</button> <button onclick="statUp('luk')">+</button></td> </tr> </table> <span>พอยต์คงเหลือ : </span><span id="point">1273</span> <script> /* * ฟังกชั่นเซ็ตค่าจ็อบโบนัสของแต่ละอาชีพ * @param str job อาชีพ */ function jobClass(job) { var jobBonus = []; //Knight โบนัส 8 2 10 0 6 4 jobBonus[0] = [8, 2, 10, 0, 6, 4]; //Assasin โบนัส 6 10 2 4 8 0 jobBonus[1] = [6, 10, 2, 4, 8, 0]; //Priest โบนัส 5 4 5 5 4 7 jobBonus[2] = [5, 4, 5, 5, 4, 7]; //Hunter โบนัส 4 6 2 4 10 4 jobBonus[3] = [4, 6, 2, 4, 10, 4]; //Wizard โบนัส 1 8 1 12 6 2 jobBonus[4] = [1, 8, 1, 12, 6, 2]; //Blacksmith โบนัส 6 2 6 2 12 2 jobBonus[5] = [6, 2, 6, 2, 12, 2]; //Crusader โบนัส 7 2 7 6 3 5 jobBonus[6] = [7, 2, 7, 6, 3, 5]; //Rogue โบนัส 6 7 6 4 7 5 jobBonus[7] = [6, 7, 6, 4, 7, 5]; //Monk โบนัส 8 7 6 2 4 3 jobBonus[8] = [8, 7, 6, 2, 4, 3]; //Bard โบนัส 2 7 3 5 9 4 jobBonus[9] = [2, 7, 3, 5, 9, 4]; //Dancer โบนัส 2 7 3 5 5 8 jobBonus[10] = [2, 7, 3, 5, 5, 8]; //Sage โบนัส 5 5 3 9 5 3 jobBonus[11] = [5, 5, 3, 9, 5, 3]; //Alchemist โบนัส 5 6 3 7 9 0 jobBonus[12] = [5, 6, 3, 7, 9, 0]; //อิลิเมนต์ jobBounus jobBonusElem = document.getElementsByClassName('jobBonus'); for (i = 0; i < jobBonus.length; i++) { jobBonusElem[i].innerHTML = '+ ' + jobBonus[job][i]; } } /* * ฟังก์ชั่นคำนวณสเตตัส */ function statCalc(that) { if (that.value > 99) { that.value = 99; } if (that.value < 1) { that.value = 1; } //สเตตัสปัจจุบัน var str = document.getElementById('str').value; var agi = document.getElementById('agi').value; var vit = document.getElementById('vit').value; var int = document.getElementById('int').value; var dex = document.getElementById('dex').value; var luk = document.getElementById('luk').value; //สเตตัสรวม var stat = [str, agi, vit, int, dex, luk]; var usedStat = 0; var digit1 = digit2 = 0; // คำนวนพอยต์ for (i = 0; i < stat.length; i++) { if (stat[i] > 10) { //เลขหลักสิบ digit1 = Math.floor((stat[i] - 1) / 10); //เปลี่ยนเลขจำนวนพอยต์ที่ใช้อัพ document.getElementsByClassName('pointUp')[i].innerHTML = '(' + (digit1 + 2) + ')'; } //เลขหลักหน่วย digit2 = (stat[i] - 1) % 10; //พอยต์ที่ใช้ไป if (stat[i] > 10) { for (j = 1; j <= digit1; j++) { usedStat += ((j + 1) * 10); } usedStat += digit2 * (digit1 + 2); } else { usedStat += digit2 * 2; } } document.getElementById('point').innerHTML = 1273 - usedStat; } /* * ฟังก์ชั่นกดปุ่มลดสเตตัส */ function statDown(stat) { if (document.getElementById(stat).value == 1) { return false; } //ลดค่าลง 1 document.getElementById(stat).value = parseInt(document.getElementById(stat).value) - 1; //คำนวนสเตตัสใหม่ statCalc(1); } /* * ฟังก์ชั่นกดปุ่มเพิ่มสเตตัส */ function statUp(stat) { if (document.getElementById(stat).value == 99) { return false; } //เพิ่มค่าขึ้น 1 document.getElementById(stat).value = parseInt(document.getElementById(stat).value) + 1; //คำนวนสเตตัสใหม่ statCalc(1); } </script> </body> </html>