今日は、【JavaScript】if文と比較演算子を使った数当てゲームのアウトプットです。
こんにちは。駆け出しコーダーのharuです。
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!
【JavaScript】if文と比較演算子を使った数当てゲーム
前回まで、ダイアログボックス(alert,confirm,prompt)を使ってif文や変数の学習をしてきました。
今日は、「比較演算子」を使いつつ、数当てゲームづくりに挑戦したのでアウトプットです。
・Math.random()
・parseInt()
・比較演算子
・データ型
書籍:JavaScript超入門 を参考に作りました。
ゲームの内容
今回も、プロンプト(入力蘭のあるダイアログボックス)を使います。
・答えと比べて、同じなら「あったり〜♪」
・答えと比べて、大きいなら「残念!ヒント:もっと大きいよ」
・答えと比べて、小さいなら「残念!ヒント:もっと小さいよ」を表示する
この「答え」を設定するのに、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>
「比較演算子」について
前回のブログで出てきた「===」も比較演算子の一つです。
※左右を比較するものを比較演算子といいます。
=== の左右が同じとき、trueを返してくれます。
a !=== b :両辺が同じでないときにtrue
a < b :aよりbの方が大きいときにtrue
a <= b:aがb以下のときにtrue
完成物
↓最初のプロンプトです。こちらに0を入れてOKしてみます。
↓残念!もっと大きいよ、が表示されました。
↓次に5を入れてみます。
↓残念、もっと小さいよ、が表示されました。
4当たり入れてみます。↓
当たりました!!
データ型
最後に、データ型についてまとめて終わりにします。
JavaScript Primerには、「文字列、数値、真偽値といった値の型」と書かれています。
型は大きく2つに分けられます。
②何度でも変更できる =オブジェクト
※プリミティブ型・・・数値、文字列、ブール値(true/false)、nullなど
※オブジェクト・・・配列、関数、正規表現、オブジェクトなど
データの型によって、できること・できないことがあるわけです。できないことを可能にするためにデータの型を変更する作業をおこなうことがあります。
たとえば、今回のゲームだとparseInt()メソッドがそれに当たります。
こちらは、文字列→数値に変換してくれるものでした。どちらも大きく分けてプリミティブ型ではありますが、その中でも細かく見ると別の型です。
本記事の参考文書
先生おすすめのバイブル本です。
内容が易しく挫折しづらそうなハンズオン形式本。
また、無料なのですが、JavaScript Primerとてもわかりやすいなぁ….参考にしています。
あとがき
また、メモ要素が強くなってしまった(反省)
明日は論理演算子をやりたいと思う。
今日は以上です。
Thanks:師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら