Javascript ゲーム フィッシャーイェーツ乱数

Question

以前似たような質問をさせていただきました。重複しない乱数処理を以下の国旗ゲームで練習しています。
おかげさまでsortを用いた乱数は使えるようになりましたが、この乱数は穴があると教えていただきました。なので、フィッシャーイェーツの乱数を練習したいのですが、以下のようにすると機能しません。おそらく以下のShuffleとsetQuestionに問題があると思うのですが、アドバイスいただけますか？

var Shuffle = function(arr) {
  var i, j, temp;
  arr = flags.slice();
  i = flags.length;
  if (i === 0) {
    return arr;
  }
  while (--i){
    j = Math.floor(Math.random() * (i + 1));
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

function setQuestion() {
  if(flags.length <= 0) {
    alert('お疲れ様でした。問題は以上です。あなたのスコアは ' + score + '点です。')
  }
flag = Shuffle(flags); 
question.children[0].src = 'img/' + flag[0];
answer = flag[1];
}

念の為、この下に全体コードを貼らせていただきます。

(function() {
'use strict';

var question = document.getElementById('question');
var btn = document.getElementById('btn');
var input = document.getElementById('input');
var check = document.getElementById('check');
var timerLabel = document.getElementById('timer');
var scoreLabel = document.getElementById('score');
var pass = document.getElementById('pass');
var answer = '';
var score = 0;
var timerId;
var isPlaying = false;
var timer;
var flag;
var previous = [];
var flags = [
['Nepal.png', 'ネパール'],
['India.png', 'インド'],
['Netherland.png', 'オランダ'],
['Chili.png', 'チリ'],
['Morocco.png', 'モロッコ'],
['Luxembourg.png', 'ルクセンブルク'],
['Singapore.png', 'シンガポール'],
['Pakistan.png', 'パキスタン'],
['Azerbaijan.png', 'アゼルバイジャン'],
['Jamaica.png', 'ジャマイカ'],
['Belgium.png', 'ベルギー'],
['Guana.png', 'ガーナ'],
['SierraLeone.png', 'シエラレオネ'],
['Korea.png','韓国'],
['Japan.png','日本'],
['China.png','中国'],
['Mongolia.png','モンゴル'],
['Philippines.png', 'フィリピン'],
['Italy.png', 'イタリア'],
['Egypt.png', 'エジプト'],
['Australia.png','オーストラリア'],
['NewZealand.png', 'ニュージーランド'],
].sort(() => Math.random() - 0.5);

function init() {
isPlaying = false;
timer = 100;
score = 0;
scoreLabel.innerHTML = '';
scoreLabel.className = '';
timerLabel.className = '';
timerLabel.innerHTML = timer;
btn.className = '';
check.className = 'invisible';
}

init();

function updateTimer() {
timerId = setTimeout(function() {
timer--;
if(timer <=10) {
  timerLabel.classList.add('danger');
}
timerLabel.innerHTML = timer;
if(timer <= 0) {
alert('Game Overです。お疲れ様でした。あなたのスコアは ' + score + '点です。');
clearTimeout();
init();
return;
}
updateTimer();
}, 1000);
}

var Shuffle = function(arr) {
  var i, j, temp;
  arr = flags.slice();
  i = flags.length;
  if (i === 0) {
    return arr;
  }
  while (--i){
    j = Math.floor(Math.random() * (i + 1));
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

function setQuestion() {
  if(flags.length <= 0) {
    alert('お疲れ様でした。問題は以上です。あなたのスコアは ' + score + '点です。')
  }
flag = Shuffle(flags); 
question.children[0].src = 'img/' + flag[0];
answer = flag[1];
}

btn.addEventListener('click', function() {
if (!isPlaying) {
btn.classList.add('invisible');
check.classList.remove('invisible');
isPlaying = true;
updateTimer();
setQuestion();
}
});

check.addEventListener('click', function() {
if(input.value !== '' && isPlaying) {
score += (input.value === answer)? 1: -1;
if(score < 0) {
  scoreLabel.classList.add('danger');
} else {
  scoreLabel.className = '';
}
scoreLabel.innerHTML = score;
input.value = '';
input.focus();
setQuestion();
}
});

pass.addEventListener('click', function() {
  if(!isPlaying) {
    return;
  }
  setQuestion();
});

})();

Comments

[Lhankor_Mhy]

『機能しません』とは具体的には何が起きていますか？　エラーメッセージがあるならエラーメッセージをご提示ください。

[Lhankor_Mhy]

Netherland.png が存在しない、というエラーのようです。
『機能しません』とは具体的には「画像が見えない」ということだったのですか？

[williamsArk]

すいません。そういうことです。うまく画像が表示されません。フィーシャーのやり方をするまでは映ってたので多分何らかがおかしいと思います

[Lhankor_Mhy]

それとは関係ないだろうなあ、という感じがしてます。
あと、エラーメッセージ内に本名っぽいものが混じってますが、大丈夫ですか？

[williamsArk]

基本的に気にしませんが、一応削除依頼させていただきました。ご指摘ありがとうございました

[think49]

コメントは編集出来ます。履歴も参照されません。

[think49]

"williamsArk 2019/02/16 09:58 編集 あ" では意味が分かりません。後で読んだ人が時系列を追えるように修正して下さい。この質疑応答は質問者のみが参考にするものではなく、共有情報となります。

[williamsArk]

承知いたしました。覚えている限り訂正しました。

Answer 1

flag = Shuffle(flags);

この部分ですが、Shuffle関数の戻り値は、

  arr = flags.slice();
//...
  return arr;

とあるように、flagsをシャッフルしたものであり、flags[0]ではないです。
なので、flag[0]の中身に'Nepal.png'を期待しているかもしれませんが、そうではなくて['Nepal.png', 'ネパール']が入っています。

解決方法ですが、flag[0][0]を参照するか、Shuffle関数の戻り値をarr[0]にするといいかもしれません。

ただ、これ、たぶん、普通の乱数と同じくかぶるんじゃないですか？

Comments

[williamsArk]

おおすごい。動きました。ありがとうございました。ただ確かに重複してしまいますね。spliceとか必要でしょうかね

[Lhankor_Mhy]

まあ、そんな感じですけど、arr 変数に破壊的操作をしても Shuffle 関数内でシャローコピーをしているので無駄っぽいですね。仮引数をそのまま使う感じなら上手くいくのではないでしょうか。

[think49]

現在の流れで非破壊ソートを期待するなら、シャローコピーの代わりに Array#map で flags[0][0] を複製する方法も有ります。
個人的には、データの持ち方を二次元配列から new Map に変更して、Map#values() から配列化してソートする方法を採用しますが…。

[williamsArk]

二次元配列からnew Mapなど難易度が高そうな言葉が多いですね。一個一個噛み砕いていく必要がありそうです。ありがとうございました。

[Lhankor_Mhy]

> think49さん
どっちが早いのか興味深いところですね。
Arrayの実装が、参照のリストや配列であるなら、さほど差がつかないような気もします。

> williamsArkさん
ややこしい話をしてすみません。
要は、
arr = flags.slice();
↑これを削除して、
return arr.pop();
↑戻り値をこうすれば動くんじゃないかな、という話です
（動作確認してません）

Answer 2

関数 setQuestion が呼ばれるたびにシャッフルする必要はない。関数 init で済ませる
配列 flags をシャッフルして flag に配列としてコピーしているのよね。
なので flags.length ではなくflag.length を評価するようにする
変数 anser に代入するときは、元の配列である flag から１つ減らす必要がある
[,anser] = flag.shift ();
みたいにする。

余計なことかもしれないが、
関数 Shuffle の変数 i の使い方に無駄がある。
グローバル変数が沢山あって脳内で解釈しながら理解するのが辛い。
プログラムコードにインデントしてほしい。
HTMLも見てみたいな。
img の src に代入するときは alt にも代入してほしい。
すると画像がなくても確認できるから。（本当はやらなきゃいけないこと）
音声でゲームをしている人には、聞こえちゃいますがｗ

さらに余計なこと、
もし旗が１万種類あったとして、旗の情報を１万個並び替えるより、インデックス番号だけの
配列をソートしたほうが負担が少ないかな。

どうでもよいこと、
ソートによるシャッフルの件だけど、偏りがあるのはしょうがない。
それを逆手にとって出題傾向をなんとなくだけど制御できるのではないか？
旗の数が増えると効率が落ちるけれど、それで十分だと、私も思います。

冒頭で'use strict'という見慣れない文字列を見たが、それらしいの使ってる？ｗ

ちょっと興味がわいたのでソートによるシャッフルを調べてみた。
簡単な問題順に定義して、並び替えると出題傾向を弄れる？
コードがやっつけなのは勘弁！（今になってSVGが習い立てなもんで）
ちょろめと火狐では大きく違うね！こりゃ～つかえないか？

<!DOCTYPE html>
<html lang="ja">
<title>?</title>
<meta charset="utf-8">
<style>
table tbody:first-of-type { display: none; }
</style>

<body>

<table border="1">
  <caption><em>arry.sort (()=>Math.random() - X)</em> のX値による０番の移動した出現分布の累積
  <tbody><tr><th><td><svg width="800" height="120" xmlns="http://www.w3.org/2000/svg"></svg>
</table>

<script>
const
  N = 100,
  A = Array (N).fill().map ((_,i)=>i),
  S = 0.3,
  E = 0.7,
  R = 1000,//繰り返し回数
  C = 0, // 0番がどこに移動するか

  table = document.querySelector ('table'),
  tbody = table.querySelector ('tbody:first-of-type'),
  rect = document.createElementNS ('http://www.w3.org/2000/svg', 'rect'),
  setAtr = (e,o)=>[...Object.entries(o)].forEach(([a,b])=>e.setAttribute(a,b));

setAtr (rect, { width: 8, style: 'fill:rgb(0,0,255)'});

function sikakuka (n, ary) {
  let tb = table.appendChild (tbody.cloneNode (true));
  let [th, svg] = tb.querySelectorAll ('th, svg');
  th.textContent = "x = " + n.toFixed (3);
  ary.forEach ((a, i) =>setAtr (svg.appendChild (rect.cloneNode (false)), {x: i*8, y:120-a, height: a}));
}


for (let i = S; i < E; i += .025) {
  let c = Array (N).fill (0);
  for (let j = 0; j < R; j++) {
    let a = A.slice ();
    a.sort (()=>Math.random () - i);
    c[a.indexOf (C)]++;
  }
  sikakuka (i, c);
} 

</script>

Comments

[williamsArk]

すいません。詳細な説明ありがとうございました。ただ用語が難しいですね。もしよろしければaltの代入についてもう少し教えていただけませんか？

[think49]

To: hai_hai さん

> インデックス番号だけの配列をソートしたほうが負担が少ないかな。
前質問で回答しています。
https://teratail.com/questions/174483#reply-259820

> 冒頭で'use strict'という見慣れない文字列を見たが、それらしいの使ってる？ｗ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode

[think49]

To: williamsArk さん
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Attributes
https://www.google.com/search?q=HTMLImageElement+alt

[退会済みユーザー]

think49 さん、ご丁寧にありがとね。<babu_**2..... ^^;
ステップアップしてる質問者さんを静観せずに居られなくなって、ついでしゃばった。

HTMLではその構造にも使われている要素にも意味を持たせるべき。
その使われている画像がいったい何を意味するのか？明示させなければならない。
視覚障害者だって何かしらのブラウザ等で聞いているかもしれないでしょ！？

[williamsArk]

お二方ともかなり役立つ情報ありがとうございました。後ほど確認させていただきまして、また質問がありましたらお尋ねするかもしれません。