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

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

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

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

jQuery

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

Q&A

解決済

2回答

845閲覧

jQueryを使ってルーレット作成

Suzumi41

総合スコア19

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/02/22 06:42

前提・実現したいこと

くじ引きやビンゴのような、16の番号をランダムで抽選するルーレットを作成したいです。
必須要件は以下となります。

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

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

現在、6・8・9・10をまだ表現出来ておりません。
表現するための、ヒントや正しい表記を教えて頂けると幸いです。

該当のソースコード

jQuery

1 <script> 2 var number = 0; 3 var interval; 4 $(document).ready(function(){ 5 for(var i = 0; i <= 13; i+=4){ 6 var tr = $('<tr>'); 7 for(var j =1; j <= 4; j++){ 8 var content = (i+j); 9 tr.append($('<td class="num' + (i+j) + '">').text(content)); 10 } 11 $('#roulette tbody').append(tr); 12 } 13 $('#start').on('click',function(){ 14 interval = setInterval(count, 100); 15 $('#start').attr("disabled", "disabled"); 16 $('#stop').removeAttr("disabled"); 17 18 }); 19 20 $('#stop').on('click',function(){ 21 clearInterval(interval); 22 $('.num' + number).css({'background-color': '#6495ed'}); 23 number = 0; 24 $('#start').removeAttr("disabled"); 25 $('#stop').attr("disabled", "disabled"); 26 }); 27 28 $('#reset').on('click',function(){ 29 clearInterval(interval) 30 }); 31 32 function count(){ 33 $('.num' + number).css({'background-color': '#ffffff'}); 34 number = Math.floor(Math.random() * 16); 35 $('.num' + number).css({'background-color': '#f08080'}); 36 } 37 38 }); 39 </script>

HTML

1<body> 2 <div id = "main"> 3 <table id="roulette"> 4 <tbody></tbody> 5 </table> 6 </div> 7 <button id="start">start</button> 8 <button id="stop">stop</button> 9 <button id="reset">reset</button> 10</body>

CSS

1body, table { 2 margin: 0 auto; 3 text-align: center; 4 width: 50%; 5 font-family: courier; 6} 7table{ 8 border: solid 2px #a9a9a9; 9 border-collapse: collapse; 10 margin-top: 40px; 11} 12tr, td { 13 border: solid 1px #a9a9a9; 14} 15td{ 16 padding: 20px; 17 margin: 0; 18} 19button { 20 margin-top: 20px; 21 font-family: courier; 22 background-color: #afeeee; 23 border-radius: 3px; 24}

試したこと

6を実行する際に下記部分をいじってみました。
$('#stop').on('click',function(){
clearInterval(interval);
$('.num' + number).css({'background-color': '#6495ed'});
number = 0;
$('#start').removeAttr("disabled");
$('#stop').attr("disabled", "disabled");
});

⇒ここに$('#start').click($('.num' + number).css({'background-color': '#6495ed'}););
を追加する

しかし、マス目ごと消えてしまいました。

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

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

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

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

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

guest

回答2

0

9はできているように思いました。
ただ、動かしてみて思ったのは、現状完全ランダムで動いているので、例えば一回目に2を選択したあと、二回目のルーレットで2を通過すると選択色が解除されてしまいます。

考えかたのヒントということなので

  1. numberではなくnumbersという配列にし、あらかじめ1-16で初期化します。
  2. ↓ここのところは

javascript

1number = Math.floor(Math.random() * 16);

あとで、numbers[index]と指せるようなindexを乱数で求めます。長さは変動するのでMath.floor(Math.random() * numbers.length)みたいなことになるかと思います。
0. そして、stopのところでは、numbersからindex番目を削除します。その後、numbersのlengthをみて0個になっていればstartをdisableにします。
もし、9をよりわかりやすくするのであれば、過去の色を現状の選択色以外にして、startの最初で(numberに相当するindexがかわるまえに).num+indexをその過去の色にかえてあげると、直近選択中~選択までは青(水色?)、それ以前は例えば緑みたいにできるように思いました。
0. リセットは、地道にやるしかないですね。そもそもリセットボタンは停止中しか押せなくていい気もします。1から16までで.num+xの色をリセットし、startをenable/stopをdisableにするという処理ですよね。

投稿2019/02/22 08:27

papinianus

総合スコア12705

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

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

Suzumi41

2019/03/01 04:27

numbersで初期化することにより、分かりやすくなりました。 有難うございます。
guest

0

ベストアンサー

###6
1〜16の数字を配列に格納し、配列からランダムに出目を出す。プレイのたびに出た数字を配列から取り除き(filter、splice)、次回のプレイは取り除いた後の配列を用いる。

###8
6の配列が空になったらDOM要素を操作する

###9
6で数字を取り除くときにその数字に対応するDOM要素を着色

###10
これは初期状態に戻す処理をコーディングすればいいので特に困らないかと思います

取り急ぎ考え方の一案のみですが。
具体的な疑問がでてきたらまた聞いてください

投稿2019/02/22 08:04

yu-smc

総合スコア610

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

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

Suzumi41

2019/03/01 04:26

時間かかりましたが、spliceを使うことで謎がとけました。 有難うございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問