JavaScriptでランダムな数字をつくる方法をメモしておきます。
ランダムな数字をつくることができれば、それをもと予想外の結果が表示できて、ゲーム性が生まれますよね。
ランダムな数字をつくるには
JavaScriptでランダムな数字をつくるには…
これです
↓
Math.random()
これで、小数点以下のランダムな数字ができます。
小数点以下のランダムな数字っていうのは、たとえばこういうことです。
↓
0.7089312012169603
あとでこれを整数にしたりもできますが、それはこのページの後半で書くとして、ひとまずこのまま話を進めますね。
やってみよう
では…
実際にどんなふうに記述すればいいのか、ちょっとやってみます。
<html> <head> </head> <body> <script> // 変数aを使う宣言 var a; //変数aにランダムな数字を代入 a=Math.random(); //aを画面に表示 document.write(a); </script> </body> </html>
※少しでもわかりやすいように、JavaScriptのところは丁寧に、HTMLの部分は究極にあっさりと書いています。
緑色の部分がJavaScriptです。
これをメモ帳などのエディタにコピペしてHTML形式で保存し、ファイルを開くと…
ブラウザの画面に小数点以下のランダムな数字が表示されます。
このままだと数字の1より小さい数ばかり
これでたしかにランダムな数字はつくれるようになりました。
でも、この方法だと数字の1より小さい数しかつくれません。
何度かブラウザをリロード(更新、再読み込み)して、確かめてみます。
1回目の表示結果
↓
0.427940555770828
2回目の表示結果
↓
0.6279808447799727
3回目の表示結果
↓
0.25192833237803625
はい。というように、どれも数字の1より小さい数ばかりですよね。
ランダムな整数をつくりたい
では、ランダムな整数をつくりたいときはどうしたらいいのか。
手順はこうです。
手順
1.上の方法でつくった数字に、ある程度の数をかけて大きくする
2.小数点以下を切り捨てる
これでランダムな整数ができあがります。
小数点以下を切り捨てるには
数値の小数点以下を切り捨てるには、これを使います。
Math.floor(数値)
では、これを実際に組み込んでみますね。
やってみよう
小数点以下を切り捨てる記述(赤い部分)を組み込むと、こうなります。
<html> <head> </head> <body> <script> // 変数aを使う宣言 var a; //変数aにランダムな整数を代入 a=Math.floor(Math.random()*5); //aを画面に表示 document.write(a); </script> </body> </html>
緑色の部分がJavaScriptです。
今回は、Math.random()でつくったランダムな数字に、適当に5をかけて大きくしています。
赤い部分が、小数点以下を切り捨てる記述です。
a=Math.floor(Math.random()*5);
5をかけて大きくした数字の小数点以下を切り捨てています。
そして、それを変数aに代入しています。
かける数字で最大値が決まる
5をかけることで、0から4までのランダムな整数ができあがります。
もしも101をかければ、0から100までのランダムな整数ができあがります。
つまり、かけた数字より一つ小さい数字が、最大値になります。
なぜなのか?
その仕組みは「ランダムな数字の最大値を決める仕組み」に書きました。
それから…
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。