#35 配列のランダムシャッフルで、画像シャッフルを作ってみた【ぴよぴよコーダーの開発日記】

2020年6月14日 10:52

画像のシャッフルを作ってみた。まずは　デモ

画像シャッフルの依頼があったんで、配列の中に画像をぶっこんでランダムに入れ替えて表示させればなんとかなりそうだなと。

ランダム値を発生させてソートさせるのは、下記を参考にしました。理論上は偏りなくシャッフルできるアルゴリズムとして有名な「Fisher–Yates shuffle」らしい。なんか、かっこいい。

参考：JavaScript：配列内の要素をシャッフル（ランダムソート）する方法

参考：フィッシャー–イェーツのシャッフル

アルゴリズムは、ソースと説明読んだけど、なんとなーくわかった気が。。

スタート、ストップボタンの切り替えとかは下記を参考にしました。

参考：jQueryで作るビンゴマシン

ソースだよ。HTMLは

<p class="shuffle2"><img src="img/default.png" alt="なにがでるかな"></p>
<p><button>Start!</button></p>

CSSは、、てきとう。。

img { width: 100% }
.shuffle2 {
   display: flex;
   justify-items: center;
   align-items: center;
   width: 300px;
   height: 300px;
}
button {
 height: 60px;
 width: 300px;
 font-size: 23px;
 margin-top: 20px;
}

JSは下記

const array = [
           '<img src="img/furit_mark02_melon.png" alt="メロン">',
           '<img src="img/furit_mark04_orange.png" alt="オレンジ"> ',
           '<img src="img/furit_mark09_kiwi.png" alt="キューイ">',
           '<img src="img/furit_mark10_pineapple.png" alt="パイナップル">',
           '<img src="img/furit_mark11_ichigo.png" alt="いちご">',
           '<img src="img/furit_mark14_suika.png" alt="スイカ"> ',
           '<img src="img/furit_mark17_cherry.png" alt="さくらんぼ">',
           '<img src="img/furit_mark18_mikan.png" alt="みかん">',
           '<img src="img/kuji_ken1_ooatari.png" alt="大当たり">',
           '<img src="img/kuji_ken2_atari.png" alt="当たり">'            
       ]
const shuffle = ([...array]) => {
 for (let i = array.length - 1; i >= 0; i--) {
   const j = Math.floor(Math.random() * (i + 1));
   [array[i], array[j]] = [array[j], array[i]];
 }
 return array;
}

let start = false;  //スタートボタンのフラグ
let shuffleId;
const changeImg = () => {
 shuffleId = setInterval(function(){
   for(let bun2 of shuffle(array)){//シャッフル後の配列の要素繰り返し
       $('.shuffle2').html(bun2); 
   }
 }, 80);

}
$(function(){
$('button').on('click', function() {

  //スタートボタンをストップボタンに切り替え
  if(start == false) {
    $(this).text('STOP');
    changeImg();
    start = true;

  //ストップボタンをスタートボタンに切り替え
  } else {
    $(this).text('START');
    clearInterval(shuffleId);
    start = false;
  }
});
});