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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1057閲覧

javascriptでルーレットを作っているのですがスタートを押さずにストップを押すと押した数だけ止まらないマス目が出てしまいます。

osusi

総合スコア15

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/05/25 02:29

編集2019/05/25 02:51
<!DOCTYPE html> <html lang="ja"> <head> <meta charset ="UTF-8"> <title>ルーレット</title> <link rel = "stylesheet" href = "roulette.css"> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var roulette_id; var start_flag = false; var cell = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; var num =1; var random; function random_start() { if ( start_flag === false) { roulette_id = setInterval(roulette_start, 100); start_flag =true; } } function roulette_start() { $('#td' + num).css('backgroundColor', 'white'); random = Math.floor(Math.random() * cell.length); num = cell[random]; $('#td' + num).css('backgroundColor', 'red'); } function random_stop() { clearInterval(roulette_id); start_flag = false; $('#td' + num).css('backgroundColor', 'blue'); cell.splice(random, 1); num=0; } function random_reset() { start_flag =false; clearInterval(roulette_id); cell = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; $("td").css('backgroundColor', 'white'); } $(function() { $('#start').click(random_start); $('#stop').click(random_stop); $('#reset').click(random_reset); }); </script> </head> <body> <table> <tr> <td id="td1">1</td> <td id="td2">2</td> <td id="td3">3</td> <td id="td4">4</td> </tr> <tr> <td id="td5">5</td> <td id="td6">6</td> <td id="td7">7</td> <td id="td8">8</td> </tr> <tr> <td id="td9">9</td> <td id="td10">10</td> <td id="td11">11</td> <td id="td12">12</td> </tr> <tr> <td id="td13">13</td> <td id="td14">14</td> <td id="td15">15</td> <td id="td16">16</td> </tr> </table> <button id ="start">スタート</button> <button id ="stop">ストップ</button> <button id ="reset">リセット</button> </body> </html> ```### 前提・実現したいこと プログラミング初心者です。16桁の数字でルーレットを作っているのですが、 スタートボタンを押さずに、ストップボタンを押すと、押した数だけ、止まらないマス目が残ります。 スタートボタンを押下後のストップ以外は反応しないようにしたいです。 できるだけソースコードはそのままでどこを追加すればいいのでしょうか。 ### 発生している問題・エラーメッセージ
### 該当のソースコード ### 試したこと どこにどう追加したらいいのか意味がわからないです。どなたか 教えてください!よろしくお願いします。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2019/05/25 02:35

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
osusi

2019/05/25 02:51

すいません今追加してみました!教えてくれてありがとうございます!
guest

回答3

0

こんにちは

いくつかやり方がありそうですが、

  • start_flag の値が変わるたびに、3つのボタンそれぞれが disabled かどうかを設定する

という方法が考えつきます。
その上で、ご質問にあるコードをなるべく生かすことにすると、まずは以下のような関数を追加します。

javascript

1function buttons_reset() { 2 $('#start').prop('disabled', start_flag); 3 $('#stop').prop('disabled', !start_flag); 4 $('#reset').prop('disabled', start_flag); 5}

上記の関数によって、

  • ルーレットが止まっているとき: 「ストップ」はクリックできない。他の2つはクリックできる。
  • ルーレットが動いているとき: 「ストップ」だけクリックできる。他の2つはクリックできない。

ようにできます。

上記の buttons_reset() を以下の4カ所で使います。

まず、初期表示のときです。

javascript

1 $(function() { 2 $('#start').click(random_start); 3 $('#stop').click(random_stop); 4 $('#reset').click(random_reset); 5 6 buttons_reset(); // この行を追加 7 });

さらに、各ボタンがクリックされたときの start_flag に true か false を代入した直後に呼びます。

javascript

1 function random_start() { 2 3 if ( start_flag === false) { 4 roulette_id = setInterval(roulette_start, 100); 5 start_flag =true; 6 buttons_reset(); // この行を追加 7 } 8 }

javascript

1 function random_stop() { 2 clearInterval(roulette_id); 3 start_flag = false; 4 buttons_reset(); // この行を追加 5 $('#td' + num).css('backgroundColor', 'blue'); 6 cell.splice(random, 1); 7 num=0; 8 }

javascript

1 function random_reset() { 2 start_flag =false; 3 buttons_reset(); // この行を追加 4 clearInterval(roulette_id); 5 cell = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; 6 $("td").css('backgroundColor', 'white'); 7 }

以下に上記の修正後のHTML(ファイル名は index.html) を上げていますので、参考にしてください。

先に説明した修正は以下です。

以下のような感じでボタンの disabled 状態が変わります。

イメージ説明

この後の、さらなるリファクタリングとしては、フラグ変数はプログラムの見通しを悪くさせるので、

  • start_flag を無くして roulette_id に有効な値が入っているかどうかで、ルーレットが動作中かどうかを判定する。

といったリファクタをしていってもよいかもしれません。

参考になれば幸いです。

投稿2019/05/25 04:11

編集2019/05/25 04:15
jun68ykt

総合スコア9058

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

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

osusi

2019/05/25 05:12

とても分かりやすい解説ありがとうございました!助かりました(><)
guest

0

スタートしていないとストップを押せないようにするなら以下のようにifでflagを判定したらどうでしょうか?

js

1function random_stop() { 2if ( start_flag === true) { 3clearInterval(roulette_id); 4start_flag = false; 5$('#td' + num).css('backgroundColor', 'blue'); 6cell.splice(random, 1); 7num=0; 8} 9}

もしくは
>できるだけソースコードはそのままで
とのことなので
var num =0;
にするとかどうでしょう

投稿2019/05/25 03:09

junzi

総合スコア279

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

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

osusi

2019/05/25 03:54

無事解決しました!ご丁寧にありがとうございました(><)
guest

0

ベストアンサー

スタートボタンを押下後のストップ以外は反応しないようにしたいです。
できるだけソースコードはそのままでどこを追加すればいいのでしょうか。

いろんな手がありますが、「ルーレットが動いている」状態を「roulette_idに値が入っている」という状態で表すのが簡単だと思います。

clearIntervalを行うたびにroulette_idをnullやundefinedに初期化し、それを判定することで停止処理をスキップするというような方法です。

js

1function isRouletteStarted() { 2 return roulette_id == null 3} 4 5function random_stop() { 6 if (!isRouletteStarted()) return; 7 // ...

投稿2019/05/25 03:03

編集2019/05/25 03:05
otolab

総合スコア763

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

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

osusi

2019/05/25 03:54

無事解決しました!ご丁寧にありがとうございました(><)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問