エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

JavaScriptで乱数を生成

こんにちは。たいらです。
今回はJavaScriptで乱数を発生させるプログラムを作成してみました。
せっかくなので、動物の英語名クイズをやってみました。

 

フォルダ構成

f:id:Tairax:20171010210421p:plain

 

JavaScript

// 動物の配列
var animalList = new Array("dog","cat","bird","mouse","monkey");

 

// 動物の日本語名の配列
var animalJPNList = new Array("犬","猫","鳥","ネズミ","サル");

 

// 生成した乱数を格納
var random;

 

/**
* 乱数を発生させる関数
*/
function question() {
// 0から5までの乱数を生成

    random = Math.floor(Math.random() * 5);

// テキストボックスに動物の英語名を格納
    document.quiz.elements[0].value = animalList[random];
}

 

/**
* ボタンが押下されたとき判定する関数
* @param button 押されたボタン
*/
function push(button) {
// 押下されたボタンのidとvalueを取得
    var id = button.id;
    var value = button.value;

// 押下されたボタンがテキストボックス内の英語名と一致しているか判定
    if (id == animalList[random]) {
        alert("正解!");
        question();
    } else {
        alert("不正解!\n正解は" + animalJPNList[random]);
        question();
    }
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>乱数</title>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <script type="text/javascript" src="../script/CreateRondom.js"></script>
    </head>
    <body onload="question()">
        <form name="quiz">
            <input type="text" value="" id="textBox">
            <input type="button" value="犬" id="dog" onclick="push(this)">
            <input type="button" value="猫" id="cat" onclick="push(this)">
            <input type="button" value="鳥" id="bird" onclick="push(this)">
            <input type="button" value="ネズミ" id="mouse" onclick="push(this)">
            <input type="button" value="サル" id="monkey" onclick="push(this)">
        </form>
    </body>
</html> 

 

実行結果

f:id:Tairax:20171010212208p:plain

鳥ボタンを押します。

f:id:Tairax:20171010212434p:plain

正解とalertが出ました!

f:id:Tairax:20171010212529p:plain

不正解のネズミボタンを押しましょう。

f:id:Tairax:20171010212636p:plain

不正解のalertが出ました!

乱数を発生させるポイントは「Math.random() * 5」ですかね。
「Math.random()」は0.0以上1.0未満までのランダムな浮動小数点を発生させることができます。
なので、配列のインデックスで使うために、5倍、かつ「Math.floor関数」で端数を切り捨ててます。
やっぱり、自分で作ると理解が深まりますね~(´∀`)

 

参考にさせて頂いたサイト様

乱数を扱う-JavaScript入門

random関数 - Mathクラス - JavaScript入門