【JavaScript 入門講座】ランダム数を当てるゲーム

[JavaScript 入門講座]ランダム数を当てるゲーム

ランダム数を作成する
絶対値を算出する
数当てゲームの完成品

「JavaScript 入門講座」の最終講座である。ここまでの講座で、条件文（if文）と繰り返し文（for文、while文）を学習した。そろそろ、プログラミングに慣れてきた頃と思う。そこで、一つのまとまった作品を作成し、今の知識や経験を確固たるものとしたい。
本講座では、次の作品を製造する。

製造する成果物は「数当てゲーム」である。ゲーム（プログラム）を実行すると、コンピューターが「0から9」の間でランダムに数字を選ぶ。そして、コンピューターがどの数字を選んだのか、ユーザーが当てる。
ユーザーが誤った回答をした場合、正解と回答の差により、表示するメッセージを分岐する。

回答と正解の差が「3未満の場合」：「NEAR!!」と表示
それ以外：「NONE」と表示

コンピューターがランダムに選んだ数字を、ユーザーが当てるゲームを製造する。ゲームの仕様を解説する。まず、コンピューターがランダム数を作成する。その後、入力ダイアログを表示する。ユーザーが入力ダイアログに数字を入力して、ランダム数とユーザー入力値が一致すればゲームは終了する。一致しない場合、「NONE」と表示して繰り返し入力ダイアログが表示する。ユーザーがランダム数を当てるまで、この繰り返しは実行される。

さて、ユーザーがランダム数と異なる値を入力した場合、「NONE」と表示するだけでは、ゲーム性がない。そこで、ユーザーの回答とランダム数の差が「3未満の場合」、「NEAR!!」と表示する。この表示を見たユーザーは「正解が近い！！」とﾜｸﾜｸするだろう。
さて、この作品を製造するために必要となる技術を確認する。

ユーザーから値を受け取る方法（prompt()）
正解かどうか確認する方法（if文）
ユーザーが誤った回答をした場合、もう一度入力ダイアログを表示する仕組み（while文）
ユーザーの回答と正解との差を算出する方法
0から9のランダム数の作り方

「1」と「2」と「3」は、すでに学習している。問題は、「4」と「5」である。「4」から解説する。「ユーザーの回答と正解の差」は絶対値を用いる。例えば、
「ランダム数：5」「ユーザーの回答：3」の場合、差は「2」なので、「NEAR!!」と表示する。
同様に、
「ランダム数：3」「ユーザーの回答：5」の場合も、差は「2」なので、「NEAR!!」と表示する。
差を算出するためには、絶対値を求める命令文が必要である。
つぎに「5番目」のランダム数の作り方を解説する。ランダム数の作り方は定型文なので、「見て書く」という以外にない。ランダム数の作り方を覚える必要はない。必要になったら、そのつど、ネットで調べるものである。では、サンプルを見ながら学習する。

ランダム数を作成する

ランダム数を作成するためのサンプルを掲載する。また、アプリケーションの全体的な構造もプログラミングした。

001<script>
002
003//正解の数を作成
004var correct = Math.floor ( Math.random () * 10 ) ;
005
006//繰り返しフラグ
007var flag = true ;
008
009while ( flag ) {
010
011  //数字を取得して、整数値へ変換
012  var answerStr = prompt ( "数字を入力して下さい" );
013
014  //正解を表示
015  alert ( "正解:" + correct );
016
017  //入力値を表示
018  alert ( "入力値:" + answerStr ) ;
019
020  //flagの値を変更
021  flag = false;
022}
023alert ( "END" );
024
025</script>

プログラムを実行すると、「数字を入力して下さい」という入力ダイアログが表示する。数字を入力して「OK」ボタンを押下すると、コンピューターがランダムで作成した数字と、入力した数字がダイアログに表示する。最後に、「END」と表示してプログラムが終了する。

プログラムを解説する。 4行目でランダムな数字を作成して、変数correctに代入する。

0から9までのランダム数を作成するプログラム Math.floor ( Math.random () * 10 )

これは難しい。難しい上に、覚える必要はない。少しだけ解説する。

Math.random ()
例 0.52...

このプログラムは、0から1未満のランダム数を作成する命令文である（例えば、0.52...など）。この値に10を乗算する。

Math.random () * 10
例 5.2...

Math.random ()のプログラムに「10」を乗算すると、 0から10未満のランダム数になる（例えば、5.2...など）。この値には小数点以下の数字も含む。この値を整数へ変換したい。

0から9までのランダム数を作成するプログラム Math.floor ( Math.random () * 10 )
：例 Math.floor ( 5.2 ... )

Math.floor () の括弧の中に、先ほどのプログラムを記述する。 Math.floor () は命令文である。

Math.floor ( [値] ) [値]よりも小さい整数の内、最大の整数を戻す。

よく分からない。しかし、気にしなくて良い。「正の数」をMath.floor()の括弧の中に記述すると、小数点以下を切り捨ててくれる。これだけ覚えれば良い。「負の数」については注意が必要だが、本講座では触れない。

