Question

我正在尝试创建一个Javscript游戏，我对“角色创建”过程的某个方面感到有点困惑。

我的游戏有五个基于特征的特征：

耐力
强度
感知
福
魅力

每个特征最初都设置为“5”，并且有5个可用点要添加。显然一共30分。

我正在努力尝试使用简单的vanilla javascript，没有jQuery来完成整个项目。

我的问题是如何创建一个允许您分发这些内容的表单。我有两个想法，但我不确定第一个是否实用没有jQuery：第一个是两个有5个文本输入，并让它们在修改时更新“可用点”。但是，我必须承认，我不知道如何做到这一点并让它在没有jQuery的情况下实时更新。第二种是具有正或负图像，当点击时，更新可用点。

之前有人做过这样的事吗？

Answer 1

欢迎来到干净清醒的VanillaJS！ JQuery依赖的戒断症状是痛苦但暂时的。

;(function (window, document, undefined) {
    "use strict";

    var sliders = document.querySelectorAll('input[type="range"]');
    var maxPoints = 30;
    var availablePoints = 30;
    var o = document.querySelector('#o');

    var getTotal = function () {
        var total = 0;
        [].forEach.call(sliders, function (slider) {
            total = total + slider.valueAsNumber;
        });
        return total;
    };

    var handleChange = function (ev) {
        availablePoints = maxPoints - getTotal();
        if (availablePoints < 0) {
            this.value = this.dataset.lastKnownValue;
            availablePoints = 0;
        } else {
            this.dataset.lastKnownValue = this.valueAsNumber;
        }
        this.nextSibling.nextSibling.innerHTML = this.value;
        o.innerHTML = availablePoints;
    };
    
    [].forEach.call(sliders, function (slider) {
        slider.addEventListener('input', handleChange);
        slider.dataset.lastKnownValue = 0;
    });

})(window, document);

label {
    float: left;
    clear: left;
    width: 250px;
}
label input {
    float: right;
    width: 10em;
}
label span {
    color: red;
    width: 1em;
    float: right;
}
output {
    color: green;
    font-weight: bold;
}
hr {
    clear: both;
}

<form id="f">
    <label for="endurance">Endurance
        <input type="range" id="endurance" value="0" min="0" max="10" step="1" />
        <span>0</span>
    </label>
    <label for="strength">Strength
        <input id="strength" type="range" value="0" min="0" max="10" step="1" />
        <span>0</span>
    </label>
    <label for="perception">Perception
        <input id="perception" type="range" value="0" min="0" max="10" step="1" />
        <span>0</span>
    </label>
    <label for="luck">Luck
        <input id="luck" type="range" min="0" value="0" max="10" step="1" />
        <span>0</span>
    </label>
    <label for="charisma">Charisma
        <input id="charisma" type="range" value="0" min="0" max="10" step="1" />
        <span>0</span>
    </label>
</form>
<hr />Availible Points:
<output for="f" id="o"></output>

通过Javascript分配有限值

1 个答案: