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

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

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

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1066閲覧

JavaScriptでルーレット、じゃんけんの組み合わせゲーム

ysk_m

総合スコア17

HTML5

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/19 05:47

編集2019/08/20 10:33

初心者です。
HTML、CSSを習いたての初心者です。
現在、JavaScriptで簡単なゲーム作りの練習をしています。
JQueryを使用して、ルーレットとじゃんけんの組み合わせゲームを考えていますが、物理的に可能でしょうか。
流れとしては、
『私』『相手』2人でそれぞれ0〜29のルーレットを回します。
スタートは『私』をクリック
→ 数字のルーレットが回り数字が決まる
→ 0-9がグー、10-19がチョキ、20-29がパーで出し手が決まる→出し手を表示

次に『相手』をクリック
→同じ流れで出し手が決まる
→互いの出し手が決まったら、『あなたの勝ち』『あいこ』『あなたの負け』が表示される
※全て同じブラウザ内で行えると嬉しいです。
変数、条件分岐を使って応用的に考えて行っていますが、2人のルーレットが共存させる術がわかりません。
専門用語もよくわからず、質問の仕方も不十分かと思います。
何かアドバイスがあればお願いします(◞‸◟)

質問の追記です。
現在、途中ですがコードを記載させていただきます。
昨夜、仕様を少し変更しながら試行錯誤しましたが、ルーレットが止まらなくなりました。
##現在の状況・・・自分のルーレットを回す。stop時の条件分岐入力。しかしstopがそもそも効かず。
#HTML 75行目あたりstopの効かせ方がわかりません。カッコの多さに混乱しています。
#またstopした際にグー、チョキ、パーのtext入力も同時に行いたいですが、条件分岐の記載は間違っていますでしょうか? ご指導よろしくお願いいたします。
Markdown技法が良く分からず、これで上手く表示されるのかわかりません。
申し訳ありません。。
ダメであればまた編集させてください。

###以下、HTML

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'>自分</li> 21<li id='you_btn'>相手</li> 22</ul> 23</main> 24 25<div class="random_box"> 26<div class="outline"> 27<div class="roulette" id="roulette1">start</div> 28</div> 29<div class="outline"> 30<div class="roulette" id="roulette2">start</div> 31</div> 32</div> 33</div> 34<div class="text_box"> 35<p>0〜9 = グー</p> 36<p>10〜19 = チョキ</p> 37<p>21〜29 = パー</p> 38</div> 39 40<div class="action_box"> 41<div id="hands1" class="action_text">自分の出し手</div> 42<div id="hands2" class="action_text">相手の出し手</div> 43</div> 44 45<footer></footer> 46 47<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt; 48<script language="javascript" type="text/javascript"></script> 49<script> 50// クリックでルーレット1(自分)を開始 、2回目のクリックでストップ 51$(function () { 52var click = 0 53var count = 0 54var timer = null; 55var value = Math.floor(Math.random() * 30); 56 57$('#me_btn').click(function () { 58timer = setInterval(Random, 50); 59function Random() { 60var value = Math.floor(Math.random() * 30); 61$('#roulette1').text(value); 62if (click == 2) { 63clearInterval(timer); 64$('#roulette1').text(value); 65} 66}; 67// 止まった数字で条件分岐 68// 0〜9 の時 グー 69// 10〜19 の時 チョキ 70// 21〜29 の時 パー 71$(function () { 72const result = ['グー', 'チョキ', 'パー']; 73if (click == 2) { 74$('#roulette1').stop(value); 75} 76$('#roulette1').on('stop', function () { 77$('#hands1').text(result[value]); 78if (value >= 0 && value <= 9) { 79$('#hands1').text(result[0]); 80} else if (value >= 10 && value <= 19) { 81$('#hands').text(result[1]); 82} else { 83$('#hands').text(result[2]); 84} 85}); 86 87}); 88}); 89}); 90 91 92// クリックでルーレット1(自分)を開始 、2回目のクリックでストップ 93$(function () { 94var count = 0; 95var timer = null; 96var value = Math.floor(Math.random() * 30); 97 98$('#you_btn').click(function () { 99timer = setInterval(Random, 50); 100function Random() { 101var value = Math.floor(Math.random() * 30); 102$('#roulette2').text(value); 103if (count > 20) { 104clearInterval(timer); 105$('#roulette2').text(value); 106} 107}; 108}); 109}); 110 111 112</script> 113</body> 114 115</html>

###以下、CSS

CSS

