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

回答編集履歴

1

ちょうせい

2019/10/21 05:05

投稿

yambejp
yambejp

スコア117995

answer CHANGED
@@ -1,1 +1,89 @@
1
- 非同期でもないないのでdeferredで処理しなければよいのでは?
1
+ 非同期でもないないのでdeferredで処理しなければよいのでは?
2
+
3
+ # sample
4
+ 非同期になる要素がないのでdeferredを外したバージョンのsampleをあげておきます
5
+ ちょっと雑に書いたのでもうすこし調整が必要かも
6
+ (挙動が違うならご指摘ください)
7
+ ```javascript
8
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9
+ <script>
10
+ $(function(){
11
+ var count=0;
12
+ var my_hand="";
13
+ var pc_hand="";
14
+ $('#start').on('click',function(){
15
+ $('#start').prop('disabled',true);
16
+ $('#my_hand_id').text("");
17
+ my_hand="";
18
+ var kakegoe=["じゃん","けん","ぽん"]
19
+ $('#pc_hand_id').text("");
20
+ var timerId=setInterval((function janken(){
21
+ if(count==0) pc_hand=["グー","チョキ","パー"][parseInt(Math.random()*3)];
22
+ console.log(pc_hand);
23
+ if($('#instruction').text()=="あい"){
24
+ $('#my_hand_id').text("");
25
+ $('#pc_hand_id').text("");
26
+ }
27
+ if(kakegoe.length<=count){
28
+ clearInterval(timerId);
29
+ count=0;
30
+ $('#pc_hand_id').text(pc_hand);
31
+ $('#instruction').css({opacity:1});
32
+ if(my_hand==""){
33
+ $('#instruction').text("ださないので負け");
34
+ $('#start').prop('disabled',false);
35
+ }else if(["グー_チョキ","チョキ_パー","パー_グー"].indexOf(my_hand+"_"+pc_hand)>-1){
36
+ $('#instruction').text("かち");
37
+ $('#start').prop('disabled',false);
38
+ }else if(["チョキ_グー","パー_チョキ","グー_パー"].indexOf(my_hand+"_"+pc_hand)>-1){
39
+ $('#instruction').text("まけ");
40
+ $('#start').prop('disabled',false);
41
+ }else{
42
+ my_hand="";
43
+ kakegoe=["あい","こで","しょ"];
44
+ timerId=setInterval(janken,1000);
45
+ }
46
+ }else{
47
+ $('#instruction').css({opacity:1}).text(kakegoe[count]).animate({opacity:0});
48
+ count++;
49
+ }
50
+ return janken;
51
+ })(),1000);
52
+ });
53
+ $('[data-hand]').on('click',function(){
54
+ if(count>0){
55
+ my_hand=$(this).data('hand');
56
+ $('#my_hand_id').text($(this).data('hand'));
57
+ }
58
+ });
59
+ });
60
+ </script>
61
+
62
+ <header>
63
+ <h1>じゃんけんゲーム</h1>
64
+ <button id="start">START</button>
65
+ <br />
66
+ <br />
67
+ </header>
68
+
69
+ <main>
70
+ <div id="instruction"></div>
71
+ <br />
72
+ <div id="hands">
73
+ <div>あなた 「<span id="my_hand_id"></span>」</div>
74
+ <div>コンピュータ 「<span id="pc_hand_id"></span>」</div>
75
+ </div>
76
+ <br />
77
+ <div id="judgement"></div>
78
+ </main>
79
+
80
+ <div id="controller">
81
+ <ul>
82
+ <li class="my_hand" data-hand="グー">グー</li>
83
+ <li class="my_hand" data-hand="チョキ">チョキ</li>
84
+ <li class="my_hand" data-hand="パー">パー</li>
85
+ </ul>
86
+ </div>
87
+
88
+ <footer></footer>
89
+ ```