本記事では JavaScript を使って、英単語ヌメロンを作るプログラムについて紹介しています。
YouTubeに動画もあるので、ぜひご覧ください。
プログラミングで単語当てゲームを作る
DEMO
まず始めに、こちらが完成品のサンプルです。
コンピュータが生成するランダムな英単語を推測するゲームです。
用意した英単語は約500個なのでその中からランダムに選ばれた単語を推測するゲームになります。
単語は、Natural Language Corpus Data: Beautiful Data というサイトの単語リストからなるべく簡単なものを選びました。
入力した文字がどの程度合っているかは、「EAT」（イート）や、「BITE」（バイト）数を元に判断します。
EAT：文字と桁（場所）が合っている場合
BITE：文字は合っているが桁（場所）は合っていない場合
入力したアルファベットが重複していたり、小文字でない場合や４文字ではない時には赤文字でエラーを伝えるメッセージが出ます。
入力ボタンを押すと、EATやBITEの数字が表れます。
そのヒントを元にコンピュータの英単語を推理してください。
無事当てることができたら、正解の単語が下に表示されます。
どうしても、正解の単語が分からない場合は「諦め」ボタンを押すと、正解が出てきます。
HTMLファイルの作成
まずはじめに、下記のように html ファイルを作ります。
＜input＞タグで「入力」と「諦め」のボタンを２つ用意しています。
また、ヒントを表す、EATとBITEについてのメッセージは、style=“display: none” で非表示にし、ある動作が行われたときに表示されるようにしています。
“textScreen” という id の「お見事！正解です」と「残念！正解は」というテキストを表示するキャンバス、”gameScreen” という id が付いている正解の英単語を表すキャンバスの二つを用意しています。
CSS ファイルはこのように書いています。
“textScreen” と “gameScreen” はvisibility: hidden; を使って非表示にしています。
これも特定の動作が行われるまで表示されません。
JavaScript ファイルの作成
JavaScript ファイルは以下のように作ります。
単語が書かれてある、”words.js” と メインの “script.js” ファイルを用意します。
“words.js” には準備した英単語 (string)が格納されている配列だけが書かれています。
それを “script.js” でインポートしています。
getRandomInt() 関数で０～単語数の範囲の数字をランダムに生成しています。
今回の単語は、Natural Language Corpus Data: Beautiful Data というサイトの単語リスト(テキストファイル)を読み込み、重複しているアルファベットがあるものを除外し、残った単語を小文字に変換して別のファイルに書き出すというプログラムを作り、用意しました。
最後に、難しそうな単語を適当に削除して数が多すぎないようにまとめたものが “words.js” に書かれています。
checkInput() では、入力した文字数がおかしくないか、ちゃんと小文字がタイプされているかや重複しているアルファベットが打ち込まれていないかをチェックしています。
入力した文字にエラーがある場合、isCheckedStrに文字列ではなく数字（１～３）が返却されることになります。
その数字をもとに、エラーについてのメッセージを赤文字で画面に表示しています。
isCheckedStr のタイプが “stirng” (文字列)の場合のみ、つまり入力にエラーが無い時のみ次の動作に進むことができます。
judge() 関数でEATとBITEの回数を数え、それを表示しています。
何回目のトライかも画面に出てきます。
そして、もし4 EATの場合は「お見事！正解です」というメッセージとともに、正解の４文字の英単語が表示されます。
以上、JavaScripで英単語ヌメロンを作るプログラムについての記事でした。
- GitHubのコード
参考資料
- QuizKnock : めちゃくちゃ楽しい新ゲーム！東大生が「英単語ヌメロン」で対決！
- Natural Language Corpus Data: Beautiful Data : 4360 words of length 4 (for word games) words4.txt
- 柴田 望洋 : “新·明解C言語 中級編 (明解シリーズ)”
上の記事でも書かれているように、今回も柴田 望洋 さんの “新·明解C言語 中級編 (明解シリーズ)” という参考書をもとにコードを書きました。
C言語でヌメロン（数字当てゲーム）を作ってみたい場合は、柴田 望洋さんの「新・明解C言語 中級編」という本がおすすめです。
他にもたくさんゲームの作り方が載っているので楽しくC言語を学ぶことができます。
コメント