LoginSignup
1
0

出る確率を調整できるサイコロ

Posted at

前の投稿で、サイコロを指定回数振るプログラムを書きました。今回はサイコロの確率を変更できるプログラムを作成します。

下記サイトを参考にしています。
出る確率を調整できるランダムテキスト(インチキサイコロ)
元サイトのプログラムは変数定義されていなかったりして動かせなかったので動作するようにし、こちら側で確率を操作できように修正しました。
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])
    }
  }
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0