Javascriptでシャッフルしたい。

Question

indexをシャッフルしたいのですが、どのように書いたら良いのでしょうか。
Collections.shuffle(index);
など加えてみましたが、上手くいきません。
よろしくお願いします。

//カードを回転させる関数
function kaiten(){
  for(i=1; i<=44; i++) {
    //円軌道をさせる
    var dd = kakudo[i-1]+d;
    $("#card li").eq(i-1).css({
      left: (r*Math.cos(dd*Math.PI/180)) + 'px',
      top: (r*Math.sin(dd*Math.PI/180)) + 'px'
    });
    //カードを回転させる
    $("#card li").eq(i-1).rotate(dd*i);
  }
  d++;
}
 
//カードが閉じる
function cardClose(){
  $("#card li:eq("+index+")").stop().animate({ left: "75"}, 500);
  $("#card li:eq("+index+") img").stop().animate({ width: "0",height: "200px"}, 500, cardOpen);
}
//カードが開く
function cardOpen(){
  $("#card li:eq("+index+") img").attr("src","image/card"+(index+1)+".jpg");
  $("#card li:eq("+index+") img").stop().animate({ width: "150px",height: "200px"}, 500);
  $("#card li:eq("+index+")").stop().animate({ left: "0"}, 500, message);
}

function message(){
    var msg = new Array(44)
        msg[0] = 'テキストA'
        msg[1] = 'テキストB'
        msg[2] = 'テキストC'
        msg[3] = 'テキストD'
        msg[4] = 'テキストE'





        document.body.insertAdjacentHTML('afterend', msg[index]);
}
 
$(function(){
  for(i=0; i<44; i++) {
    kakudo.push(Math.round(Math.random () * 360 + 0.5));
  }
  timer = setInterval(function(){
    kaiten();
  },40);

  $("#card li").click(function(){
    index = $("#card li").index(this);  //選択したカードの順番をindexに保存
      $("#card li:not(:eq("+index+"))").animate({ opacity: "0"}, 1000);  //選択したカード以外の透明度を0に
    clearInterval(timer);  //kaiten()の動きを止める
    $("#card li:eq("+index+")").rotate({ animateTo: 0});  //選択したカードの角度を0°まで回す
    $("#card li:eq("+index+")").animate({ top: "-180",left: "0"}, 1000, cardClose);  //選択したカードを一番初めの位置に戻した後cardClose()を実行
  });
});

カード自体回転しながら、円を描くように回るのですが
このカードの配置が１から（０から？？）順に配置をしているので、カードの枚数が多くなった時に
番号の若いものは下に埋もれてしまい、ほとんど30以降あたりのカードしか捲ることが出来ないので
この配置の時点でカードをシャッフルしたいのです。
よろしくお願い致します。

Comments

[tino1231]

index = $("#card li").index(this);
ますindexには数値が返ってくるので配列にはなりません。
提示されているプログラムで何をしようとしているのか説明を追記してほしいです。

[naruriru]

追記致しました。
説明がなってなくてすみません(-_-;)

[退会済みユーザー]

シャッフルって何をしたいのですか？
てっきりカードを配る前に行うシャッフル、Kei344さんの回答にあるように、カードの数字をカードの並びに関係なくしたいのだと思っていましたが、下のカードに触る(Clickする)ことが出来なくなったから、上に表示されたカードを消したいように読めます。

あと、参考にしたページがあるなら提示しましょう。
https://magnets.jp/web_design/6075/

[naruriru]

最初の方の理解で合っています。
カードの並び自体をシャッフルしたいのです。

Answer 1

Collectionsの中身が提示されていませんが、関数を自前で作るかライブラリを使用しないとシャッフルできません。

【【JavaScript】配列のシャッフルする（要素をランダムに並び替える） | Black Everyday Company】
https://kuroeveryday.blogspot.com/2017/02/array-shuffle.html

【JavaScript で配列のシャッフル - HAM MEDIA MEMO】
https://h2ham.net/javascript-で配列のシャッフル

Comments

[naruriru]

やはり、また別に配列を作るのが１番手っ取り早いのかなと思っております。
ありがとうございました。

Answer 2

下記の手順でできます
0. li要素の数を変数ｘに入れる
0. li要素の数の回数分だけ繰り返し、要素のhtmlを配列aに入れる
0. aで、ランダムな値どうしを引き算した値を返しソートする
0. ulを空にする
0. xの回数分だけ繰り返し処理をする
0. 繰り返し処理の中でli要素を作りの中にaを順番に入れる
0. 繰り返し処理の中で作ったli要素をulに入れる

Comments

[naruriru]

ありがとうございます！
調べながら書いてみようと思います。

Answer 3

コード提示はしませんよ。(まともにJavaScriptやる気が無かったので)

kaitenkakudoに初期位置をランダムで設定しているので、見た目としては最初から順序はバラバラですよね。

…そうじゃないと言いたいのはわかりますが、提示されたコードで使用されているindexはカードであるliオブジェクトの管理番号のようなものですから、この値を変更することはよろしくないと思います。(そもそも出来るのかも知りません)

したがって、別途カード枚数と同じ要素数の配列を用意して、その要素の値をカードの値とします。カードと値を紐付けは、indexと配列の要素番号で行います。

配列のシャッフルの仕方はkei34さんの回答を参照してください。

参考にされているであろうサイトの美しすぎるカードゲームjQueryで作る神経衰弱で同様のことをやられていますよ。

Comments

[naruriru]

説明がうまく出来ずすみません。
まだかじりながら、一つ一つ解読しながら書いてる程度なもので…。

index自体は回転の設定に必要なものなので、恐らくいじれないだろうというのは分かります(何となくですが。)
カードの枚数を増やしていくと、カードがほぼ重なってしまい、物理的に下のカードがクリック出来ないので、
function cardOpen(){
の中をランダムにして、messageと紐付けるしかないかなと思い始めてます(;´д｀)
ありがとうございます。