【html+JS】【初学项目】【简单的JS元素提取计算】“选择图片+输入数值->返回最优分配建议”

1.背景

基于游戏《天涯明月刀》

【心法】：每个心法拥有五个属性【气劲、身法、根骨、力道、洞察】

【属性等级】：每个属性可升级为【0级~25级】

【心法值】：可分配给以上五个属性，属性获得固定的【心法值】后升级，获取【属性值】

【心法差异】：不同心法，相同的属性等级 -> 获得的属性值不同

2.项目功能

输入【心法数值】+选择【心法图片】后，点击按钮【计算】-->返回能获得最大【属性值】的分配方案的【柱状图】和【各项数据】

3.页面

4.小总结

<onclick>方法和<img>元素，实现点击图片，将图片显示在另一个框中

<img name="selected_object" width="50" height="50"></span>

function Select(obj, name) {

document.getElementsByName("selected_object")[0].src = obj;

document.getElementsByName("selected_object")[0].value = name;

}

<div>设置每个属性结果的显示区域，属性名featruename，可视化条形区域的颜色featrue，exfea消耗属性值

<div name="featruename" style="display:inline-block"></div>
<div name="featrue" style="display:inline-block;color: #ffffff;background:#5c36e7"></div>
<div name="exfea" style="display:inline-block"></div>
<br>

<document.getElementsByName("name")[0] > 获取用户选择的图片和输入的值

var x = document.getElementsByName("selected_object")[0];
var y = document.getElementsByName("selected_value")[0];

通过一堆计算逻辑，最后得到通过计算，得到最终每个属性的最佳等级level[i]；每个属性已分配的心法值featvalue[i]，每个属性条形区域的宽度withlist[i]

<元素对象.innerHTML > 在网页显示结果

for (var i = 0; i < 5; i++) {
    document.getElementsByName("featruename")[i].innerHTML = levelname[i];
    document.getElementsByName("featrue")[i].innerHTML = "LV" + level[i] + "+" + level[i] * featvalue[i];
}

<元素对象.innerHTML.style.width > 设置显示区域的宽度

document.getElementsByName("featrue")[i].style.width = withlist[i] + 'px';

3.code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>心法潜修计算器</title>
</head>

