Javascript入門　数字当てゲームを作ろう

今回はこれまでの総まとめです

これまで学んだ変数、乱数、ループ、ダイアログの表示、条件分岐を駆使して簡単なものを作ってみました

「数字当てゲーム」です

以下がそのコードです

コードにコメントを入れていますのでそれを見たら多分何をやっているかはある程度わかるとおもいます

ここまで勉強した皆さんならきっと理解できますよね

あとで説明は一つずつしていきますが、まずは自分で解読してみてくださいね！

作成手順　いきなり書き始めてはだめです！

まず、これから作ろうとするゲームの概要を考えます

• 数字を当てるゲームをつくる
• ランダムな数字を答えとする
• それをユーザーが当てる

とても簡単なことですが、この工程を忘れると無駄の多いコードを書くことにつながりますので要注意です

もちろん微修正はあとです

では実際にコードを書いていきましょう

変数を決める

数としては

• 答えを入れる変数
• ユーザーの予想を入れる変数

が必要になります

答えは1-～10までの数字をランダムにしたいです

常に同じ数字が答えだとつまらないですもんね

ということで

let n = Math.floor(Math.random()*10)+1;　

これで答えが作られます

答えは先にある状態にしておきたいので一番に変数を宣言し、初期値に乱数をいれています

Math.floor()で小数点を切り捨てているのもポイントですね

　変数について詳しく知りたい方はこちらもどうぞ　変数について

　乱数についてはこちらもごらんください

　乱数について

ループはあとでつけたよ！

このあとfor文があるのですが、実はこれはあとで付け加えました

というのも、このプログラムを実行した際に、チャレンジ回数が一回だとまあ当たらないんです

なんというかちゃんと動作するかというデバッグも面倒だったため、4回までこたえられるという処理を付け加えました

あとからその後の処理を｛｝で囲む形で処理を最大4回実施するようにしたわけです

ということで、実装準とは違いますが、コードに準じて先に説明しておきますね

for (let i = 0; i < 4 ; i++){

カウンタ用の変数iを初期化して、iが4未満である限り｛｝で囲んだ処理を繰り返します

iは処理ごに＋1をするとしています

ですのでiが０,1,2,3と増加していき、4になると処理はストップして実行されません

これで最大4回入力を促し、あたり判定がおこなわれることになるわけですね

ループについて詳しく知りたい方はこちらもどうぞ　ループについて

入力用ダイアログの表示

続いてユーザーに答えを書いてもらう入力用ダイアログの表示です

user_n = prompt(“１～10までの数字を入力して下さい”, “”);

これによってuser_nにユーザーが入力した数字を代入しています

ただし、promptによって得られた値（戻り値）はすべて文字列として処理をされてしまいます

１は”1”という扱いになるということです

このままだと数字が文字列として処理をされてしまい、何度やっても正解しないという無理ゲーになります　オーマイガットトゥギャザー

そこで

user_n = Number(user_n);

Number()をしようすることで文字列を数字に変換しています

データ型は他の言語を勉強していた時にも何度か悩まされました

悩まされていたおかげですぐに気が付いたのはよかったです笑

本当に失敗も大事なんですね

気が付かないと延々さまようところでした

ダイアログについて詳しく知りたい方はこちらもどうぞ　ダイアログについて

条件分岐if文で入力された数字をチェックや！

入力ダイアログに文字の制限はありませんので、なんでも入れることができます

そこで、条件分岐を使って入力された数字が有効なものかを確認しています

この下のif文がその処理をしているところです

if (Number.isInteger(user_n)){　

if文の書き方はif (条件){処理①}

else {処理②}　でしたね

条件を満たしていれば{処理①}の処理をする

満たしていなければelse以下の{処理②}の処理をする

ということでした

条件を満たしていればというのはいいかえると（）内が真trueであればということでしたね

そして条件を満たしていないということを言い換えると（）内が偽falseであればということでした

再度if文の条件式を見てみましょう

if (Number.isInteger(user_n)){

Number.isInteger(user_n)が条件式の中に入っています

この意味は

user_nが整数かどうかということを判断しています

整数であればtrueを返し、そうでなければfalseをかえすメソッドです

このように条件式は比較演算子だけでなく、Boolean型のメソッドを入れてその戻り値

こういうのって使わないと何のために使うのかわからないというか、どうやって使うのか絶対わからないと思うんですよね

Number.isInteger(値)　渡された値が整数かどうかを返すということを勉強しても、どう使えるのかわからないと思うんです

こういったメソッドはたくさんありますが、こういったものを直接if文の条件式にぶち込んで条件にできるということを今この記事で知ったという人！そこの君！めちゃくちゃイイ！素晴らしい収穫ですぞ！

急に興奮してごめんなさいね

でも、こういうのをスルーしちゃうと今後使い道というか本当の意味での使い方がわからなくて困ることになることがあると思うので印象付けておいてくださいね

ということで、この条件が真であればそのあとで

console.log (“あなたの入力した数字は［　” + user_n + “　］です” );

として、ユーザーの入力した数字を確認するログを表示して、

偽であれば、else以降の処理を行い、

alert (“整数をいれてください”);

i–;

で整数を入れることを促し、i–でカウンタの数字を戻してノーカウントとしています

まあ、正直ここはカウントしてもよかったわけですけどね

というか、このまとめの記事の内容を動画にしてアップしているのですが、このi–

が無限ループという悲劇を招くことになったのはまた別の話・・・思い出は美しいままに！

条件分岐について詳しく知りたい方はこちらもどうぞ　条件分岐について

if文で最後の判定

if (user_n === n){

で答え合わせです

数字があっていれば

console.log (“あたり！”);

break;

を実施してループを終了します

はずれの場合は

console.log (“はずれ！”);

はずれと表示してforにもどり再度入力です

このようにして、様々なメソッドや構文を組み合わせて一つのプログラムを作るというのはとても面白いですね

皆さんも面白いアイデアがあればぜひ何か作ってみることをお勧めします

なぜなら、作ってみて初めて分かることがあるからです

そして、エラーや不具合を恐れないでください

その経験があなたを強くします

Failure makes you stronger！

一緒に頑張りましょう！

今回のまとめ記事の内容をYouTubeで解説していますよかったら合わせてごらんください。

とくにプログラミング初学者にとっては勉強の仕方なども話をしていますので参考になると思います。