質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1378閲覧

javascript ifおよびif else

ysk_m

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/08/21 23:47

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/08/21 23:58

引数渡してないっていうか実際のじゃんけんの手何も関数に渡してないからそりゃあいこですよねってかんじ
azuapricot

2019/08/22 00:00

judge3は必ず最初のif文に入ります。
azuapricot

2019/08/22 00:01

というかそもそも比較の仕方 「result[0] && result2[0]」こんなんでいいの?ってかんじ
ysk_m

2019/08/22 01:04

色々試しましたが、反応せず、苦し紛れの比較です。やはり無理がありますか。
azuapricot

2019/08/22 02:16

配列の中身は関数の最初で初期化っていうかグーチョキパーを新しく詰めてる ↓ 今はその配列の中身だけをとっている (しかも比較じゃなくて、ただTrue/Falseをみているだけ) result[0] == result2[0] とかならまだわかるけど(比較できてないけど)
ysk_m

2019/08/22 07:31

azuapricotさん ありがとうございます。 引数渡すや、配列の使い方など正直良く分かっていません。 数字ルーレットの条件分岐を間に入れたため、例えば自分がグーで相手がチョキの時、 自分グー:value >= 0 && value <= 9 相手チョキ:value2 >= 10 && value2 <= 19 になるため、この二つをどう if に挿入していいのかがわかりません。
azuapricot

2019/08/22 07:47

judge3() で、そのvalueの判定をしたいなら、 judge3()を呼び出す時にそのvalue を渡してあげないと何と判定するんだこのやろーってなりますよね?? 自分と相手が何を出しているかわからないのに あいこか勝ちか負けなんて判断できませんよね $('#main_result').on('click', function () { judge3(); }); ここで judge3( );を呼び出してますけど、肝心のじゃんけんの手を判断する方法が何も渡されてないんですよ。 渡さないなら judge3( )の関数の中で、現在のじゃんけんの手を取得しないとダメですよね?
ysk_m

2019/08/22 08:01

なるほど。ですが、 その現在のじゃんけんを取得する際の書き方が良くわかりません。 考えるほどわからなくなってしまいます。。まだ理解が足らずにすみません。 なので、自分グーで相手がパーなら、text”負け”のような初期のコードになってしまいました。
azuapricot

2019/08/22 08:05

動かしてないから動作わかんないですけど、 画面に自分の手とか相手の手って表示されてないんですか?「グー」とか「パー」とか 表示されてるならそのテキストを取得して比較するだけじゃだめなんでしょーか。 わかりませんけど・・・
ysk_m

2019/08/22 13:57

ありがとうございます! azuapriicotさんのアドバイスで、解決できました。 引用できていなかった配列に、$(#要素).text(); で出し手のテキストを引用して変数を作りました。 また、変数を==で関連づけることで反応できました。ありがとうございます。 yambejpさんのご回答も凄くて参考になりましたが、初心者の自分には解読できない箇所が多くありました。もう少し慣れてから見直すと解るようになっていることを期待します。 今回は他の初心者の方のために自己解決ということで回答を載せたいと思います。
azuapricot

2019/08/22 23:58

語彙力なかったですけど意図を汲み取ってくれたようでなによりです。 JSは最初は難しいですが慣れれば便利なツールになるのでがんばりましょう◎
guest

回答2

0

自己解決

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 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 $('#hands2').text(result2[value2]); 162 163 if (value2 >= 0 && value2 <= 9) { 164 $('#hands2').text(result2[0]); 165 $('#gu_nav').css('background-color', 'yellow'); 166 } else if (value2 >= 10 && value2 <= 19) { 167 $('#hands2').text(result2[1]); 168 $('#cho_nav').css('background-color', 'yellow'); 169 } else { 170 $('#hands2').text(result2[2]); 171 $('#par_nav').css('background-color', 'yellow'); 172 } 173 }; 174 175 176 177 // 結果ボタンを押した時のアクション 178 179 $('#main_result').on('click', function () { 180 judge3(); 181 }); 182 183 // 両者の結果で勝敗を記載 184 185 // 関数judge3 自分がグーの時、チョキの時、パーの時、相手の出してでmain_result表示 186 // この関数を上記、自分がグーを出した時に加える 187 188 189 function judge3() { 190 var main_result = ['あなたの勝ち', 'あいこ', 'あなたの負け'] 191 var fin = $("#hands1").text(); //text引用 192 console.log(fin); 193 var fin2 = $('#hands2').text(); 194 console.log(fin2); 195 var result_fin = ['グー', 'チョキ', 'パー'] 196 if (fin == fin2) { 197 198 $('#main_result').text(main_result[1]); 199 } 200 else if (fin == result_fin[0] && fin2 == result_fin[1]) { 201 202 $('#main_result').text(main_result[0]); 203 } 204 else if (fin == result_fin[0] && fin2 == result_fin[2]) { 205 206 $('#main_result').text(main_result[2]); 207 208 } 209 else if (fin == result_fin[1] && fin2 == result_fin[0]) { 210 211 $('#main_result').text(main_result[2]); 212 213 } 214 else if (fin == result_fin[1] && fin2 == result_fin[1]) { 215 216 $('#main_result').text(main_result[1]); 217 218 } 219 else if (fin == result_fin[1] && fin2 == result_fin[2]) { 220 221 $('#main_result').text(main_result[0]); 222 223 } 224 else if (fin == result_fin[2] && fin2 == result_fin[0]) { 225 226 $('#main_result').text(main_result[0]); 227 228 } 229 else if (fin == result_fin[2] == fin2 == result_fin[1]) { 230 231 $('#main_result').text(main_result[2]); 232 233 } 234 else { 235 236 $('#main_result').text(main_result[1]); 237 238 } 239 240 }; 241 </script> 242</body> 243 244</html>

