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

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

ただいまの
回答率

87.49%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,004

score 9

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

下記の要件を満たしたルーレットを作成しています。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);  
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

<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);
            }

            function roullettestop(){
                $('td').eq(l).css('background','orange');
                dele.splice(rand,1);
                console.log(dele.length);
                l=20;
                clearInterval(id);
                if(dele.length!==0){
                    $('#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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/28 02:36

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

    キャンセル

checkベストアンサー

+1

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

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

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

            function roullettestop(){
                $('td').eq(l).css('background','orange');
                dele.splice(rand,1);
                console.log(dele);
                l=20;
                clearInterval(id);
                if(dele.length===0){
                   $('#start').prop('disabled',true);  
                 } else {
                   $('#start').prop('disabled',false);                
                 };
                $('#stop').prop('disabled',true);
            }

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

            function roullettestop(){
                $('td').eq(l).css('background','orange');
                dele.splice(rand,1);
                console.log(dele);
                l=20;
                clearInterval(id);
                if(dele.length > 0){
                   $('#start').prop('disabled',false);                
                 };
                $('#stop').prop('disabled',true);
            }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/28 02:35

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

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る