回答編集履歴

1

ちょうせい

2019/10/21 05:05

投稿

yambejp
yambejp

スコア114839

test CHANGED
@@ -1 +1,177 @@
1
1
  非同期でもないないのでdeferredで処理しなければよいのでは?
2
+
3
+
4
+
5
+ # sample
6
+
7
+ 非同期になる要素がないのでdeferredを外したバージョンのsampleをあげておきます
8
+
9
+ ちょっと雑に書いたのでもうすこし調整が必要かも
10
+
11
+ (挙動が違うならご指摘ください)
12
+
13
+ ```javascript
14
+
15
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16
+
17
+ <script>
18
+
19
+ $(function(){
20
+
21
+ var count=0;
22
+
23
+ var my_hand="";
24
+
25
+ var pc_hand="";
26
+
27
+ $('#start').on('click',function(){
28
+
29
+ $('#start').prop('disabled',true);
30
+
31
+ $('#my_hand_id').text("");
32
+
33
+ my_hand="";
34
+
35
+ var kakegoe=["じゃん","けん","ぽん"]
36
+
37
+ $('#pc_hand_id').text("");
38
+
39
+ var timerId=setInterval((function janken(){
40
+
41
+ if(count==0) pc_hand=["グー","チョキ","パー"][parseInt(Math.random()*3)];
42
+
43
+ console.log(pc_hand);
44
+
45
+ if($('#instruction').text()=="あい"){
46
+
47
+ $('#my_hand_id').text("");
48
+
49
+ $('#pc_hand_id').text("");
50
+
51
+ }
52
+
53
+ if(kakegoe.length<=count){
54
+
55
+ clearInterval(timerId);
56
+
57
+ count=0;
58
+
59
+ $('#pc_hand_id').text(pc_hand);
60
+
61
+ $('#instruction').css({opacity:1});
62
+
63
+ if(my_hand==""){
64
+
65
+ $('#instruction').text("ださないので負け");
66
+
67
+ $('#start').prop('disabled',false);
68
+
69
+ }else if(["グー_チョキ","チョキ_パー","パー_グー"].indexOf(my_hand+"_"+pc_hand)>-1){
70
+
71
+ $('#instruction').text("かち");
72
+
73
+ $('#start').prop('disabled',false);
74
+
75
+ }else if(["チョキ_グー","パー_チョキ","グー_パー"].indexOf(my_hand+"_"+pc_hand)>-1){
76
+
77
+ $('#instruction').text("まけ");
78
+
79
+ $('#start').prop('disabled',false);
80
+
81
+ }else{
82
+
83
+ my_hand="";
84
+
85
+ kakegoe=["あい","こで","しょ"];
86
+
87
+ timerId=setInterval(janken,1000);
88
+
89
+ }
90
+
91
+ }else{
92
+
93
+ $('#instruction').css({opacity:1}).text(kakegoe[count]).animate({opacity:0});
94
+
95
+ count++;
96
+
97
+ }
98
+
99
+ return janken;
100
+
101
+ })(),1000);
102
+
103
+ });
104
+
105
+ $('[data-hand]').on('click',function(){
106
+
107
+ if(count>0){
108
+
109
+ my_hand=$(this).data('hand');
110
+
111
+ $('#my_hand_id').text($(this).data('hand'));
112
+
113
+ }
114
+
115
+ });
116
+
117
+ });
118
+
119
+ </script>
120
+
121
+
122
+
123
+ <header>
124
+
125
+ <h1>じゃんけんゲーム</h1>
126
+
127
+ <button id="start">START</button>
128
+
129
+ <br />
130
+
131
+ <br />
132
+
133
+ </header>
134
+
135
+
136
+
137
+ <main>
138
+
139
+ <div id="instruction"></div>
140
+
141
+ <br />
142
+
143
+ <div id="hands">
144
+
145
+ <div>あなた 「<span id="my_hand_id"></span>」</div>
146
+
147
+ <div>コンピュータ 「<span id="pc_hand_id"></span>」</div>
148
+
149
+ </div>
150
+
151
+ <br />
152
+
153
+ <div id="judgement"></div>
154
+
155
+ </main>
156
+
157
+
158
+
159
+ <div id="controller">
160
+
161
+ <ul>
162
+
163
+ <li class="my_hand" data-hand="グー">グー</li>
164
+
165
+ <li class="my_hand" data-hand="チョキ">チョキ</li>
166
+
167
+ <li class="my_hand" data-hand="パー">パー</li>
168
+
169
+ </ul>
170
+
171
+ </div>
172
+
173
+
174
+
175
+ <footer></footer>
176
+
177
+ ```