スロット（絵柄合わせ）をある確率で揃うようにしたいです。

Question

前提・実現したいこと

初めまして、プログラミング初心者です。
現在、「HTML」,「CSS」,「jQuery」のみでスロット（横に３列並んだもの＝横回転のもの）を作成しています。
【現状】
・スタートボタンを押すと上から順に絵柄（各５つ）が回転が始まる。
・ストップボタンを押すと画像が上から順に止まる。
・閉じるボタンでウィンドウが閉じる。
というように、１連の流れはできました。

【実現したいこと】
★ 確率に応じて以下のとおりに絵柄が揃う（３つのパーツが合わさったときに１つの絵になる）ようにしたいです。
（３０％の確率で絵柄Ａ、１０％=Ｂ、６％=Ｃ、３％=Ｄ、１％=Ｅ）

★ リーチのときとそうでないときで、最後のリールが止まる時間を調整したいです。

【追記・・・２０１９/４/１】
★ jQueryの改訂したコードで動くのですが、「回転するスピード」と「最後のリールが止まる時間」を変更しても変化しません。エラーは出ません。

ご教授よろしくお願いいたします。

  <div id="box">
    <div id="board"><div id="msg"></div></div>

    <div id="reel">

          <div id="reel1">
              <img src="img/0.png">
              <img src="img/3.png">
              <img src="img/6.png">
              <img src="img/9.png">
              <img src="img/12.png">
            </div>

            <div id="reel2">
              <img src="img/1.png">
              <img src="img/4.png">
              <img src="img/7.png">
              <img src="img/10.png">
              <img src="img/13.png">
            </div>

            <div id="reel3">
              <img src="img/2.png">
              <img src="img/5.png">
              <img src="img/8.png">
              <img src="img/11.png">
              <img src="img/14.png">
            </div>

    </div>

    <button id="btn"><div id=txt>START</div></button>

  </div>

＊＊＊改正前＊＊＊

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
$(function(){
//メッセージを点滅させる処理
setInterval(function(){
$("#msg").fadeOut(1000,function(){
$(this).fadeIn(800)
});5000;
});

var num=0;
$("#btn").on("click", function(){
$(this).data("click", ++num);
var click=$(this).data("click");
if(click===1){
//スタートボタンを押した時の処理
$("#txt").fadeOut(300);
$("#btn").width("131.67px") .height('42px');
$("#msg").html('');
$("#msg").css("color", '#006');
$("#btn").prop("disabled", true);

//リール1の回転処理
$("#reel1").slick({
autoplay:true,
autoplaySpeed:0,
slidesToShow:1,
initialSlide:0,
arrows:false,
speed:105,
infinite:true,
cssEase:"linear",
pauseOnFocus:false,
pauseOnHover:false,
});

//リール2の回転処理
setTimeout(function(){
$("#reel2").slick({
autoplay:true,
autoplaySpeed:0,
slidesToShow:1,
initialSlide:0,
arrows:false,
speed:85,
infinite:true,
cssEase:"linear",
pauseOnFocus:false,
pauseOnHover:false,
});
}, 800),

//リール３の回転処理
setTimeout(function(){
$("#reel3").slick({
autoplay:true,
autoplaySpeed:0,
slidesToShow:1,
initialSlide:0,
arrows:false,
speed:90,
infinite:true,
cssEase:"linear",
rtl:false,
pauseOnFocus:false,
pauseOnHover:false,
});
}, 2000),

//ボタンの有効化
setTimeout(function(){
$("#btn").prop("disabled", false);
$("#txt").html('STOP');
$("#txt").fadeIn(300);
}, 2300)


}if(click===2){
//ストップボタンを押した時の処理
$("#txt").html('CLOSE');
$("#btn").prop("disabled", true);
$("#btn").width("131.67px") .height('42px');

//リール１の処理
$("#reel1").slick("slickPause");

//リール２の処理
setTimeout(function(){
$("#reel2").slick("slickPause");
}, 1000),

//リール３の処理
setTimeout(function(){
$("#reel3").slick("slickPause");
}, 2000),

//ボタンの有効化
setTimeout(function(){
$("#btn").prop("disabled", false);
}, 2000)

}if(click===3){
window.close();
}
});

});

</script>

