Распределение конечных значений через Javascript

Question

Я пытаюсь создать игру Javscript, и я немного озадачен аспектом процесса создания персонажа.

Моя игра имеет пять точек на основе черты:

1. Endurance
2. Сила
3. Восприятие
4. Luck
5. харизмы

Каждый признак установлен на "5" первоначально, и есть 5 доступных точек для добавления. Очевидно, всего 30 баллов.

Я стараюсь, чтобы мой абсолютный труднее всего сделать весь этот проект с помощью простого javascript ванили, без jQuery.

Мой вопрос заключается в том, как создать форму, которая позволит вам их распространять. У меня было две идеи, но я не уверен, что первый из них практичен без jQuery: Первый из них будет состоять из двух текстовых входов и обновит «доступные точки» при изменении. Я должен признаться, однако, что я понятия не имею, как это сделать, и обновить его без 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>