重複しないランダム表示に成功！
５０個用意した「お題ワード」をランダム表示させることには成功していたのですが、ずっと繰り返していくと、前に出たワードが再び表示されてしまうことがありました。クリックするたびに、ランダムに配列番号を取得し直して書き換えているだけですから、当然です。
そこで、いろんなHowtoサイトを見まくって、解決方法を模索した結果、スタート前に配列そのものをシャッフルしてしまい、あとは順番に表示するという方法に辿り着きました。それを実現してくれるのがフィッシャー・イェーツのシャッフル (英: Fisher–Yates shuffle) と呼ばれるアルゴリズムです。
HTMLファイル
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>
<title>FlushCard</title>
<link rel=”stylesheet” href=”stylesheet.css”>
</head>
<body>
<div class=”header”>
<div class=”header-logo”>Hiroshare</div>
<div class=”header-list”>
<ul>
<li>ホームページへ（工事中）</li>
<li>もう一度</li>
<li>お題のジャンルをカスタマイズする（工事中）</li>
</ul>
</div>
</div>
<div class=main>
<p id=”text”>お題</p>
<button type=”button” id=”next”>次へ</button>
<p id=”caution”>※リロードでシャッフルスタート</P>
</div>
<script src=”script.js”></script>
</body>
</html>
JavaScriptファイル
const words = [“サル”,”キリン”,”ライオン”,”ゾウ”,”ウシ”,”ゴリラ”,”ウサギ”,”ラッコ”,”ワニ”,”パンダ”,”ネコ”,”カエル”,”ツル”,”クマ”,”タヌキ”,”ブタ”,”ペンギン”,”バッタ”,”ヘビ”,”ウマ”,”キツネ”,”チョウ”,”ニワトリ”,”カタツムリ”,”アザラシ”,”カンガルー”,”イカ”,”ハムスター”,”コアラ”,”タコ”,”クジラ”,”ネズミ”,”カマキリ”,”ザリガニ”,”サメ”,”カニ”,”クワガタ”,”ムササビ”,”クラゲ”,”カメ”,”ヤギ”,”シマウマ”,”カバ”,”ヒツジ”,”サイ”,”シカ”,”イノシシ”,”アライグマ”,”リス”,”ラクダ”];
var a = words.length;
while (a) {
var j = Math.floor( Math.random() * a );
var t = words[–a];
words[a] = words[j];
words[j] = t;
}
const text=document.getElementById(“text”);
document.getElementById(“next”)?.addEventListener(“click”, () => {
text.textContent = words[a];
a++;
});
JavaSctiptファイルの真ん中あたりにあるかたまり（赤字）が、フィッシャー・イェーツのシャッフルです。この部分で、”words”と名付けられた配列(５０種類の生き物)をシャッフルし、その下のかたまりで「次へ」(id=”next”)をクリックするたびに、前から順に「お題」のところ(id=”text”)へ置き換える・・・というコード（プログラム）になっているのです。
実際に重複なしで全部が現れるか、ブラウザ上で動かし、タブレットで撮影したコードの配列部分を塗りつぶしながら確認してみました。
コーディングに自信があれば、不要な作業ですが、本当に一度もせず全部を塗りつぶせたときは、やっぱり感動しました！
今後の課題
「次へ」を、「正解」と「パス」に分け、「正解数を表示するカウンター」をつけたいです。あとは「タイマー」がつけば、アプリとしての機能は合格ラインと考えています。（いつになるやら）
ただし、その前にどんなデバイスでも適度なバランスで表示されるようなCSSの改良をしなければなりませんね。。。
コメント