HTMLでスロットマシンを作る

# はじめに
HTMLとかの復習ついでに、ここに残していきたいと思います。
誰かしらの参考になれば幸いです。

#修正部分
2021/12/29
以下を修正
・startボタン連打でスロットが加速してしまう
・同じストップボタンを3回押しても結果判定に入ってしまう

#ソースコード
```Slot.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Slot.css">
</head>
<body>
    <h1>スロット</h1>
    <p>
        <script src="Slot.js"></script>
        <input type="button" value="START" onclick=start()>         <!--Startボタン-->

        <div class="slotparts">
            <input type="text" value=0 id=slot0></br>               <!--スロットの目の部分-->
            <input type="button" value="Stop" onclick=stop0()>      <!--Stopボタン-->
        </div>
        <div class="slotparts">
            <input type="text" value=0 id=slot1></br>
            <input type="button" value="Stop" onclick=stop1()>
        </div>
        <div class="slotparts">    
            <input type="text" value=0 id=slot2></br>
            <input type="button" value="Stop"onclick=stop2() >
        </div>

        <div id=output></div>                                        <!--結果の出力部分-->
    </p>
</body>
</html>
```

```Slot.js
var begin=0;    // ゲーム開始を表すフラグ
var stop_flag;  // 目が確定しているスロットを記憶するためのフラグ(配列, 例:stop_flag[0]=1 はスロット0の目が確定していることを示す)
var slot;       // スロットの目として表示する乱数を格納する配列(getElementById().value=乱数　とすれば良いので要らない説あり)
var ans;        // 確定したスロットの目を格納する配列
var setIn;      // setIntervalをclearIntervalで止める必要があるので

// -------スタートボタンが押された際の機能-------------------------
function start()
{
    // if(begin===0)が無いとstartボタン連打でスロットが早くなってしまう
    if(begin===0)
    {
        begin=1;

        // 初期化、startボタンが押されたときに初期化したいのでここに書く
        stop_flag=[0,0,0];
        slot = [0, 0, 0]; 
        ans = [0, 0, 0];
        setIn=[];
        num=0;
    

        run0();                             // start直後にスロットの目が変わらないとヌルゲーになるので最初だけ呼び出し
        run1();
        run2();
        setIn[0]=setInterval(run0, 500);    // 0.5秒の間隔でスロットの目を変える
        setIn[1]=setInterval(run1, 500);
        setIn[2]=setInterval(run2, 500);
    }
}
// -------------------------------------------------------------

// -------スロットの目を変える部分の機能-------------------------
function run0()                                         // スロット0
{                                                       
    slot[0] = Math.floor(Math.random() * 9 + 1);        // 乱数を生成
    document.getElementById("slot0").value = slot[0];   // スロットの目として表示   
}
function run1()                                         // スロット1
{                                               
    slot[1] = Math.floor(Math.random() * 9 + 1);
    document.getElementById("slot1").value = slot[1];
}
function run2()                                         // スロット2
{                                               
    slot[2] = Math.floor(Math.random() * 9 + 1);
    document.getElementById("slot2").value = slot[2];
}
// -------------------------------------------------------------

// -------スロットの目を止める部分の機能-------------------------
function stop0()                                        // スロット0
{                                     
    clearInterval(setIn[0]);                            // 1.スロットの目が変わるのを止める
    ans[0] = document.getElementById("slot0").value;    // 2.Stopボタンを押した際のスロットの目を一度保存
    document.getElementById("slot0").value = ans[0];    // 3.保存したスロットの目をslotのvalueに代入する
    stop_flag[0]=1;                                     // 4.目を止めたスロットとして、フラグを立てる
    result();                                           // 5.結果判定へ
}
function stop1() 
{
    clearInterval(setIn[1]);
    ans[1] = document.getElementById("slot1").value;
    document.getElementById("slot1").value = ans[1];
    stop_flag[1]=1;
    result();
}
function stop2() 
{
    clearInterval(setIn[2]);
    ans[2] = document.getElementById("slot2").value;
    document.getElementById("slot2").value = ans[2];
    stop_flag[2]=1;
    result();
}
// -------------------------------------------------------------

// -------結果判定の機能の部分-----------------------------------
function result()
{
    // 全てのスロットの目が確定しているかの確認
    if((stop_flag[0]===1) && (stop_flag[1]===1) && (stop_flag[2]===1))
    {
        // 全ての目が同じだったら
        if(ans[0]===ans[1] && ans[0]==ans[2])
        {
            window.alert("当たり");
        }
        else
        {
            window.alert("はずれ");
        }
        begin=0;
    }
}
// -------------------------------------------------------------
```

```Slot.css
body{
    background-color: steelblue;
    text-align: center;
}
h1{
    text-align: center;
}
p{
    font-size: 14px;
    text-align: center;
}
.slotparts{     /* class属性で指定するときは頭に. */
    display:inline-block;
}
#slot0{         /* id属性で指定するときは頭に# */
    width:20px;
    text-align: center;
}
#slot1{
    width:20px;
    text-align: center;
}
#slot2{
    width:20px;
    text-align: center;
}
```