<body>
    <span>当前心法：</span>
    <img name="selected_object" width="50" height="50"></span>
    <span>输入潜修值：</span>
    <input type="text" name=selected_value>
    <button onclick="display()">点我！</button>
    <!-- <div style="font-family:verdana;padding:10px;border-radius:5px;border:2px solid #EE872A;"> -->
    <fieldset>
        <legend>分配建议</legend>
        <!-- <span style="color:#ffffff;">分配建议</span> -->
        <p name="result" id="result"></p>
        <div name="featruename" style="display:inline-block"></div>
        <!-- <div name="featrue" style="display:inline-block;columns: #b4009e;background:#dddddd;text-align:right"></div> -->
        <div name="featrue" style="display:inline-block;color: #ffffff;background:#5c36e7"></div>
        <div name="exfea" style="display:inline-block"></div>
        <br>
        <div name="featruename" style="display:inline-block"></div>
        <div name="featrue" style="display:inline-block;color: #ffffff;background:#d174cc"></div>
        <div name="exfea" style="display:inline-block"></div>
        <br>
        <div name="featruename" style="display:inline-block"></div>
        <div name="featrue" style="display:inline-block;color: #ffffff;background:#628b3b"></div>
        <div name="exfea" style="display:inline-block"></div>
        <br>
        <div name="featruename" style="display:inline-block"></div>
        <div name="featrue" style="display:inline-block;color: #ffffff;background:#4f819e"></div>
        <div name="exfea" style="display:inline-block"></div>
        <br>
        <div name="featruename" style="display:inline-block"></div>
        <div name="featrue" style="display:inline-block;color: #ffffff;background:#9250b1"></div>
        <div name="exfea" style="display:inline-block"></div>
        <div name="exvalue"></div>
    </fieldset>
    <!-- </div> -->
    <fieldset>
        <legend>选择目标</legend>
        <img src="拜月.png" width="50" height="50" onclick="Select('拜月.png','拜月·冰心')" />
        <img src="杀菩提.png" width="50" height="50" onclick="Select('杀菩提.png','杀菩提')" />
        <img src="悲回风.png" width="50" height="50" onclick="Select('悲回风.png','悲回风')" />
        <img src="风华.png" width="50" height="50" onclick="Select('风华.png','风华·玉碎')" />
        <img src="流毒.png" width="50" height="50" onclick="Select('流毒.png','淬火·流毒')" />
        <img src="刑天.png" width="50" height="50" onclick="Select('刑天.png','刑天·沧海')" />
        <img src="镇岳.png" width="50" height="50" onclick="Select('镇岳.png','啸天·镇岳')" />
        <img src="罗睺诀.png" width="50" height="50" onclick="Select('罗睺诀.png','罗睺诀')" />
        <img src="沉舟.png" width="50" height="50" onclick="Select('沉舟.png','猎风·沉舟')" />
        <img src="炼武.png" width="50" height="50" onclick="Select('炼武.png','炼武·身法')" />
    </fieldset>
    <br>
    <div name="auhor" style="text-align:center">本计算器的结果是功力最大化点法</div>
    <div name="auhor" style="text-align:center;color:rgb(84, 145, 236)"><i> 因为太懒所以暂时只有7本心法，需要算别的联系我噢———BY.暖衣</i></div>


    <script>
        function display() {
            var x = document.getElementsByName("selected_object")[0];
            var y = document.getElementsByName("selected_value")[0];
            if (x.value == undefined || y.value == "") {
                document.getElementsByName("result")[0].innerHTML = "请先选择目标或输入潜修值";
            }
            else {

                // 开始主程序计算
                var levelvalue = new Array(20, 60, 100, 120, 200, 270, 300, 400, 500, 600, 700, 800, 1000, 1200, 1400, 1700, 2000, 2400, 2900, 3500, 4200, 5000, 6000, 7200, 8600);
                console.log(levelvalue.length);
                var featvalue = new Array(5);
                var exvalue = y.value
                // 判断心法
                switch (x.value) {
                    case "拜月·冰心":
                        featvalue = [5, 10, 11, 5, 5];
                        break;
                    case "杀菩提":
                        featvalue = [6, 6, 10, 6, 8];
                        break;
                    case "悲回风":
                        featvalue = [10, 6, 5, 9, 6];
                        break;
                    case "风华·玉碎":
                        featvalue = [5, 11, 6, 9, 5];
                        break;
                    case "淬火·流毒":
                        featvalue = [6, 5, 6, 8, 11];
                        break;
                    case "刑天·沧海":
                        featvalue = [7, 7, 8, 7, 7];
                        break;
                    case "啸天·镇岳":
                        featvalue = [10, 5, 5, 5, 11];
                        break;
                    case "罗睺诀":
                        featvalue = [8, 10, 6, 6, 6];
                        break;
                    case "猎风·沉舟":
                        featvalue = [11, 5, 9, 5, 6];
                        break;
                    case "炼武·身法":
                        featvalue = [7, 7, 6, 6, 14];
                        levelvalue = [20, 60, 100, 120, 200, 270, 300, 400, 500, 600]
                        break;
                }
                // 计算等级
                var list = new Array(5);
                for (var i = 0; i < 5; i++) {
                    list[i] = new Array(25);
                }
                for (var i = 0; i < 25; i++) {
                    for (var j = 0; j < 5; j++) {
                        list[j][i] = featvalue[j] / levelvalue[i];
                    }
                }
                var levelname = ['力道', '气劲', '根骨', '洞察', '身法'];
                var level = [0, 0, 0, 0, 0];
                var exfea = [0, 0, 0, 0, 0];
                do {
                    var comparelist = [list[0][0], list[1][0], list[2][0], list[3][0], list[4][0]];
                    var index = comparelist.indexOf(Math.max.apply(null, comparelist));
                    if (exvalue >= levelvalue[level[index]]) {
                        exvalue = exvalue - levelvalue[level[index]];
                        exfea[index] = exfea[index] + levelvalue[level[index]];
                        level[index]++;
                        var continuelabel = true;
                        if (x.value == "炼武·身法") {
                            if (level[index] == 10) {
                                list[index][0] = 0;
                            }
                            else {
                                list[index].shift();
                            }
                        }
                        else {
                            if (level[index] == 25) {
                                list[index][0] = 0
                            }
                            else {
                                list[index].shift();
                            }
                        }
                    }
                    else {
                        var continuelabel = false;
                    }
                } while (continuelabel)

                var maxwhith = Math.max.apply(null, level);
                var withlist = [];
                for (var i = 0; i < 5; i++) {
                    withlist[i] = 400 / maxwhith * level[i];
                }

                document.getElementsByName("result")[0].innerHTML = x.value + " 潜修值" + y.value + "，剩余可分配点数" + exvalue + " ，下一级选择 " + levelname[index];
                //输出五个值exfea
                for (var i = 0; i < 5; i++) {
                    document.getElementsByName("featruename")[i].innerHTML = levelname[i];
                    document.getElementsByName("featrue")[i].innerHTML = "LV" + level[i] + "+" + level[i] * featvalue[i];
                    document.getElementsByName("exfea")[i].innerHTML = exfea[i];
                    document.getElementsByName("featrue")[i].style.width = withlist[i] + 'px';
                }
            }
        }
        function Select(obj, name) {
            document.getElementsByName("selected_object")[0].src = obj;
            document.getElementsByName("selected_object")[0].value = name;
        }
    </script>


</body>

</html>

PS 不重要的【计算逻辑】

通过x获取到-- featvalue（每升一级可提升的属性值），levelvalue（每一级需要的心法值）

通过y获取到-- exvalue（尚未分配的心法值）

创建二元数组list，list[属性编号][等级]，值为featvalue/levelvalue（每点心法值可获得多少属性值）

var list = new Array(5);

for (var i = 0; i < 5; i++) {

list[i] = new Array(25);

}

for (var i = 0; i < 25; i++) {

for (var j = 0; j < 5; j++) {

list[j][i] = featvalue[j] / levelvalue[i];

}

创建比较数组comparelist，通过方法：comparelist，比较出每次选择哪个属性升级

var comparelist = [list[0][0], list[1][0], list[2][0], list[3][0], list[4][0]];
var index = comparelist.indexOf(Math.max.apply(null, comparelist));

选择某个属性升级后，对应level[属性编号]+1

posted on 2022-02-25 18:24 卷耳丶阅读(39) 评论(0) 收藏举报

刷新页面返回顶部

导航