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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1409閲覧

ルーレットを完成させたいです。

kasabranka

総合スコア9

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/02/27 13:14

ルーレットを完成させたいです。

下記の要件を満たしたルーレットを作成しています。9番のルーレットが16回停止後はスタートボタが押せなくなる(リセットボタンで押せる様になる)だけどうしてもできません。
”16回停止後”というのをどの様に書いたら良いのか分かりません。
アドバイスをお願いします。

1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする(ストップボタンで再び押せるようになる)
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.ストップボタンを押した目が、ユーザに分かるようにする(目の色が変わるなど)
7.一度ストップボタンで停止した目は次回以降は停止しない
8.スタートとストップを16回の繰り返しで、全ての目に停止する
9.16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
10.過去に停止した目が何か、ユーザに分かるようにする(目に色がつくなど)
11.リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)

発生している問題・エラーメッセージ

エラーメッセージはありません

該当のソースコード

<html lang="ja"> <head> <meta charset="UTF-8"> <title>ルーレット</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> var l = 20; var id, rand; var dele = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; $(function() { $('#start').click(roullettestart); $('#stop').click(roullettestop); $('#reset').click(roullettereset); $('#stop').prop('disabled',true); }); function roullettestart(){ id = setInterval(round,100); $('#start').prop('disabled',true); $('#stop').prop('disabled',false); if(count(dele)===0){ $('#start').prop('disabled',true); } } function roullettestop(){ $('td').eq(l).css('background','orange'); dele.splice(rand,1); console.log(dele); l=20; clearInterval(id); $('#start').prop('disabled',false); $('#stop').prop('disabled',true); } function roullettereset(){ $('td').css('background','#ffffff'); l = 20; dele=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; clearInterval(id); $('#start').prop('disabled',false); $('#stop').prop('disabled',true); } function round(){ $('td').eq(l).css('background','#ffffff'); rand =Math.floor(Math.random() * dele.length); $('td').eq(dele[rand]-1).css('background','#ff0000'); l = dele[rand]-1; } </script> <style> table,td { border:solid 1px black; font-size:70px; text-align:center; } </style> </head> <body> <table id="t1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr> <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr> </table> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </body> </html>

試したこと

下記の記述をしました。
if(count(dele)===0){
$('#start').prop('disabled',true);
}

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

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

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

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

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

guest

回答2

0

考え方はあっているようですが、
1.配列の個数を取得するには.lengthを使います。
2.判定のタイミングは、ストップボタンを押したときに配列deleが0であれば、スタートを非活性のままにする。
詳しくは以下のようになると思います。

js

1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>ルーレット</title> 5 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 6 7 <script> 8 var l = 20; 9 var id, rand; 10 var dele = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; 11 12 13 $(function() { 14 $('#start').click(roullettestart); 15 $('#stop').click(roullettestop); 16 $('#reset').click(roullettereset); 17 $('#stop').prop('disabled',true); 18 }); 19 20 function roullettestart(){ 21 id = setInterval(round,100); 22 $('#start').prop('disabled',true); 23 $('#stop').prop('disabled',false); 24 } 25 26 function roullettestop(){ 27 $('td').eq(l).css('background','orange'); 28 dele.splice(rand,1); 29 console.log(dele.length); 30 l=20; 31 clearInterval(id); 32 if(dele.length!==0){ 33 $('#start').prop('disabled',false); 34 } 35 $('#stop').prop('disabled',true); 36 } 37 38 function roullettereset(){ 39 $('td').css('background','#ffffff'); 40 l = 20; 41 dele=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; 42 clearInterval(id); 43 $('#start').prop('disabled',false); 44 $('#stop').prop('disabled',true); 45 } 46 47 function round(){ 48 $('td').eq(l).css('background','#ffffff'); 49 rand =Math.floor(Math.random() * dele.length); 50 $('td').eq(dele[rand]-1).css('background','#ff0000'); 51 l = dele[rand]-1; 52 } 53 </script> 54 55 <style> 56 table,td { 57 border:solid 1px black; 58 font-size:70px; 59 text-align:center; 60 } 61 </style> 62 63 </head> 64 65 <body> 66 <table id="t1"> 67 <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> 68 <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr> 69 <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr> 70 <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr> 71 </table> 72 <button id="start">スタート</button> 73 <button id="stop">ストップ</button> 74 <button id="reset">リセット</button> 75 </body> 76</html>

投稿2020/02/27 14:55

junzi

総合スコア279

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

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

kasabranka

2020/02/27 17:36

.lengthなんですね!勉強になりました!ありがとうございます!!
guest

0

ベストアンサー

下記の2点を修正すればいいでしょう。

配列の要素数の取得は、count(dele)ではなくdele.lengthです。

16回停止後はスタートボタンを押せなくするコードは roullettestop内に記述する必要があります。

js

1 function roullettestop(){ 2 $('td').eq(l).css('background','orange'); 3 dele.splice(rand,1); 4 console.log(dele); 5 l=20; 6 clearInterval(id); 7 if(dele.length===0){ 8 $('#start').prop('disabled',true); 9 } else { 10 $('#start').prop('disabled',false); 11 }; 12 $('#stop').prop('disabled',true); 13 }

ストップを押したとき配列が空でなければスタートを押せるようにするという条件にした方がシンプルです。

js

1 function roullettestop(){ 2 $('td').eq(l).css('background','orange'); 3 dele.splice(rand,1); 4 console.log(dele); 5 l=20; 6 clearInterval(id); 7 if(dele.length > 0){ 8 $('#start').prop('disabled',false); 9 }; 10 $('#stop').prop('disabled',true); 11 }

投稿2020/02/27 14:57

hatena19

総合スコア33620

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

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

kasabranka

2020/02/27 17:35

配列が空でなければスタートを押せるという考え方もあるんですね!分かりやすいご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問