前の投稿で、サイコロを指定回数振るプログラムを書きました。今回はサイコロの確率を変更できるプログラムを作成します。
下記サイトを参考にしています。
出る確率を調整できるランダムテキスト(インチキサイコロ)
元サイトのプログラムは変数定義されていなかったりして動かせなかったので動作するようにし、こちら側で確率を操作できように修正しました。
numberInputsの中に正の数値を入れて、その数が大きいほど、出やすくなります。何も入れない場合は全て同じ確率でサイコロが振られます。どのくらいの確率になるかはprobabilityTextに表示されます。
<p>
<button id="diceThrowButton">サイコロを振る</button>
</p>
<p>
1<input type="number" class="numberInputs">
2<input type="number" class="numberInputs">
3<input type="number" class="numberInputs">
4<input type="number" class="numberInputs">
5<input type="number" class="numberInputs">
6<input type="number" class="numberInputs">
</p>
<ol>
<li class="probabilityText">0%</li>
<li class="probabilityText">0%</li>
<li class="probabilityText">0%</li>
<li class="probabilityText">0%</li>
<li class="probabilityText">0%</li>
<li class="probabilityText">0%</li>
</ol>
const diceThrowButton = document.querySelector("#diceThrowButton")
diceThrowButton.addEventListener('click', fakeDice)
function fakeDice() {
const probability = new Array()
const numberInputs = document.querySelectorAll(".numberInputs")
numberInputs.forEach(function (numberInput, index) {
probability[index] = Number(numberInput.value) || 1
})
const sumAll = probability.reduce((sum, num) => sum + num, 0)
const probabilityText = document.querySelectorAll(".probabilityText")
const $text = [1, 2, 3, 4, 5, 6]
let randomSum = Math.floor(Math.random() * sumAll)
let randomSumA = 0
let randomSumB = 0
randomSum++
for (let i = 0; i <= probability.length - 1; i++) {
const probabilityNumber = Math.round(probability[i] / sumAll * 1000) / 10
probabilityText[i].textContent = probabilityNumber + '%'
randomSumB = randomSumA
randomSumA += probability[i]
if (randomSumB < randomSum && randomSum <= randomSumA) {
console.log($text[i])
}
}
}