1.outline { 2text-align: center; 3} 4 5.random_box{ 6display: flex; 7justify-content: space-around; 8} 9 10.roulette { 11display: inline-block; 12 13text-align: center; 14border: 1px solid #000000; 15font-size: 40px; 16width: 120px; 17height: 100px; 18background-color: #fff; 19} 20 21body { 22margin: 0; 23padding: 0; 24text-align: left; 25font-size: 32px; 26background: url(../backimage2.jpeg) 27 28} 29 30header { 31background-color: #fff; 32border-bottom: 1px solid #ccc; 33text-align: center; 34background: url(../guchokipar.jpeg); 35} 36 37header h1{ 38color:darkblue; 39font-size: 100px; 40margin-top: 0; 41} 42 43main { 44border-bottom: 1px solid #ccc; 45} 46 47footer { 48background-color: #fff; 49border-bottom: 1px solid #ccc; 50text-align: center; 51} 52 53p { 54font-size: 30px; 55text-align: left; 56} 57 58ul { 59display: flex; 60justify-content: space-around; 61} 62 63li { 64width: 100px; 65height: 50px; 66font-size: 50px; 67display: inline-block; 68padding: 0.5em 1em; 69text-decoration: none; 70border-radius: 4px; 71color: #ffffff; 72background-image: linear-gradient(#6795fd 0%, #67ceff 100%); 73box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); 74border-bottom: solid 3px #5e7fca; 75cursor: grab; 76 77} 78 79li:active { 80-webkit-transform: translateY(4px); 81transform: translateY(4px); 82box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); 83border-bottom: none; 84} 85 86 87/* _____________________ 88*/ 89.text_box{ 90padding: 0; 91border-top: 1px solid #000000; 92display: table; 93table-layout: fixed; 94width: 100%; 95} 96 97.text_box p{ 98text-align: center; 99list-style-type: none; 100border: 1px solid #666; 101background-color: #FFF; 102display: table-cell; 103} 104 105.action_box{ 106display: flex; 107justify-content: space-around; 108margin-top: 40px; 109} 110 111.action_text{ 112display: inline-block; 113text-align: center; 114border: 1px solid #000000; 115font-size: 40px; 116width: 150px; 117height: 150px; 118background-color: #fff; 119} 120 121footer{ 122height: 200px; 123background-color: #fff; 124border-bottom: 1px solid #ccc; 125text-align: center; 126background: url(../guchokipar.jpeg); 127}

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

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

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

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

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

azuapricot

2019/08/19 05:53

「物理的に可能でしょうか。」 できるんじゃないですか?まずは自分でやってみることから初めましょう。 できないなら、まずは分離して考えてみては? じゃんけんゲームはコーディングできますか? ルーレットはコーディングできますか? どちらも出来てから話は始まるでしょう、現状あなたがどこまでコーディングできるのか此方としては実際のコードがないからわかりません。
y_waiwai

2019/08/19 05:53

可能かどうかききたいというはなしかな?
m.ts10806

2019/08/19 05:56

「可能です」だけの回答でよろしいでしょうか。 まずは書いた内容で自分ができるところまで組んでください。
ysk_m

2019/08/19 07:09

丸投げのつもりはありませんでしたが、失礼いたしました。 じゃんけんのみ、ルーレットのみのコードはできています。 組み合わせていく際に行き詰まってしまったため、可能かどうかの返答が頂きたかったです。 いま、自身のパソコンを持たず会社にいたためコードの無い質問となってしまいました。申し訳ありません。 もう少し自分で考えてみます。 ご回答ありがとうございました。
azuapricot

2019/08/19 07:14

ではご自身のパソコンがある環境になった際に質問を編集して現在のコードを載せるとよいと思います。 文章だけでどうしたいと言われても、コード作成依頼になってしまうので回答できません。 現状どこまで出来ていて、どこがわからないと詳しく質問すると、回答者も回答しやすいかと思います
m.ts10806

2019/08/19 07:18

ちなみに「~~ということがしたい可能ですか?」という聞き方は、誰がどう聞いても丸投げになります。ご注意を。
ysk_m

2019/08/19 07:19

azuapricotさん ありがとうございます。 質問出来る形にしてまた投稿させていただきます。
m.ts10806

2019/08/19 07:20

当質問に追記すれば良いだけの話かと思います(誰も急いでいませんので、ご自分のペースでどうぞ。この状態のまま別質問として投稿するのはマナーとしてはNGです)
ysk_m

2019/08/20 10:26 編集

m.ts10806さん ごもっともです。失礼いたしました。ありがとうございます。 昨夜、仕様を少し変更しながら試行錯誤しましたが、ルーレットが止まらなくなりました。 現在まだ途中です。 現在の状況・・・自分のルーレットを回す。stop時の条件分岐入力。しかしstopがそもそも効かず。 HTML 75行目あたりstopの効かせ方がわかりません。カッコの多さに混乱しています。 またstopした際にグー、チョキ、パーのtext入力も同時に行いたいですが、条件分岐の記載は間違っていますでしょうか? ご指導よろしくお願いいたします。 本文にコード記載しました。
m.ts10806

2019/08/20 00:55

えっと「質問に追記」と書いています。 こちらに書かれてもデフォルト非表示ですし目につきにくいです。 また「マークダウン」といってコードを見やすくする機能もあります。そちらを利用したうえで質問本文に追記してください。 https://teratail.com/help#about-markdown
azuapricot

2019/08/20 04:00

HTMLとCSSが大変なことになってるので再編集してください
kyoya0819

2019/08/20 05:52 編集

少なくとも自分は提示のコードのままだと読む気をなくします。 改行して無駄な空白を削除してある程度見やすくしてください。
ysk_m

2019/08/20 09:31

markdownの仕様を良く知らずに、お見苦しい内容で申し訳ありません。 修正しましたが、まだ難しいでしょうか?
m.ts10806

2019/08/20 09:40

はい。 PCだと右側にプレビューが出ていると思います。 そちら確認しつつ調整して投稿してください。
BluOxy

2019/08/20 09:43

コードを囲うときの記号は「'''」ではなく「```」ですね
date

2019/08/20 10:24

本当にこのコードだったら質問内容の前にインデントを付けるところから始めてください 後コメントに入れてしまったプログラムはコメントが見づらいので編集して消してください
m.ts10806

2019/08/20 12:54

手動でインデントをつけるのは大変なので「HTML 整形」「CSS 整形」などで出てくるサイトを利用すると良いですね。 それか、コードフォーマット機能のついたエディタを使ってください
guest

回答1

0

自己解決

ご返答いただいた先輩方、ありがとうございます。
JavaScriptの(){}の多さに途中でコードを差し込むと訳がわからなくなることが多々ありました。
皆様から厳しいお言葉を頂き、一度初心に帰って冷静にコードを書きなおしたところ動きました。
知識不足で質問自体がわかりづらくなり申し訳ありませんでした。
また、何かありましたらよろしくお願いいたします。
なお、解決できた理由は、変数・関数の定義と挿入する場所を上から順を追って行えた事でした。
以下、コードです。

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'>自分</li> 21 <li id='you_btn'>相手</li> 22 </ul> 23 </main> 24 25 <div class="random_box"> 26 <div class="outline"> 27 <div class="roulette" id="roulette1">start</div> 28 </div> 29 <div class="outline"> 30 <div class="roulette" id="roulette2">start</div> 31 </div> 32 </div> 33 34 35 </div> 36 37 38 <div class="text_box"> 39 <p>0〜9 = グー</p> 40 <p>10〜19 = チョキ</p> 41 <p>21〜29 = パー</p> 42 </div> 43 44 <div class="action_box"> 45 <div id="hands1" class="action_text">自分の出し手</div> 46 <div id="hands2" class="action_text">相手の出し手</div> 47 </div> 48 49 <div class='main_result'>結果</div> 50 51 <footer></footer> 52 53 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 54 <script language="javascript" type="text/javascript"></script> 55 <script> 56 57 // ルーレット1の変数定義 58 59 var click = 0; 60 var count = 0; 61 var timer = null; 62 var value = Math.floor(Math.random() * 30); 63 64 65 // ルーレット1の関数定義 66 67 function stop() { 68 clearInterval(timer); 69 $('#roulette1').text(value); 70 } 71 72 function Random() { 73 var value = Math.floor(Math.random() * 30); 74 $('#roulette1').text(value); 75 } 76 77 // 自分ボタン クリックでルーレット1(自分)を開始 78 79 $('#me_btn').click(function () { 80 81 if (click == 0) { 82 timer = setInterval(Random, 80); 83 click = click + 1; 84 85 // 2回目のクリックでストップ 86 87 } else if (click == 1) { 88 stop(); 89 judge(); 90 } 91 }); 92 93 // 止まった数字で条件分岐 94 // 0〜9 の時 グー 95 // 10〜19 の時 チョキ 96 // 21〜29 の時 パー 97 function judge() { 98 var result = ['グー', 'チョキ', 'パー']; 99 100 $('#hands1').text(result[value]); 101 102 if (value >= 0 && value <= 9) { 103 $('#hands1').text(result[0]); 104 } else if (value >= 10 && value <= 19) { 105 $('#hands1').text(result[1]); 106 } else { 107 $('#hands1').text(result[2]); 108 } 109 }; 110 111 // ルーレット2の変数定義 112 var click2 = 0; 113 var count2 = 0; 114 var timer2 = null; 115 var value2 = Math.floor(Math.random() * 30); 116 117 118 119 // ルーレット2の関数定義 120 121 function Random2() { 122 var value2 = Math.floor(Math.random() * 30); 123 $('#roulette2').text(value2); 124 } 125 126 function stop2() { 127 clearInterval(timer2); 128 $('#roulette2').text(value2); 129 } 130 131 132 $('#you_btn').click(function () { 133 134 if (click2 == 0) { 135 timer2 = setInterval(Random2, 80); 136 click2 = click2 + 1; 137 138 } else { 139 stop2(); 140 judge2(); 141 } 142 }); 143 144 // 止まった数字で条件分岐 145 // 0〜9 の時 グー 146 // 10〜19 の時 チョキ 147 // 21〜29 の時 パー 148 function judge2() { 149 var result2 = ['グー', 'チョキ', 'パー']; 150 151 $('#hands2').text(result2[value2]); 152 153 if (value2 >= 0 && value2 <= 9) { 154 $('#hands2').text(result2[0]); 155 } else if (value2 >= 10 && value2 <= 19) { 156 $('#hands2').text(result2[1]); 157 } else { 158 $('#hands2').text(result2[2]); 159 } 160 }; 161 162 </script> 163</body> 164 165</html>

CSS

1.outline { 2 text-align: center; 3 } 4 5 .random_box{ 6 display: flex; 7 justify-content: space-around; 8 } 9 10 .roulette { 11 display: inline-block; 12 13 text-align: center; 14 border: 1px solid #000000; 15 font-size: 40px; 16 width: 120px; 17 height: 100px; 18 background-color: #fff; 19 } 20 21 body { 22 margin: 0; 23 padding: 0; 24 text-align: left; 25 font-size: 32px; 26 background: url(../backimage2.jpeg) 27 28 } 29 30 header { 31 background-color: #fff; 32 border-bottom: 1px solid #ccc; 33 text-align: center; 34 background: url(../guchokipar.jpeg); 35 } 36 37 header h1{ 38 color:darkblue; 39 font-size: 100px; 40 margin-top: 0; 41 } 42 43 main { 44 border-bottom: 1px solid #ccc; 45 } 46 47 footer { 48 background-color: #fff; 49 border-bottom: 1px solid #ccc; 50 text-align: center; 51 } 52 53 p { 54 font-size: 30px; 55 text-align: left; 56 } 57 58 ul { 59 display: flex; 60 justify-content: space-around; 61 } 62 63 li { 64 width: 100px; 65 height: 50px; 66 font-size: 50px; 67 display: inline-block; 68 padding: 0.5em 1em; 69 text-decoration: none; 70 border-radius: 4px; 71 color: #ffffff; 72 background-image: linear-gradient(#6795fd 0%, #67ceff 100%); 73 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); 74 border-bottom: solid 3px #5e7fca; 75 cursor: grab; 76 77 } 78 79 li:active { 80 -webkit-transform: translateY(4px); 81 transform: translateY(4px); 82 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); 83 border-bottom: none; 84 } 85 86 87/* _____________________ 88 */ 89 .text_box{ 90 padding: 0; 91 border-top: 1px solid #000000; 92 display: table; 93 table-layout: fixed; 94 width: 100%; 95} 96 97 .text_box p{ 98 text-align: center; 99 list-style-type: none; 100 border: 1px solid #666; 101 background-color: #FFF; 102 display: table-cell; 103} 104 105 .action_box{ 106 display: flex; 107 justify-content: space-around; 108 margin-top: 40px; 109 } 110 111 .action_text{ 112 display: inline-block; 113 text-align: center; 114 border: 1px solid #000000; 115 font-size: 40px; 116 width: 150px; 117 height: 150px; 118 background-color: #fff; 119 } 120 121 footer{ 122 height: 200px; 123 background-color: #fff; 124 border-bottom: 1px solid #ccc; 125 text-align: center; 126 background: url(../guchokipar.jpeg); 127}

投稿2019/08/20 14:30

ysk_m

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問