本記事では JavaScript を使って、ヌメロン（Numer0n）を作るプログラムについて紹介しています。
YouTubeに動画もあるので、ぜひご覧ください。
プログラミングでヌメロン（数当てゲーム）を作る
DEMO
まず始めに、こちらが完成品のサンプルです。
コンピューターがランダムなすべて異なる４つの数字を生成します。
それを、推理しながら相手の数を当てるゲームです。
マスターマインドゲームと呼ばれたり、Blow & Hit (ブローアンドヒット)と呼ばれたりもします。
入力した番号がどの程度合っているかは、「EAT」（イート）や、「BITE」（バイト）数を元に判断します。
EAT：数字と桁が合っている場合
BITE：数字は合っているが桁は合っていない場合
入力した数字が重複していたり、整数でない場合や４桁ではな時にはアラートメッセージが出ます。
入力ボタンを押すと、EATやBITEの数字が表れます。
また何回目のトライなのかも画面に表示されます。
そのヒントを元に相手の数字を推理してください。
無事当てることができたら、正解の数字が下に表示されます。
今回は数字を７セグメントディスプレイを使って表示してみました。
どうしても、正解の数字が分からない場合は「諦め」ボタンを押すと、正解が出てきます。
HTMLファイルの作成
まず、下記のようなHTMLファイルを作成します。
＜input＞タグで「入力」と「諦め」のボタンを２つ用意しています。
また、ヒントを表す、EATとBITEについてのメッセージは、style=“display: none” で非表示にし、ある動作が行われたときに表示されるようにしています。
“textScreen” という id の「お見事！正解です」と「残念！正解は」というテキストを表示するキャンバス、”gameScreen” という id が付いている7セグメントディスプレイで数字を表すキャンバスの二つを用意しています。
CSS ファイルはこのように書いています。
“textScreen” と “gameScreen” はvisibility: hidden; を使って非表示にしています。
これも特定の動作が行われるまで表示されません。
JavaScript ファイルの作成
JavaScript ファイルは以下のように作りました。
getRandomInt() 関数で０～９までの数字をランダムに生成しています。
generateNum() では重複している数字が無い配列を作っています。
checkInput() では、桁数がおかしくないか、整数がタイプされているかや重複している数字が打ち込まれていないかをチェックしています。
入力した数字にエラーがある場合、isCheckedStrに文字列ではなく数字が返却されることになります。
isCheckedStr のタイプが “stirng” (文字列)の場合のみ、つまり入力にエラーが無い時のみ次の動作に進むことができます。
judge() 関数でEATとBITEの回数を数え、それを表示しています。
何回目のトライかも画面に出てきます。
そして、もし4 EATの場合は「お見事！正解です」というメッセージとともに、正解の４桁の数字が７セグメントディスプレイで表示されます。
ウィキペディアの７セグメントの記事をもとに、ビット演算の知識を使い、七つのセグメントを個々に点灯させたり消えたりさせることで０～９の数字を表しています。
getColor() 関数でA～Gの個々のセグメントを点灯させたり消えたりさせるための透明度を決めています。
num配列には１６進数で表された０～９の数字が格納されています。
そして sevenSegment() 関数で、該当する正解の数字をディスプレイに表示しています。
以上、JavaScripでヌメロンを作り、正解を７セグメントディスプレイで表示するソースコードについての記事でした。
- GitHubのコード
参考資料
- The Coding Train : “Coding Challenge #117: Seven-Segment Display“
- 柴田 望洋 : “新·明解C言語 中級編 (明解シリーズ)”
- ウィキペディア：７セグメントディスプレイ
なかでもC言語でヌメロン（マスターマインド）を作ってみたい場合は、柴田 望洋さんの「新・明解C言語 中級編」という本がおすすめです。
分かりやすく、丁寧に書かれていますし、マスターマインドの他にもたくさんのゲームの作り方が載っています。
楽しくプログラミングを学ぶことができます。
今回のJavaScripのコードもこの本を参考にして書きました。
コメント