javascriptを最近習い始めたばかりの初心者です。
###簡単なゲームを作っているのですが、最後のifのところで始めの指示の”あいこ”しか表示されません。他に何か良い方法はありますでしょうか?
####仕様
①自分のボタンをクリック
②0〜29のランダム数字でルーレット
③ストップボタンのクリックで数字が決定
④0〜9はグー、10〜19はチョキ、20〜29はパーに条件分岐(出し手の決定)
⑤相手も同様に行い、それぞれの出し手が決まる
⑥結果ボタンをクリック
⑦勝ち、負けなどのテキスト表示
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="style.css"> 9 <title>じゃんけん</title> 10 11</head> 12 13<body> 14 <header> 15 <h1> </h1> 16 </header> 17 18 <main> 19 <ul> 20 <li id='me_btn' class="me_btn">click</li> 21 <li id='you_btn' class="you_btn">click</li> 22 </ul> 23 </main> 24 25 <div class="random_box"> 26 <div class="outline"> 27 <p class="p">自 分</p> 28 <div class="roulette" id="roulette1">0-29</div> 29 <div id="hands1" class="action_text"> </div> 30 </div> 31 <div class="outline"> 32 <p class="p">相 手</p> 33 <div class="roulette" id="roulette2">0-29</div> 34 <div id="hands2" class="action_text"> </div> 35 </div> 36 </div> 37 38 39 </div> 40 41 42 <div class="text_box"> 43 <p id="gu_nav">0〜9 = グー</p> 44 <p id="cho_nav">10〜19 = チョキ</p> 45 <p id="par_nav">21〜29 = パー</p> 46 </div> 47 48 <div class="action_box"> 49 <div id="result_fin" class="fin_result">あなたの勝ち?負け?</div> 50 <div id="main_result" class='main_result'>結果 →click←</div> 51 </div> 52 53 54 <footer> 55 </footer> 56 57 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 58 <script language="javascript" type="text/javascript"></script> 59 <script> 60 61 // ルーレット1の変数定義__________ 62 63 var click = 0; 64 var timer = null; 65 var value = Math.floor(Math.random() * 30); 66 67 68 // ルーレット1の関数定義 69 70 function stop() { 71 clearInterval(timer); 72 $('#roulette1').text(value); 73 } 74 75 function Random() { 76 var value = Math.floor(Math.random() * 30); 77 $('#roulette1').text(value); 78 } 79 80 // 自分ボタン クリックでルーレット1(自分)を開始 81 82 $('#me_btn').click(function () { 83 84 if (click == 0) { 85 timer = setInterval(Random, 80); 86 click = click + 1; //クリックはここで+1回になっている 87 $('#me_btn').text('stop') 88 // 2回目のクリックでストップ 89 90 } else if (click == 1) { 91 stop(); 92 judge(); // 関数定義は下 93 } 94 }); 95 96 // 止まった数字で条件分岐 97 // 0〜9 の時 グー 98 // 10〜19 の時 チョキ 99 // 21〜29 の時 パー 100 function judge() { 101 var result = ['グー', 'チョキ', 'パー']; 102 103 $('#hands1').text(result[value]); 104 105 if (value >= 0 && value <= 9) { 106 $('#hands1').text(result[0]); 107 $('#gu_nav').css('background-color', '#67ceff'); 108 109 } else if (value >= 10 && value <= 19) { 110 $('#hands1').text(result[1]); 111 $('#cho_nav').css('background-color', '#67ceff'); 112 113 } else { 114 $('#hands1').text(result[2]); 115 $('#par_nav').css('background-color', '#67ceff'); 116 } 117 }; 118 119 120 // ルーレット2の変数定義___________ 121 122 var click2 = 0; 123 var timer2 = null; 124 var value2 = Math.floor(Math.random() * 30); 125 126 127 128 // ルーレット2の関数定義 129 130 function Random2() { 131 var value2 = Math.floor(Math.random() * 30); 132 $('#roulette2').text(value2); 133 } 134 135 function stop2() { 136 clearInterval(timer2); 137 $('#roulette2').text(value2); 138 } 139 140 141 $('#you_btn').click(function () { 142 143 if (click2 == 0) { 144 timer2 = setInterval(Random2, 80); 145 click2 = click2 + 1; 146 $('#you_btn').text('stop') 147 148 } else { 149 stop2(); 150 judge2(); 151 } 152 }); 153 154 // 止まった数字で条件分岐 155 // 0〜9 の時 グー 156 // 10〜19 の時 チョキ 157 // 21〜29 の時 パー 158 function judge2() { 159 var result2 = ['グー', 'チョキ', 'パー']; 160 161 // var result2 = new Array("gu.png", "cho.png", "par.png"); 162 163 $('#hands2').text(result2[value2]); 164 165 if (value2 >= 0 && value2 <= 9) { 166 $('#hands2').text(result2[0]); 167 $('#gu_nav').css('background-color', 'yellow'); 168 } else if (value2 >= 10 && value2 <= 19) { 169 $('#hands2').text(result2[1]); 170 $('#cho_nav').css('background-color', 'yellow'); 171 } else { 172 $('#hands2').text(result2[2]); 173 $('#par_nav').css('background-color', 'yellow'); 174 } 175 }; 176 177 178 179 //____ここからの指示で”あいこ”しか表示されません。__________// 180 181 $('#main_result').on('click', function () { 182 judge3(); 183 }); 184 185 // 結果ボタンを押した時のアクション 186 187 188 // 両者の結果で勝敗を記載 189 190 // 関数judge3 自分がグーの時、チョキの時、パーンの時、相手の出してでmain_result表示 191 // この関数を上記、自分がグーを出した時に加える 192 193 function judge3() { 194 var main_result = ['あなたの勝ち', 'あいこ', 'あなたの負け'] 195 var result = ['グー', 'チョキ', 'パー']; 196 var result2 = ['グー', 'チョキ', 'パー']; 197 198 if (result[0] && result2[0]) { 199 200 $('#result_fin').text(main_result[1]); 201 } 202 else if (result[0] && result2[1]) { 203 204 $('#result_fin').text(main_result[0]); 205 } 206 else if (result[0] && result2[2]) { 207 208 $('#result_fin').text(main_result[2]); 209 210 } 211 else if (result[1] && result2[0]) { 212 213 $('#result_fin').text(main_result[2]); 214 215 } 216 else if (result[1] && result2[1]) { 217 218 $('#result_fin').text(main_result[1]); 219 220 } 221 else if (result[1] && result2[2]) { 222 223 $('#result_fin').text(main_result[0]); 224 225 } 226 else if (result[2] && result2[0]) { 227 228 $('#result_fin').text(main_result[0]); 229 230 } 231 else if (result[2] && result2[1]) { 232 233 $('#result_fin').text(main_result[2]); 234 235 } 236 else if (result[2] && result2[2]) { 237 238 $('#result_fin').text(main_result[1]); 239 240 } 241 242 }; 243 </script> 244</body> 245 246</html>
回答2件
あなたの回答
tips
プレビュー