現在、簡単なランダムゲームを jQuery を駆使し作っているのですが、ランダムな値を設定する方法が分からず、行き詰まっています。
今回私が作っているものの構成としては、以下のようなものです。
- どちらかのボタンを押したら不正解ラッパーが
fadeIn
される - どちらかのボタンを押したら正解ラッパーが
fadeIn
される
しかし、もう一度実行した際に前回の正解ボタンを押しても正解とは限らない(Random
値がセットされる)と言うふうにしたいです。
こちらで Javascript における Random
の使い方を調べたところ、Math.random()
を使えば良いという事でしたので、 num1
と num2
の値をセットしてみましたが、ボタンへの割当方が分からなかったので当たり前ですが動作しませんでした。
getElementById()
などでも使って値を割り当てるのでしょうか?
私の推測だと
- コードの最初に
Math.random()
でランダム値をセットして、 - 変数
num1
とnum2
にそれぞれ1
と2
を割り当てる 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;
}