＊＊＊改正版（２０１９/4/ 1）＊＊＊

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
$(function(){
//メッセージを点滅させる処理
  setInterval(function(){
      $("#msg").fadeOut(1000,function(){
        $(this).fadeIn(800)
      });5000;
    });
    var Reel=document.getElementById("#reel");
    //画像の配列
    var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
    "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
    "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];

    //当たりとなる変数
    var set1=img[0, 1, 2];
    var set2=img[3, 4, 5];
    var set3=img[6, 7, 8];
    var set4=img[9, 10, 11];
    var set5=img[12, 13, 14];

    //リーチのときの変数（３番目のリールが止まる時間を延ばすため）
    var closeset=img[
    [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
    [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
    [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
    [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
    [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
    ];
    //ハズレの変数（３番目のリールが止まる時間を早くするため）
    var noset=img[
    [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
    [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
    [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
    [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
    [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
    [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
    [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
    [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
    [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
    [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
    [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
    [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
    [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
    [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
    [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
    [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
    [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
    [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
    [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
    [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
    ];
    //出現確率
    var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
      +closeset+noset).length);
    if(chance===0){
      $("#reel").attr('src', set5);
    }else if(chance>=1&&chance<=2) {
      $("#reel").attr('src', set4);
    }else if(chance>=3&&chance<=8) {
      $("#reel").attr('src', set3);
    }else if(chance>=9&&chance<=18) {
      $("#reel").attr('src', set2);
    }else if(chance>=19&&chance<=38) {
      $("#reel").attr('src', set1);
    }else{
      $("#reel").attr('src', closeset && noset);
    }

   //リール３がストップする時の変数
    var reachimg=img[
      [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
      [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
      [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
      [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
      [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
      [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
    ];

var num=0;
  $("#btn").on("click", function(){
    $(this).data("click", ++num);
    var click=$(this).data("click");
if(click===1){
      //スタートボタンを押した時の処理
      $("#txt").fadeOut(300);
      $("#btn").width("131.67px") .height('42px');
      $("#msg").css("color", '#006');
      $("#btn").prop("disabled", true);

      //リール1の回転処理
      $("#reel1").slick({
        autoplay:true,
        autoplaySpeed:0,
        slidesToShow:1,
        initialSlide:0,
        arrows:false,
        speed:60,
        infinite:true,
        cssEase:"linear",
        pauseOnFocus:false,
        pauseOnHover:false,
      });

      //リール2の回転処理
      setTimeout(function(){
        $("#reel2").slick({
          autoplay:true,
          autoplaySpeed:0,
          slidesToShow:1,
          initialSlide:0,
          arrows:false,
          speed:65,
          infinite:true,
          cssEase:"linear",
          pauseOnFocus:false,
          pauseOnHover:false,
        });
       }, 800),

      //リール３の回転処理
      setTimeout(function(){
        $("#reel3").slick({
          autoplay:true,
          autoplaySpeed:0,
          slidesToShow:1,
          initialSlide:0,
          arrows:false,
          speed:55,
          infinite:true,
          cssEase:"linear",
          rtl:false,
          pauseOnFocus:false,
          pauseOnHover:false,
        });
       }, 2000),

      //ボタンの有効化
      setTimeout(function(){
        $("#btn").prop("disabled", false);
        $("#txt").html('STOP');
        $("#txt").fadeIn(300);
        $("#msg").html('STOPを押してね！');
       }, 2300)


}if(click===2){
      //ストップボタンを押した時の処理
      $("#txt").html('CLOSE');
      $("#btn").prop("disabled", true);
      $("#btn").width("131.67px") .height('42px');

      //リール１の処理
      $("#reel1").slick("slickPause");

      //リール２の処理
      setTimeout(function(){
        $("#reel2").slick("slickPause");
      }, 1000),

      //リール３の処理
     //要素に応じて最後のリールが止まる時間をずらす処理
     $("#reel").each(function(){
       if(reachimg===0 && reachimg<25){
         setTimeout(function(){
           $("#reel3").slick("slickPause");
         }, 5000);
       }else{
         setTimeout(function(){
           $("#reel3").slick("slickPause");
         }, 2000);
       }
     });
      //ボタンの有効化
      setTimeout(function(){
        $("#btn").prop("disabled", false);
        $("#msg").html('CLOSEを押してね！');
      }, 2000)

}if(click===3){
        window.close();
      }
});

});

</script>

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

簡単に考えるのであれば、役と画像のセットを先に定義するのがいいと思います。

A=画像0,1,2
B=画像3,4,5
C=画像6,7,8
D=画像9,10,11
E=画像12,13,14

ハズレも同様にセットしておくと作り易そうです。

F0=画像0,1,5
F1=画像3,1,8
等々。

アタリとハズレ(A～Fn)の確率が合計100%になるようにして、STARTボタンを押したときに抽選し、
表示するタイミングで、そのセットの画像を表示します。

ただしJavaScriptであればだれでもソースを見ることができ、抽選の仕組みがバレますので
ご注意ください。
抽選の仕組みを隠したい場合は、サーバ(PHP等)で抽選するようにしてAjaxで抽選結果を取得する
のがいいと思います。

Comments

[NULE]

ご回答いただきありがとうございました。

PHPやAjaxについては無知なため、まずはアドバイスいただいたことをjQuery上で下記のように作成してみました。

ちなみに『if (reachimg===0; reachimg<25;){』のがエラーになっていますが、原因がわかりません。

ご教授お願いいたします。

[tabuu]

reachimg===0、かつ、reachimg<25
であれば
if (reachimg===0 && reachimg<25){
ですかね。

コメント欄にソースコード書いてもインデント反映されないので、
質問本文を編集して書いていただくほうが分かり易いのでおすすめです。

[NULE]

ありがとうございます。
コードを直したところ、エラーが表示されなくなりました。
ですが、条件に応じて最後のリールが止まる時間を変更しても、「if」の条件が反映されず、全て「else」の条件になってしまいます。また、リールの回転するスピード(slick.js内)も数字を変えても変化せず、
エラーが出ないため原因がわかりません。
アドバイスよろしくお願いいたします。

[tabuu]

JavaScriptは苦手なのであまりアドバイスできませんが、

>if (reachimg===0 && reachimg<25){
これだと0かつ25より小さいなので、0の場合しか真にならないですね。
想定する条件で書き直してみてください。