JS　画像のシャッフル機能

画像のシャッフル機能を作りたいと思っています。
現在のコードだと一部重複して画像が表示されてしまいます。
これを重複せずに表示したいです。
ぜひお力添えいただければと思います。

var cards = ["../images/001.png","../images/002.png","../images/003.png","../images/004.png","../images/005.png",
"../images/006.png","../images/007.png","../images/008.png","../images/009.png","../images/010.png",
"../images/011.png","../images/012.png","../images/013.png",
"../images/101.png","../images/102.png","../images/103.png","../images/104.png","../images/105.png",
"../images/106.png","../images/107.png","../images/108.png","../images/109.png",
"../images/110.png","../images/111.png","../images/112.png","../images/113.png",
"../images/201.png","../images/202.png","../images/203.png","../images/204.png","../images/205.png",
"../images/206.png","../images/207.png","../images/208.png","../images/209.png","../images/210.png",
"../images/211.png","../images/212.png","../images/213.png",
"../images/301.png","../images/302.png","../images/303.png","../images/304.png","../images/305.png","../images/306.png",
"../images/307.png","../images/308.png","../images/309.png","../images/310.png","../images/311.png","../images/312.png","../images/313.png",
];
console.log(random(cards,1));


for (var i = 0;i < 4; i++){
  var tr1 = document.createElement("tr");
  for(var a = 0;a < 13; a++){
    var td1 = document.createElement("td");
    tr1.appendChild(td1);
    td1.id = "card";
    td1.innerHTML = "<img src=" + random(cards,1) +  ">";
  }
  document.getElementById("wrap").appendChild(tr1);
}
function random(array, num) {
  var a = array.concat(); 
  var r = [];
  var l = array.length;
  var n = Math.min(num, array.length);
  while(n-- > 0) {
      var i = Math.floor(Math.random() * l);
      r.push(a[i]);
      a[i] = a[--l];
  }
  return r;
}

回答2件

ベストアンサー

質問文のコードの random(cards,1) というのは、52枚のカードからランダムで1枚選ぶだけで、シャッフルしているわけではありません。もちろん何度も呼べば同じカードが返ることがあります。

const shuffled = random(cards, cards.length) とすると shuffled はシャッフルされた配列になるので、shuffled を順に表示すればよいでしょう。

投稿2022/06/01 03:46

int32_t

総合スコア19573

javascript
1let cards = ["../images/001.png","../images/002.png","../images/003.png","../images/004.png","../images/005.png",
2"../images/006.png","../images/007.png","../images/008.png","../images/009.png","../images/010.png",
3"../images/011.png","../images/012.png","../images/013.png",
4"../images/101.png","../images/102.png","../images/103.png","../images/104.png","../images/105.png",
5"../images/106.png","../images/107.png","../images/108.png","../images/109.png",
6"../images/110.png","../images/111.png","../images/112.png","../images/113.png",
7"../images/201.png","../images/202.png","../images/203.png","../images/204.png","../images/205.png",
8"../images/206.png","../images/207.png","../images/208.png","../images/209.png","../images/210.png",
9"../images/211.png","../images/212.png","../images/213.png",
10"../images/301.png","../images/302.png","../images/303.png","../images/304.png","../images/305.png","../images/306.png",
11"../images/307.png","../images/308.png","../images/309.png","../images/310.png","../images/311.png","../images/312.png","../images/313.png",
12];
13const suffle=x=>x.map(y=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
14cards=suffle(cards);
15console.log(cards);
16