LoginSignup
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-06

はじめに

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;
}

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