乱数を扱う
このページでは、JavaScriptで乱数を発生させる方法、またその乱数を扱う方法についてみていきます。 乱数はゲーム等を作る時に必要となる場合がよくあります。
乱数を発生させる
JavaScriptの乱数は、0以上1未満の範囲で取得できます。 例えば以下のスクリプトを実行したサンプルページをご覧下さい。
<script type="text/javascript">
<!--
for (i=0 ; i < 20 ; i++)
{
document.write( Math.random() + "<br>");
}
// -->
</script>
サンプル（別窓）
for文を使って、乱数を20回発生させています。 そしてdocument.write()で書き出しました。0～1の範囲で乱数が発生しているのが分かります。 上記のように、Math.random()が乱数を発生させる命令文です。randomの括弧内は何も記入しません。
- Math.random()
- 0以上1未満の範囲で乱数を発生させる
ただし、上記サンプルのような乱数では、扱いにくいと思います。 それで、具体例を用いて乱数の実際的な扱い方について見てみることにしましょう。
乱数を使ったサンプルスクリプト
では英単語の色名を当てる簡単なクイズを作ってみましょう。 以下のスクリプトをHTMLのBODY内に記入して下さい。 またbodyタグの中には、下記のようにonloadイベントを記入してください。 onloadイベントは、ページが読み込まれた時に実行されます。
<body onload="Mondai()"> <form name="quiz"> <input type="text" value=""> <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- //色名の英単語を配列に入れる var col=new Array("red","blue","yellow","green","white"); //乱数を入れる変数 var Rnd; //テキストボックスに問題文（色名）を表示する関数 function Mondai(){ //0～4までの乱数を発生させる Rnd=Math.floor( Math.random() * 5 ); document.quiz.elements[0].value=col[Rnd]; } //正誤判定関数 function Push(num){ //引数を数字に変換 var n=parseInt(num); //正解なら次の問題を表示、間違っていたらアラートを表示する if ( n == Rnd ){ Mondai(); }else{ alert("違います！"); } } // --> </script>
サンプル（別窓）
ではスクリプトを見ていきましょう。フォームのボタンのonclickイベントでは、 関数Push()を呼び出すようにしています。 引数は、色名を入れた配列colの対応する数字を記入しています。
そして、乱数を入れる変数Rndを宣言しています。 上記のように関数の外で宣言された変数は、 グローバル変数と言って複数の関数で使うことができます。 （関数の中で宣言された変数はその関数の中でしか使えません）。
続いて、関数Mondai()を見ていきましょう。最初に乱数を1回発生させ、 0～4の範囲の整数に整えて変数Rndに代入します。 上で述べたようにMath.random()は0以上1未満の乱数なので、 ５倍して切捨てを行うことにより0～4の範囲の整数が得られます。 そして得られた乱数を使って、配列colの対応カラー名をテキストボックスに表示します。
今度は関数Push()です。 最初に引数をparseInt()を使って数字に変換しています。 元々引数を数字で指定しているのですが、残念ながらうまく動きません。 このようなこともあるので、とりあえず変換しています。
そしてif文を使って、 引数（を数字に変換した変数n）と変数Rndを比較します。 （ここでも変数Rndを使っているので、グローバル変数にした訳です）。 正解なら次の問題を表示するため、関数Mondai()を呼び出します。 間違っていたらalert()を使って間違いを指摘します。