1

現在、簡単なランダムゲームを jQuery を駆使し作っているのですが、ランダムな値を設定する方法が分からず、行き詰まっています。

今回私が作っているものの構成としては、以下のようなものです。

  • どちらかのボタンを押したら不正解ラッパーが fadeIn される
  • どちらかのボタンを押したら正解ラッパーが fadeIn される

しかし、もう一度実行した際に前回の正解ボタンを押しても正解とは限らない(Random 値がセットされる)と言うふうにしたいです。

こちらで Javascript における Random の使い方を調べたところ、Math.random() を使えば良いという事でしたので、 num1num2 の値をセットしてみましたが、ボタンへの割当方が分からなかったので当たり前ですが動作しませんでした。
getElementById() などでも使って値を割り当てるのでしょうか?

私の推測だと

  • コードの最初に Math.random() でランダム値をセットして、
  • 変数 num1num2 にそれぞれ 12 を割り当てる
  • num1 が割り当てられたボタンは正解、num2 が割り当てられたら不正解

と言う順序で書けば求めている結果になると推測しているのですが、この考え方はあっていますでしょうか?


Javascriptコード:

$(document).ready(function() {

    let num1 = 1;
    let num2 = 2;
    
    Math.random(num1,num2); //ここで何をすれば良いのかわからない

    $('#first').click(function(){
        $('#correct').fadeToggle(1000);
        $('.btn').css('display','none');

    });
    $('#second').click(function(){
        $('#incorrect').fadeToggle(1000);
        $('.btn').css('display','none');
    });
});

HTMLコード:

<button class="btn" id="first">Click Me!</button>
<button class="btn" id="second">Click Me!</button>

<div class="wrapper" id="incorrect">不正解……</div>
<div class="wrapper" id="correct">正解!</div>

CSSコード:

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300&display=swap');

.btn {
    background-color: red;
    border: none;
    height: 100px;
    width: 200px;
    border-radius: 50px;
    font-size: 25px;
    color: white;
    opacity: 0.7;
    box-shadow: 0px 6px #990f05;
    cursor: pointer;

}
.btn:hover {
    opacity: 1;
}
.btn:active {
    position: relative;
    top: 6px;
    box-shadow: none;
}
.wrapper  {
    height: 400px;
    font-size: 70px;
    text-align: center;
    padding-top: 150px;
    display: none;
    color: white;
    font-family: "Zen Maru Gothic";
    font-weight: bold;
}
#correct {
    background-color: #33FF69;
}
#incorrect {
    background-color: red;
}

2 件の回答 2

0

jQueryのランダムおみくじなどを参考にしました。

<div class="random_button">
  <div class="rand_name"></div>
  <button type="button1" class="stop">Click Me!</button>
  <button type="button2" class="stop">Click Me!</button>
  <button type="button1" class="restart" style="display: none;">Click Me!</button> 
  <button type="button2" class="restart" style="display: none;">Click Me!</button>
</div>

<script>
$(function(){
    var aryList = ['正解!','不正解……'];

    var key = 0;
    var max_len = aryList.length - 1;
    var randStart;
    var speed = 30; //シャッフルスピード

    var randShuffle= function(){
         if(key > max_len) key = 0;
         $('.rand_name').text(aryList[key]);
         key++;
     }

     randStart = setInterval(randShuffle, speed);


     //回転を止める(抽選結果)
     $('.stop').click(function(){
         var random = Math.floor(Math.random() * (max_len + 1)); //ランダムで配列の数を取得
         $('.rand_name').text(aryList[random]); //対象の数値に該当する文字を表示 
        clearInterval(randStart); //シャッフルストップ
    
    });

   //回転を再開する
    $('.restart').click(function(){
        $(this).hide(); //再開ボタンの非表示
        $('.stop').show(); //止めるボタンの表示
        randStart = setInterval(randShuffle, speed); //シャッフル再開
    });

});

 </script>`
0
//範囲の乱数生成
function RandomInt(MinSize,MaxSize){
    return parseInt(Math.random() * (MaxSize - MinSize + 1)) + MinSize;
}

//▼使い方

変数 = RandomInt(1,2)
//変数 = 1 or 2

変数 = RandomInt(1,2) * 10
//変数 = 10 or 20

変数 = RandomInt(1,9) * 0.1
//変数 = 0.1 ~ 0.9

上記functionを別途記述しておいて都度呼び出すとかどうでしょうか。
同じJavascriptの自身の記述なのでよっぽど動作すると思いますが、Adobe Illustrator用のJavascriptなので動作しなかったらすみません。

以下ネットから抜粋
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
Math.random()は 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。
ユーザーが初期シードを選択、またはリセットすることは出来ません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。