JavaScriptでこんなことしたい。
- 文字列などの配列がある
- それをシャッフル表示したい
- ルーレットみたいな感じで
ちょうど以下動画のような動きです。
意外と簡単に実現できたので、
文字列配列のシャッフル表示を紹介します。
１．ここで用意したHTMLとCSS
ここでは次のHTML構成を用意しました。
▼ こんなHTML構成
|
1 2 3 4 5 6 7 |
<div class="wrap"> <div>今日のラッキーカラーは…</div> <div id="answer">???</div> <div> <button id="start">スタート</button> </div> </div> |
▼ 装飾用のCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** ラップ要素 **/ .wrap{ display: flex; flex-direction: column; align-items: center; } /** シャッフル表示要素 **/ #answer{ padding: 12px 0; font-size: 28px; font-weight: bold; } /** 点滅アニメ **/ .blink{ animation: blinkAnime .5s infinite alternate; } @keyframes blinkAnime{ 0% { transform:scale(1); } 100%{ transform:scale(1.2); } } |
▼ こんなレイアウト
例として上記構成にしました。
動作はシンプルで #start スタートボタンを押したら #answer に文字列がランダムにシャッフル表示され、任意時間後にラッキーカラーが表示される感じです。
ちなみにanimationプロパティは以下参照
https://developer.mozilla.org/ja/docs/Web/CSS/animation
ここまでで下準備ができました。
２．シャッフル表示するコードを追加
ということで肝心のコードについて。
簡易的なシャッフル表示はこうなります。
▼ シャッフル表示のJavaScriptコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/// シャッフルさせる文字列配列 const luckyColors = [ 'レッド', 'オレンジ', 'イエロー', 'グリーン', 'ブルー', 'インディゴ', 'パープル' ]; /// シャッフル表示要素 const $answer = document.getElementById('answer'); /// スタートボタン const $start = document.getElementById('start'); $start.onclick = function(){ $start.disabled = true; const timerId = setInterval(()=>{ /// ランダムに配列から選んで表示。 /// 50ミリ秒間隔でシャッフル。 $answer.textContent = luckyColors[ Math.floor(Math.random()*luckyColors.length) ]; }, 50); setTimeout(()=>{ /// シャッフル表示停止 clearInterval(timerId); /// 点滅アニメを再生 $answer.classList.add('blink'); }, 3000); } |
何をしてるかはコメントを参照
やってることは setInterval() を使って50ミリ秒ごとに文字列配列からランダム取り出し ⇒ 要素に表示 ⇒ 3000ミリ秒後にシャッフル停止 という流れです。（参考 ： https://developer.mozilla.org/ja/docs/Web/API/setInterval）
あとランダムな整数の生成は以下ページで解説しました。
以下のようなシャッフル表示になります。
シャッフル間隔などは調整してください。
３．緩急をつけてシャッフルしてみる
ここからは応用編です。
次のように緩急つけてみます。
- 最初は高速でシャッフル
- 徐々にシャッフル速度を落とす
- 最後に選ばれた文字列を表示
先ほどのコードを少し改変すれば可能です。
▼ このようにコードを改変
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/// シャッフルさせる文字列配列 const luckyColors = [ 'レッド', 'オレンジ', 'イエロー', 'グリーン', 'ブルー', 'インディゴ', 'パープル' ]; /// シャッフル表示要素 const $answer = document.getElementById('answer'); /// スタートボタン const $start = document.getElementById('start'); $start.onclick = function(){ $start.disabled = true; shuffle(()=>{ /// ランダムに配列から選んで表示。 $answer.textContent = luckyColors[ Math.floor(Math.random()*luckyColors.length) ] }, 1, 500); /// 緩急つけてシャッフル表示させる関数。 /// @callback UI更新用の関数 /// @weight シャッフル間隔の重さ /// @threshold シャッフル停止の閾値 function shuffle(callback,weight=1,threshold=500){ setTimeout(()=>{ callback(); if(++weight*20 < threshold){ /// 次のシャッフル実行 shuffle(callback,weight,threshold); }else{ /// 点滅アニメを再生 $answer.classList.add('blink'); } }, weight*20); } } |
何をしてるかは（以下略
先ほどと違うのは setTimeout() の中で閾値を超えるまで、再帰的にshuffle関数を呼び出してることです。もちろん再帰を使わなくても実装可能です。
以下動画のようなシャッフル表示になります。
シャッフル方法は各自で工夫してください。
以上、文字列配列のシャッフル表示でした。ではまた