4行目で、0から9のランダム数を作成して、変数correctに代入する。これが「コンピューターが作ったランダム数」である。完成品は、この数字を当てるゲームである。 7行目で変数flagを宣言して「true」を代入する。この値はwhileの条件式で利用する。 9行目からwhile文が始まる。条件式は変数flagの値である。変数flagの値は「true」なので、 whileブロックが実行する。 12行目で、入力ダイアログを表示して、ユーザーに数字を入力してもらう。ユーザーが入力した値は、変数answerStrに代入される。 15行目で、変数correctの値を表示する。変数correctにはランダム数が入っていた。その値がここで判明する。 18行目でユーザーの入力値を念のため表示する。 21行目で、変数flagの値をfalseに変更する。変数flagの値はwhile文の条件式で利用している。さて、以上にてwhileブロックの処理が終了する。プログラムはwhileブロックの初めへ戻る。9行目でwhileが実行する。条件式は変数flagの値である。変数flagの値に、さきほどfalseを代入したので、条件式がfalseになり、while文が終了する。 while文が終了した後、23行目が実行して、「END」と表示してプログラムは終了する。

絶対値を算出する

絶対値を算出するサンプルを掲載する。

001<script>
002
003//正解の数を作成
004var correct = 3 ;
005
006//入力値
007var answer = 9 ;
008
009//正解と入力値の差
010var diff = Math.abs ( correct - answer );
011
012//正解と入力値の差を表示
013alert ( diff ) ;
014
015</script>

プログラムを実行すると、6が表示する。

プログラムを解説する。まず、4行目で変数correctに「3」を代入する。 7行目で、変数answerに9を代入する。この値は、ユーザーが入力した数値をイメージしている。
10行目で、Math.abs () という新しい命令文を実行する。

Math.abs( [数値] ) [数値]の絶対値を求める命令文

Math.abs () は絶対値を戻す命令文である。括弧の中に数値を記述すると、その絶対値を戻してくれる。
10行目で、Math.abs()の括弧の中に、「correct - answer」と記述している。

001<script>
002
003//正解の数を作成
004var correct = 3 ;
005
006//入力値
007var answer = 9 ;
008
009//正解と入力値の差
010var diff = Math.abs ( 3 - 9 );
011
012//正解と入力値の差を表示
013alert ( diff ) ;
014
015</script>

Math.abs ( 3 - 9 ) ; は
Math.abs ( -6 ) ; 　である。Math.abs()は絶対値を求める命令文なので、このプログラムを実行すると、「6」になる。

001<script>
002
003//正解の数を作成
004var correct = 3 ;
005
006//入力値
007var answer = 9 ;
008
009//正解と入力値の差
010var 6 = Math.abs ( -6 );
011
012//正解と入力値の差を表示
013alert ( diff ) ;
014
015</script>

10行目で、Math.abs ( -6 ) を実行すると、「-6」の値が「6」になる。13行目で、変数diffの値を表示する。「6」と表示する。

数当てゲームの完成品

完成品を掲載する。

001<script>
002
003//正解の数を作成
004var correct = Math.floor ( Math.random () * 10 ) ;
005
006//繰り返しフラグ
007var flag = true ;
008
009while ( flag ) {
010
011  //数字を取得して、整数値へ変換
012  var answerStr = prompt ( "数字を入力して下さい" );
013  var answerInt = parseInt ( answerStr )
014
015  //絶対値を取得
016  var diff = Math.abs ( correct - answerInt ) ;
017
018  //正解の場合は終了
019  if ( diff == 0 ) {
020
021    alert ( "CORRECT" );
022    flag = false;
023
024  } else if ( diff < 3 ) {
025
026    alert ( "NEAR!!" )
027
028  } else {
029    alert ( "NONE" );
030  }
031}
032</script>

解説する。4行目で0から9までの整数をランダムで作成して変数correctに代入する。これが、正解の値である。 7行目で、while文の条件式に入れる変数flagを宣言してtrueを代入する。 9行目でwhile文が実行する。条件式には変数flagが記載されている。変数flagの値はtrueなので、whileブロックが実行する。 12行目で、prompt()が実行して、入力ダイアログが表示する。ユーザーが文字を入力して「OK」ボタンを押下すると、変数answerStrに入力値が入る。この値は「文字列」である。13行目で、parseInt()を利用して入力値を文字列から整数値に変換して、変数answerIntに代入する。16行目で、変数correctとanswerIntの差の絶対値を求める。変数correctには正解値が入っている。正解値と入力値の差を変数diffに代入する。 19行目から30行目までがif文である。まず、19行目で、変数diffの値と「0」を比較する。もし、変数diffの値が「0」なら、それは正解値と入力値が一致しているという事である。つまり、ゲーム終了である。変数diffの値が「0」と仮定すると、 ifブロックの中の処理が実行する。 21行目で「CORRECT」と表示して、22行目で変数flagの値をfalseへ変更する。変数flagはwhile文の条件式で利用されていた。この値をfalseにすると、while文が終了してゲームが終了する。つぎに、24行目を確認する。変数diffが「3」未満かどうか確認する。もし仮に、変数diffの値が「0」の場合、上の条件式「 diff == 0 」に当てはまるので、この else if の条件式は実行しない。さて、正解と回答の差が「3未満」の場合、ユーザーにエールを送る意味で「NEAR!!」と表示する。
あるいは、正解と回答の差が「0」でも「3未満」でもない場合（条件式に当てはまらない場合）、「NONE」と表示する。以上でwhileブロックが終了する。 whileブロックの初めへ戻る。9行目でwhile文の条件を確認する。変数flagの値である。もし、先ほどifブロックを実行したなら、変数flagの値はfalseになっていて、 while文が終了する。しかし、ifブロック以外のブロックが実行した場合（else if 又は else の場合）、変数flagの値は変更がなく、trueのままである。その場合は、もう一度whileブロックが実行する。 whileブロックは、正解と回答が一致するまで実行する。解説は以上である。

IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 入門講座】ランダム数を当てるゲーム

ランダム数を作成する

絶対値を算出する

数当てゲームの完成品