投稿2019/08/22 14:03

ysk_m

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

あまりに冗長すぎるのでまとめるとこはまとめてみました

javascript

1<style> 2.active{color:red;} 3</style> 4<script> 5var timerId; 6function roulette(id){ 7 timerId=setInterval(function(){ 8 var num=parseInt(Math.random()*30); 9 $(id).text(num); 10 },100); 11} 12function judge(){ 13 var h1=$('#hands1').text(); 14 var h2=$('#hands2').text(); 15 16 var res="負け"; 17 if(h1==h2){ 18 res="あいこ"; 19 }else if(['グー_チョキ', 'パー_グー','チョキ_パー'].indexOf(h1+"_"+h2)>-1){ 20 res="勝ち"; 21 } 22 return res; 23} 24$(function(){ 25 var res=['グー', 'チョキ', 'パー']; 26 $('#me_btn').on('click',function () { 27 clearInterval(timerId); 28 if($(this).text()=="me start"){ 29 $(this).text("me stop"); 30 $('#hands1').text(''); 31 $('#hands2').text(''); 32 $("#roulette2").text('0-29'); 33 $('#result_fin').text(''); 34 roulette("#roulette1"); 35 }else if($(this).text()=="me stop"){ 36 $('#hands1').text(res[parseInt($("#roulette1").text()/10)]); 37 $(this).text("me").removeClass('active'); 38 $('#you_btn').text("you start").addClass('active'); 39 } 40 }); 41 42 $('#you_btn').on('click',function () { 43 clearInterval(timerId); 44 if($(this).text()=="you start"){ 45 $(this).text("you stop"); 46 $('#hands2').text(''); 47 roulette("#roulette2"); 48 }else if($(this).text()=="you stop"){ 49 $('#hands2').text(res[parseInt($("#roulette2").text()/10)]); 50 $(this).text("you").removeClass('active'); 51 $('#main_result').addClass('active'); 52 53 } 54 }); 55 56 $('#main_result').on('click',function(){ 57 if($(this).hasClass('active')){ 58 $(this).removeClass('active'); 59 $('#result_fin').text(judge()).addClass('active'); 60 $('#me_btn').text('me start').addClass('active'); 61 } 62 }); 63}); 64</script> 65<main> 66<ul> 67<li id='me_btn' class="me_btn active">me start</li> 68<li id='you_btn' class="you_btn">you</li> 69</ul> 70</main> 71<div class="random_box"> 72<div class="outline"> 73<p class="p">自 分</p> 74<div class="roulette" id="roulette1">0-29</div> 75<div id="hands1" class="action_text"> </div> 76</div> 77<div class="outline"> 78<p class="p">相 手</p> 79<div class="roulette" id="roulette2">0-29</div> 80<div id="hands2" class="action_text"> </div> 81</div> 82</div> 83</div> 84 85<div class="text_box"> 86<p id="gu_nav">0-9 = グー</p> 87<p id="cho_nav">10-19 = チョキ</p> 88<p id="par_nav">21-29 = パー</p> 89</div> 90 91<div class="action_box"> 92<div id="result_fin" class="fin_result">あなたの勝ち?負け?</div> 93<div id="main_result" class='main_result'>結果 →click←</div> 94</div> 95

投稿2019/08/22 01:06

編集2019/08/22 01:08
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ysk_m

2019/08/22 14:01

ありがとうございます! 短時間でこの回答、すごいですね。 自分も練習したらこんなに書けるようになるのでしょうか。 どうしても解読できない箇所が多く、もう少し慣れてから改めて解読してみようと思います。 また、10で割るという発想が自分にはなかったです。 今回は、同じ初心者の方々のために、自己解決した初歩的な解決コードを載せさせていただきます。 このような方々がサイト内にいらっしゃることは本当に心強いです。ありがとうございます。 またよろしくお願いいたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問