teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

構文を付け加えました。

2019/01/23 12:20

投稿

naruriru
naruriru

スコア18

title CHANGED
@@ -1,1 +1,1 @@
1
- 配列をシャッフルしたい。
1
+ Javascriptでシャッフルしたい。
body CHANGED
@@ -1,9 +1,60 @@
1
- liタグを使い、indexという配列を作り
2
- ここに更にindexをシャッフルしたいのですが、どのように書いたら良いのでしょうか。
1
+ indexをシャッフルしたいのですが、どのように書いたら良いのでしょうか。
3
2
  Collections.shuffle(index);
4
3
  など加えてみましたが、上手くいきません。
5
4
  よろしくお願いします。
5
+
6
6
  ```
7
+ //カードを回転させる関数
8
+ function kaiten(){
9
+ for(i=1; i<=44; i++) {
10
+ //円軌道をさせる
11
+ var dd = kakudo[i-1]+d;
12
+ $("#card li").eq(i-1).css({
13
+ left: (r*Math.cos(dd*Math.PI/180)) + 'px',
14
+ top: (r*Math.sin(dd*Math.PI/180)) + 'px'
15
+ });
16
+ //カードを回転させる
17
+ $("#card li").eq(i-1).rotate(dd*i);
18
+ }
19
+ d++;
20
+ }
21
+
22
+ //カードが閉じる
23
+ function cardClose(){
24
+ $("#card li:eq("+index+")").stop().animate({ left: "75"}, 500);
25
+ $("#card li:eq("+index+") img").stop().animate({ width: "0",height: "200px"}, 500, cardOpen);
26
+ }
27
+ //カードが開く
28
+ function cardOpen(){
29
+ $("#card li:eq("+index+") img").attr("src","image/card"+(index+1)+".jpg");
30
+ $("#card li:eq("+index+") img").stop().animate({ width: "150px",height: "200px"}, 500);
31
+ $("#card li:eq("+index+")").stop().animate({ left: "0"}, 500, message);
32
+ }
33
+
34
+ function message(){
35
+ var msg = new Array(44)
36
+ msg[0] = 'テキストA'
37
+ msg[1] = 'テキストB'
38
+ msg[2] = 'テキストC'
39
+ msg[3] = 'テキストD'
40
+ msg[4] = 'テキストE'
41
+
42
+
43
+
44
+
45
+
46
+ document.body.insertAdjacentHTML('afterend', msg[index]);
47
+ }
48
+
49
+ $(function(){
50
+ for(i=0; i<44; i++) {
51
+ kakudo.push(Math.round(Math.random () * 360 + 0.5));
52
+ }
53
+ timer = setInterval(function(){
54
+ kaiten();
55
+ },40);
56
+ ```
57
+ ```
7
58
  $("#card li").click(function(){
8
59
  index = $("#card li").index(this); //選択したカードの順番をindexに保存
9
60
  $("#card li:not(:eq("+index+"))").animate({ opacity: "0"}, 1000); //選択したカード以外の透明度を0に
@@ -12,4 +63,9 @@
12
63
  $("#card li:eq("+index+")").animate({ top: "-180",left: "0"}, 1000, cardClose); //選択したカードを一番初めの位置に戻した後cardClose()を実行
13
64
  });
14
65
  });
15
- ```
66
+ ```
67
+ カード自体回転しながら、円を描くように回るのですが
68
+ このカードの配置が1から(0から??)順に配置をしているので、カードの枚数が多くなった時に
69
+ 番号の若いものは下に埋もれてしまい、ほとんど30以降あたりのカードしか捲ることが出来ないので
70
+ この配置の時点でカードをシャッフルしたいのです。
71
+ よろしくお願い致します。