数当てゲーム

記事の作成日 : 2020/02/12

突然ですが、数当てゲームを作りました。
実装までのステップを記録していきます。


完成例

回答する(0~100までの数):

ヒントと結果:
この数当てゲームで必要なもの。
  1. 結果を表示する。
  2. 関数を使ってみる。
  3. 変数のタイプ

新しいもの

  1. if 文を使う
  2. Math.random() を使う
  3. Math.round() を使う

その1

初めに、目標となる 値 を設定します。
変数は、 と例えるのが一番わかりやすいと思いますね。

        // 目標となる 変数 goal に ランダムな値(0~100)を入れる。
        // random で ランダムな小数を取得し、round で、そのまま四捨五入しています。
        const goal = Math.round( Math.random() * 100 );

        // ついでに何回トライしたかをカウントする 変数 retry を宣言
        let retry = 0;

        /* const は 定数のような扱い(変更できない&再定義できない)
           let は 再定義ができない */
        

Math.random()

これは、ランダムな値を生成する やつです。
引数はありません。

戻ってくる値は、ランダムな小数点以下の数値です。
例えば、
こんな感じの値が出てきます。

Math.round( num )

これは、四捨五入ができる やつです。
下の表では、四捨五入できていることが確認できます。


入力した数値 1.0 1.4 1.5 -5.0 -5.4 -5.5
Round (四捨五入)



その2

値が入力されて、目標(goal)の値に
  1. 一致するか?
  2. それより大きいか?
  3. それより小さいか?
を判定させる、if文、結果,を書きます。
ついでにボタンが押されることで実行されます。

IF文ってなんぞや?

IF は、 もし といういう意味です。

日本語

もし、リンゴを 5個 以上 持っているのならば、リンゴを2個に減らす(2個にする)。

Javascript にすると...

if ( apple > 5 ){ apple = 2; }

こうなります。
かっこ () の中は、条件です。
かぎかっこ {} の中は、条件が達成されたら実行されます。
ですが else文による例外もあります。

それを踏まえて!
        // ボタンが押されたら、 check() 関数が実行されます。
        function check(){

            // 入力された値を取得します。
            let inputNum = document.getElementById("num").value;

            retry += 1; // リトライ回数 1ずつ増やしていく。

            // 目標と 同じ値の場合
            if (goal == inputNum) {
                // 結果を HTML input id="calc" に 挿入します。
                document.getElementById("calc").value = retry + " 回で当てました。"
                alert("あたり!");
            }

            // 目標より 小さかった場合
            if (goal > inputNum) {
                document.getElementById("calc").value = "その数は小さいです。";
            }

            // 目標より 大きかった場合
            if (goal < inputNum) {
                document.getElementById("calc").value = "その数は大きいです。";
            }
        }
        
HTML側のコード
            回答する:<input type="number" id="num" /> <!-- ここに値を入力できる -->
            <input type="button" value="回答を確認する" onclick="check()" />
            
            <br><br>
            ヒントと結果:<input type="text" id="calc">
        

まとめ

変数の扱いには慣れてきましたか。
if文を覚えるだけで、できることが広がります。
この機会にif文を覚えていってください。

input の text や、スクリプトの document.getElementById.value がよくわからないときは、
結果を表示するを参考にしてみてください。



<<前 : 計算をしてみる >>次 : IF文を使う