yambejp score 85858
2019/10/21 14:05 投稿
| 非同期でもないないのでdeferredで処理しなければよいのでは？ |
| 非同期でもないないのでdeferredで処理しなければよいのでは？ |
| # sample |
| 非同期になる要素がないのでdeferredを外したバージョンのsampleをあげておきます |
| ちょっと雑に書いたのでもうすこし調整が必要かも |
| （挙動が違うならご指摘ください） |
| ```javascript |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
| <script> |
| $(function(){ |
| var count=0; |
| var my_hand=""; |
| var pc_hand=""; |
| $('#start').on('click',function(){ |
| $('#start').prop('disabled',true); |
| $('#my_hand_id').text(""); |
| my_hand=""; |
| var kakegoe=["じゃん","けん","ぽん"] |
| $('#pc_hand_id').text(""); |
| var timerId=setInterval((function janken(){ |
| if(count==0) pc_hand=["グー","チョキ","パー"][parseInt(Math.random()*3)]; |
| console.log(pc_hand); |
| if($('#instruction').text()=="あい"){ |
| $('#my_hand_id').text(""); |
| $('#pc_hand_id').text(""); |
| } |
| if(kakegoe.length<=count){ |
| clearInterval(timerId); |
| count=0; |
| $('#pc_hand_id').text(pc_hand); |
| $('#instruction').css({opacity:1}); |
| if(my_hand==""){ |
| $('#instruction').text("ださないので負け"); |
| $('#start').prop('disabled',false); |
| }else if(["グー_チョキ","チョキ_パー","パー_グー"].indexOf(my_hand+"_"+pc_hand)>-1){ |
| $('#instruction').text("かち"); |
| $('#start').prop('disabled',false); |
| }else if(["チョキ_グー","パー_チョキ","グー_パー"].indexOf(my_hand+"_"+pc_hand)>-1){ |
| $('#instruction').text("まけ"); |
| $('#start').prop('disabled',false); |
| }else{ |
| my_hand=""; |
| kakegoe=["あい","こで","しょ"]; |
| timerId=setInterval(janken,1000); |
| } |
| }else{ |
| $('#instruction').css({opacity:1}).text(kakegoe[count]).animate({opacity:0}); |
| count++; |
| } |
| return janken; |
| })(),1000); |
| }); |
| $('[data-hand]').on('click',function(){ |
| if(count>0){ |
| my_hand=$(this).data('hand'); |
| $('#my_hand_id').text($(this).data('hand')); |
| } |
| }); |
| }); |
| </script> |
| <header> |
| <h1>じゃんけんゲーム</h1> |
| <button id="start">START</button> |
| <br /> |
| <br /> |
| </header> |
| <main> |
| <div id="instruction"></div> |
| <br /> |
| <div id="hands"> |
| <div>あなた 「<span id="my_hand_id"></span>」</div> |
| <div>コンピュータ 「<span id="pc_hand_id"></span>」</div> |
| </div> |
| <br /> |
| <div id="judgement"></div> |
| </main> |
| <div id="controller"> |
| <ul> |
| <li class="my_hand" data-hand="グー">グー</li> |
| <li class="my_hand" data-hand="チョキ">チョキ</li> |
| <li class="my_hand" data-hand="パー">パー</li> |
| </ul> |
| </div> |
| <footer></footer> |
| ``` |
