確率とは、乱数とは　2.0

CSS
2023.06.11

さて、前回作ったやつを色々いじっていきましょうかね。

とりあえず、「おうじゃのつるぎ」と同じ確率にする。

128分の1。

それがこれ。

確率とは、乱数とは
akasairoha.sakura.ne.jp

確率分母が大きくなった為に、新しくボタンを設置した。

左側のボタンは1押しで1回抽選。

右側のボタンは1押しで当たる迄、抽選。

以下コード。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>確率とは、乱数とは</title>
        <script src="src/random_number.js"></script>
        <script src="src/jag.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <img src="img/jag.jpg" id="jag">
        <div class="content">
            <a id="push" class="push">1回ずつ押したい人用<br>GO!</a>
            <a id="push2" class="push2">面倒くさい人用<br>GO!GO!</a>
        </div>
        <div>
            <p id="jagTimes"></p>
        </div>
        <div id="randomBox">
            <p id="randomNumber"></p>
        </div>
    </body>
</html>
@charset "utf-8";

/* Reset CSS */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
    display:block;
}

html{
    -webkit-text-size-adjust: 100%;
}

body{
    color: #59220d;
    line-height: 1.5;
    font-size: 14px;
    font-family: sans-serif;
}

img{
    border: 0;
    max-width: 100%;
    height: auto;
}

ul,ol{
    list-style-type: none;
}

table{
    border-collapse: collapse; 
    border-spacing: 0;
}

img, input, select, textarea{ 
    vertical-align: middle;
}

a{
    color: #59220d;
    transition: 0.5s;
}
a:hover{
    color: #d53e04;
}
a:hover img{
    opacity: 0.7;
}

/* Reset CSS ここまで*/

/* Pull to refreshを無効化 */

html {
    overflow: hidden;
    /* 背景を黒にする */
    background-color: #000;
}

body {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* content */

.content {
    height: 30%;
    width: 50%;
    font-size: 1em;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {

    /* スマートフォン用 */

    .content {
        height: auto;
        width: 100%;
        font-size: 1em;
        margin: 0 auto;
    }

}

/* 画像 */

img {
    height: 50%;
    width: 50%;
    margin: auto;
    display: block;
}

@media screen and (max-width: 480px) {

    /* スマートフォン用 */

    img {
        height: 30%;
        width: 50%;
        margin: auto;
        display: block;
    }

}

/* ボタン */

.push {

    /* ボタンを両端に並べるため */
    float: left;

    border-radius: 50%;
    border-color: #d53e04;
    border: 5px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    background: #c0c0c0;
    color: #d53e04;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}

.push2 {

    /* ボタンを両端に並べるため */
    float: right;

    border-radius: 50%;
    border-color: #d53e04;
    border: 5px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    background: #c0c0c0;
    color: #d53e04;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}

/* 記録 */

div {
    text-align: center;
    font-size: 3em;

    /* ボタンとボタンの間に入り込み防止 */
    clear: both;
}

p {
    color: #fff;
}

// ボタンを押したときの処理

window.onload = function(){

    let pushButton = document.getElementById("push");
    let pushButton2 = document.getElementById("push2"); 
    let jagImage = document.getElementById("jag"); 
    let jagTimes = document.getElementById("jagTimes");
    let randomBox = document.getElementById("randomBox");
    let numberOfTimes = 0;

    jagTimes.innerHTML = numberOfTimes + "回目";

    // 1回ずつ押す人用

    pushButton.addEventListener("click", function(){

        // 生成した乱数を取得(0～9)
        // とりあえずここでは、5を当たりとする
        // 2秒後に元の画像に戻す

        let rn = random.number()

        if(rn === 5){
            jagImage.src = "img/jag2.jpg";

            window.setTimeout(function(){
                jagImage.src = "img/jag.jpg";
            }, 2000);
        }

        // ボタンを押した回数を記録

        numberOfTimes++;

        // HTMLに記載

        jagTimes.innerHTML = numberOfTimes + "回目";

        // 新しいHTML要素を作成

        let newElement = document.createElement('p');
        newElement.textContent = rn;

        // 指定した要素の中の末尾に挿入

        randomBox.appendChild(newElement);

    }, false);

    // 面倒くさい人用
    // 当たりを引くまで、クリックし続ける動作

    pushButton2.addEventListener("click", function(){

        // 生成した乱数を取得(0～9)
        // とりあえずここでは、5を当たりとする
        // 2秒後に元の画像に戻す
   
        let flag = true;

        // フラグがfalseになるまで実行

        while(flag){
            
            let rn = random.number()

            switch (rn){
                case 5:

                    // 当たりの場合

                    jagImage.src = "img/jag2.jpg";

                    window.setTimeout(function(){
                        jagImage.src = "img/jag.jpg";
                    }, 2000);

                    // ボタンを押した回数を記録

                    numberOfTimes++;

                    // HTMLに記載

                    jagTimes.innerHTML = numberOfTimes + "回目";

                    // 新しいHTML要素を作成

                    let newElement2 = document.createElement('p');
                    newElement2.textContent = rn;

                    // 指定した要素の中の末尾に挿入

                    randomBox.appendChild(newElement2);

                    flag = false;
                    //console.log(rn);
                    break;

                default:

                    // はずれの場合

                    // ボタンを押した回数を記録

                    numberOfTimes++;

                    // HTMLに記載
                    
                    jagTimes.innerHTML = numberOfTimes + "回目";
                    
                    // 新しいHTML要素を作成
                    
                    let newElement3 = document.createElement('p');
                    newElement3.textContent = rn;
                    
                    // 指定した要素の中の末尾に挿入
                    
                    randomBox.appendChild(newElement3);
                    //console.log(rn);
            }
        }

    }, false);
}
// 乱数で数字を取得

class random {

    // 今度は128分の1に

    static number(){
        let randomNumber = Math.floor(Math.random()*128);
        //console.log(randomNumber);
        return randomNumber;
    }
}

特には難しい事はしてないかな。

while文でフラグが成立するまで（正確には条件から外れるまで）、ループ。

次の記事で、分析したいな。