【JavaScript】if文と比較演算子を使った数当てゲーム【day115】

今日は、【JavaScript】if文と比較演算子を使った数当てゲームのアウトプットです。

こんにちは。駆け出しコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

【JavaScript】if文と比較演算子を使った数当てゲーム
本記事の参考文書
あとがき

【JavaScript】if文と比較演算子を使った数当てゲーム

前回まで、ダイアログボックス(alert,confirm,prompt)を使ってif文や変数の学習をしてきました。

今日は、「比較演算子」を使いつつ、数当てゲームづくりに挑戦したのでアウトプットです。

今回アウトプットするもの
・Math.random()
・parseInt()
・比較演算子
・データ型

書籍:JavaScript超入門を参考に作りました。

ゲームの内容

今回も、プロンプト(入力蘭のあるダイアログボックス)を使います。

・プロンプトに、0〜5の数字を入れる。
・答えと比べて、同じなら「あったり〜♪」
・答えと比べて、大きいなら「残念！ヒント：もっと大きいよ」
・答えと比べて、小さいなら「残念！ヒント：もっと小さいよ」を表示する

この「答え」を設定するのに、Math.random()、parseInt()を使っていきます。

Math.floor() と Math.random()

Mathオブジェクトの中のrandomメソッドを使うと、ランダムな数字(0以上1未満)を取り出すことができます。

しかし、0以上1未満の数なので、0.1や0.5と言った小数点の数字になってしまい扱いづらいです。

そこで、Math.floor()を使います。floorメソッドは

・()内の小数点を切り捨てる
・()内より小さい整数にする// Math.floor(-2.3)→-3

ことができます。これらを組み合わせて、ランダムな整数を発生させてみます。

Math.floor(Math.random() * N) + 1

Nには発生させる整数の上限を入れます。

今回のゲームでは「0~5までの整数」を使いたいので、

Math.floor(Math.random() * 6) + 1

このように書くことができました！

perseInt()

次に、ユーザーが入力した数字を、インプットしてみます。

perseIntメソッドを使うと、()内に書いた文字列を「整数」に変換することができます。

先ほどのMath.randomで使った数字は整数でした。それらとanswerを比較したいので、answerも整数にしておきます。

const answer = parseInt(window.prompt("0~5の数字を当ててみて！"));

ここまでのソースはこちらです。

こちらのlet messageですが、ダイアログに表示される文章を定義しています。
このように、変数や定数は必ずしも、宣言と一緒に代入しなければならないわけではありません。

箱だけ用意しておいて、後からデータを中に入れていきます。

if文で条件分岐

前回までの復習で、if文を使って条件分岐をします。この部分です！

・答えと比べて、同じなら「あったり〜♪」
・答えと比べて、大きいなら「残念！ヒント：もっと大きいよ」
・答えと比べて、小さいなら「残念！ヒント：もっと小さいよ」を表示する

実際に書いたコードがこちら。

  <script>
      "use strict";

      const number = Math.floor(Math.random() * 6);
      const answer = parseInt(window.prompt("0~5の数字を当ててみて！"));
      let message;

      if (answer === number) {
        message = "当ったり〜♪";
      } else if (answer < number) {
        message = "残念！ヒント：もっと大きいよ";
      } else if (answer > number) {
        message = "残念！ヒント：もっと小さいよ";
      } else {
        message = "0~5の数字にしてね〜！";
      }
      window.alert(message);
</script>