Q&A
とても短くなった........！！
ご返答ありがとうございます！
判定の仕方も工夫次第でこんなにも短縮できるのですね！
ただ実装してみて、問題なく動いてくれているものの、やはり途中からぎこちなくなってしまいます........。
一度皆様からの意見を整理してやり直してみます！
こんにちは。
じゃんけんゲームのスクリプトをつけているのですが、重いからなのか、動作が上手くいったりいかなかったりします。コンソールにはエラーが出ていないので、書き方が悪いのでしょうが、キャッシュを溜める、チェーンを使うなどの対策をできる限りやってみても改善しません。
ここをこうしたほうが良いという意見をください。よろしくお願いいたします。
HTML
1 <div id="screen_box"> 2 <div id="enemy_life"></div> 3 <div id="our_life"></div> 4 <div id="screen"><img src="" id="screen_img"></div> 5 </div> 6 7 <div id="text_box">ボタンを押してください</div> 8 9 <div id="game_sta">ゲームスタート</div> 10 11 <div id="your_hands"> 12 <div id="rock"><img src="img/%E3%81%90%E3%83%BC.png" class="hand_imgs"></div> 13 <div id="scissors"><img src="img/%E3%81%A1%E3%82%87%E3%81%8D.png" class="hand_imgs"></div> 14 <div id="paper"><img src="img/%E3%81%B1%E3%83%BC.png" class="hand_imgs"></div> 15 </div> 16
スタートを押す前
スタートを押した後
JavaScript
1 2<script> 3 $(function(){ 4 //キャッシュ 5 var screen = $('#screen'); 6 var screen_img = $('#screen_img'); 7 var text_box = $('#text_box') 8 var rock = $('#rock'); 9 var scissors = $('#scissors'); 10 var paper = $('#paper'); 11 12 13 //敵のArray 14 var enemy = [ 15 'img/%E3%81%90%E3%83%BC.png', 16 'img/%E3%81%A1%E3%82%87%E3%81%8D.png', 17 'img/%E3%81%B1%E3%83%BC.png' 18 ]; 19 var enemy_name = ['グー','チョキ','パー']; 20 21 22 //敵を決定する関数 23 function show_up(){ 24 var num = Math.floor(Math.random()*3); 25 26 screen_img.fadeIn(50); 27 screen_img.attr('src',enemy[num]); 28 text_box.text(enemy_name[num] + 'が現れた！'); 29 30 return num; 31 }; 32 33 //スタートを押したとき 34 $('#game_sta').click(function(){ 35 $('#your_hands').show(); 36 $(this).hide(); 37 38 game_proc(); 39 }); 40 41 //相手との戦闘の判定をする関数 42 function game_proc(){ 43 on_command(); 44 show_up(); 45 46 if(show_up() === 0){ 47 rock.on('click',function(){ 48 counter(); 49 }); 50 scissors.on('click',function(){ 51 lose(); 52 }); 53 paper.on('click',function(){ 54 beat(); 55 }); 56 }else if(show_up() === 1){ 57 rock.on('click',function(){ 58 beat(); 59 }); 60 scissors.on('click',function(){ 61 counter(); 62 }); 63 paper.on('click',function(){ 64 lose(); 65 }); 66 }else if(show_up() === 2){ 67 rock.on('click',function(){ 68 lose(); 69 }); 70 scissors.on('click',function(){ 71 beat(); 72 }); 73 paper.on('click',function(){ 74 counter(); 75 }); 76 } 77 }; 78 79 //じゃんけんコマンドをオフ 80 function off_command(){ 81 rock.off('click'); 82 scissors.off('click'); 83 paper.off('click'); 84 }; 85 86 //じゃんけんコマンドをオン 87 function on_command(){ 88 rock.on('click'); 89 scissors.on('click'); 90 paper.on('click'); 91 }; 92 93 //相手を倒した時の関数 94 function beat(){ 95 screen_img.fadeOut(1000); 96 text_box.text('効果は抜群だ！'); 97 off_command(); 98 screen.click(function(){ 99 game_proc(); 100 }); 101 }; 102 103 //相手と引き分けた時の関数 104 function counter(){ 105 screen_img.fadeOut(20,function(){$(this).fadeIn(20,function(){$(this).fadeOut(20,function(){$(this).fadeIn(20)})})}); 106 text_box.text('相打ちだ！'); 107 off_command(); 108 screen.click(function(){ 109 game_proc(); 110 }); 111 }; 112 113 //相手に負けた時の関数 114 function lose(){ 115 screen_img.animate({height:"120px"}, 1000).animate({height:"300px"}, 1000); 116 text_box.text('大ダメージを受けた！'); 117 off_command(); 118 screen.click(function(){ 119 game_proc(); 120 }); 121 }; 122 123 }); 124 </script>
回答4件
0
ベストアンサー
html
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>じゃんけん jQuery.on の使い方サンプル</title> 6<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 7<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 8<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 9<link rel="stylesheet" href="/resources/demos/style.css"> 10<script> 11var jankens = { 12 "GOO" : { 13 labelJp: "ぐー", 14 labelEn: "Iron Fist", 15 imageW : "GooW.png", 16 imageH : "GooH.png", 17 battle : function(te) { 18 if (te == "GOO") return 1; 19 if (te == "PAR") return 0; 20 return 2; //CHO 21 } 22 }, 23 "CHO" : { 24 labelJp: "ちょき", 25 labelEn: "Blinding", 26 imageW : "ChoW.png", 27 imageH : "ChoH.png", 28 battle : function(te) { 29 if (te == "CHO") return 1; 30 if (te == "GOO") return 0; 31 return 2; // PAR 32 } 33 34 }, 35 "PAR" : { 36 labelJp: "ぱぁ", 37 labelEn: "Palm Bottom", 38 imageW : "ParW.png", 39 imageH : "ParH.png", 40 battle : function(te) { 41 if (te == "PAR") return 1; 42 if (te == "CHO") return 0; 43 return 2; // GOO 44 } 45 46 } 47}; 48var tournament = { 49 enemy: null, 50 began : function() { 51 $("#GOO, #CHO, #PAR, #PLAY").button(); 52 53 var self = this; 54 $("#panels").on("click", "input[type=button]", function(e) { 55 var te = e.target.id; 56 if (te != "PLAY") { 57 var battleCheck = self.enemy.battle; 58 var result = (["勝ち", "あいこ", "負け"])[battleCheck(te)]; 59 alert("あなたの " + result); 60 } else { 61 var seed = Math.random() * (new Date()).getTime() % 3; 62 var te2 = ""; 63 for (te2 in jankens) { 64 seed--; 65 if (seed < 0) break; 66 } 67 self.enemy = jankens[te2]; 68 $("#img").html("<img src='" + self.enemy.imageW + "' />"); 69 } 70 }); 71 } 72}; 73 74$(function() { 75 tournament.began(); 76}); 77</script> 78<style> 79table { 80 border-collapse: collapse; 81 border: solid 1px gray; 82 width: 60%; 83 84} 85table tr td { 86 border-collapse: collapse; 87 border: solid 1px gray; 88 padding: 1em; 89} 90div#img { 91 width: 100%; 92 min-height: 200px; 93} 94</style> 95</head> 96<body> 97<p>じゃんけんイメージ提供元：http://lmsnn.fc2web.com/material/janken.html</p> 98<script> 99// images preloader 100for (var te in jankens) { 101 document.write("<img src='" + jankens[te].imageW + "' style='display:none'/>"); 102 document.write("<img src='" + jankens[te].imageH + "' style='display:none'/>"); 103} 104</script> 105 106<table> 107 <colgroup> 108 <col width="10%" /> 109 <col width="80%" /> 110 <col width="10%" /> 111 </colgroup> 112 <tr> 113 <td></td> 114 <td id="message"><div id="msg"></div></td> 115 <td></td> 116 </tr> 117 <tr> 118 <td id="side"></td> 119 <td id="images"><div id="img"></div></td> 120 <td id="side"></td> 121 </tr> 122 <tr> 123 <td colspan="3" id="panels"> 124 <input type="button" value="ぐー" id="GOO" /> 125 <input type="button" value="ちょき" id="CHO" /> 126 <input type="button" value="ぱー" id="PAR" /> 127 <input type="button" value="敵表示" id="PLAY" /> 128 129 </td> 130 </tr> 131</table> 132 133</body> 134</html> 135
jQuery on の使い方です。ちょっと難解な書き方ですけど、ぜひマスターしてみてください。
コピペして、utf-8 jankenDemo.html で保存して、ブラウザに表示します。
投稿2015/11/17 16:40
総合スコア1693
0
show_upはランダムな値を返しているため、
その値を判定に使用している箇所で、
おかしくなったり、正しくなったりしているようですね。
既にその解決方法は出ていますので、
私は冗長なコードの短縮方法について書かせてもらいます。
.onの第二引数は、関数を指定します。
これは、既に定義している関数の関数名だけでよいです。
こんな感じ
JavaScript
1rock.on('click',beat);
これを利用し、game_proc関数を以下のように変更することで、
コードを短縮できます。
JavaScript
1 //相手との戦闘の判定をする関数 2 function game_proc(){ 3 on_command(); 4 var num = show_up(); 5 rock.on('click',allocation(num + 2)); 6 scissors.on('click',allocation(num + 1)); 7 paper.on('click',allocation(num + 0)); 8 }; 9 10 //勝敗の決定 11 function allocation(num){ 12 num = num % 3; 13 if(num == 2){ 14 return counter; 15 }else if(num == 1){ 16 return lose; 17 }else{ 18 return beat; 19 } 20 }
投稿2015/11/17 06:50
総合スコア1507
ゲーム終了時にscreen.clickを毎回設定し、解除していないのが気になります。
screen.clickを設定している箇所を関数の外(screenの宣言直後くらい)に出し、counter,lose,beat関数から消し、game_proc関数でscreen.off('click')を実行してみてください。
0
math.random() * 3
ランダム値が偏りやすいので、
math.random() * (new Date()).getTime() % 3
とすればほんのちょっぴり均等に出てくると思います。体感的な問題なので、、、
jquery on の使い方が間違っています。
on は、一度せっていすればよく、ぐー、ちょん、ぱーの判定毎に設定してはいけません。on は、内部で
addeventlistener というメソッドを呼び出すことで、イベントを追加します。上書きではなくて追加なので、現状のロジックだと、開始ボタン、味方の攻撃ボタンを押下するたびにイベントが追加されてしまいます。
画面起動当初はそうでもないけど、何か操作してるうちにだんだんおもくなる、感じがするんじゃないかと。
投稿2015/11/17 06:40
総合スコア1693
ご返答ありがとうございます！
なんと！ランダムの偏りをなくすのにそんな方法もあったとは........
誠に参考になります。
onを複数回使ってはいけないということは、初めの方でキャッシュにして、まとめたほうが良いということなのでしょうか？
また、今回onを使おうと思ったのはoff機能が使いたかったからなので、もし何かの命令で無効化できて、なおかつイベントを追加しない方法があれば是非とも教えて欲しいです！
自分が言ってるのは、イベントの設定、解除という意味で、on はイベントの設定、じゃぁ逆は？ off じゃないんです。jquery の on イベント追加用メソッドは、今は知らなくてもいいのですけど、イベント伝播という仕組みを利用して、ある纏まった部分に一度の設定で恒久的に、かつ内容が変わっても再設定する事なしに設定したイベントを捕まえましょう、という観点で実装されています。なので、何度も設定する必要がないのです。
イベントハンドラは、独自に呼び出すことができますが、イベントの設定後は、そのイベントが発生するまでは設定したハンドラを動作させることができません。動作させるキッカケは、君が、ぐーちょきぱーの画像をクリックしたとき、です。ぐーを非表示にするだけでぐー画像は画面から消えるので押せませんよね？つまり、これが設定したイベントを無効にすつことと等価なんです。
返答が遅れて申し訳ありません！
見事に理解が追いつかないのですが、「必ずしもonを使わなくても関数を無効化できるようなアルゴリズムは作れる」という解釈でよろしいでしょうか？
0
根本的な解決になるか分かりませんが、game_proc()を以下のように修正してみてください。
Javascript
1 function game_proc(){ 2 on_command(); 3 var num = show_up(); 4 5 if(num === 0){ 6 rock.on('click',function(){ 7 counter(); 8 }); 9 scissors.on('click',function(){ 10 lose(); 11 }); 12 paper.on('click',function(){ 13 beat(); 14 }); 15 }else if(num === 1){ 16 rock.on('click',function(){ 17 beat(); 18 }); 19 scissors.on('click',function(){ 20 counter(); 21 }); 22 paper.on('click',function(){ 23 lose(); 24 }); 25 }else if(num === 2){ 26 rock.on('click',function(){ 27 lose(); 28 }); 29 scissors.on('click',function(){ 30 beat(); 31 }); 32 paper.on('click',function(){ 33 counter(); 34 }); 35 } 36 };
投稿2015/11/17 06:10
退会済みユーザー
総合スコア0
早速の返答ありがとうございます！
やってみたのですが、やはり続けていくと動きがぎこちなくなったり（画像が出るのが遅れ出し、やがて出なくなる）、相手に勝つような手を出してもあいこのエフェクトが出たりします........。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/17 16:46
2015/11/18 00:22