初心者です。
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"></script> 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}
回答1件
あなたの回答
tips
プレビュー