テキトーな占いを作る Math.random()

Math.random() について何か書きたかったのですが、
面白いネタがなかったので、テキトーな占いを作ってみました。
デモも用意しました。
ちなみに私は、毎日最強なので、占い等は全く気にしていません。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>テキトーな占い</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div class="wrap">
            <p>ボタンを押すと、なんと今日の運勢がわかります。</p>
            <p>なお、実際に起こる出来事とこの占いには、<b>全く因果関係がありません。</b></p>
            <p id="result" style="color:#aa0000;"></p>
            <button type="button" name="button" id="divination">占う</button><br>
            <p id="counter"></p>
        </div>
    </body>
</html>

// 画面の読み込みが完了したら実行される
window.onload = () => {
    // HTML からボタンを取得し、ボタンにクリック時の処理を追加する
    const buttonId = 'divination';
    const button = document.getElementById(buttonId);
    button.addEventListener('click', buttonListener);
}

// 占い結果一覧
const allDivination = [
    "きっといい一日になります。",
    "もしかしたらいい一日になるかもしれません。",
    "昨日よりいい一日なるかもしれません。。",
    "今日は今日の風が吹きます。",
    "＼(＾o＾)／",
    "とりあえず頑張りましょう。",
    "気分的にいい一日になりそうです。",
    "(/・ω・)/",
    "制作者はプログラミングが好きです。",
    "のーこめんとです。",
];

// ボタンを押したときに実行されるリスナー
function buttonListener() {
    const divination = allDivination[Math.floor(Math.random() * 10)];
    drawResult(divination);
    drawProbability();
}

// 占い結果の描画
function drawResult(d) {
    const resultId = 'result';
    const resultTag = document.getElementById(resultId);
    resultTag.innerHTML = d;
}

// 確率の計算
function calkProbability() {
    const probability = [];
    for(let i = 0; i < 10; i ++) {
        probability.push(0);
    }
    // 100回 Math.random() を実行した時のばらつきを調べる
    for(let i = 0; i < 100; i ++) {
        const value = Math.floor(Math.random() * 10);
        probability[value]++;
    }
    return probability;
}

// 確率の描画
function drawProbability() {
    const counterId = 'counter';
    const counterTag = document.getElementById(counterId);
    let txt = 'ちなみに、占い結果は10種類あり、<br>'
    const probability = calkProbability();
    for(let i = 0; i < allDivination.length; i ++) {
        txt += probability[i] + '%  ';
    }
    txt += '<br>くらいの確立です。';
    counterTag.innerHTML = txt;
}

window.onload()

画面の読み込みが完了すると実行されます。
今回は HTML からボタンを取得し、ボタンが押下された時の処理を追加しています。

Math.random()

Math.random() は、０以上1未満の値を返します。
詳細はこちらに載っています。
今回は10倍してから Math.floor() で小数点以下切り捨てすることで、0~9までの値を取得しています。

スポンサーリンク