YouTube でプログラミング を学習!【趣味プロch】

【JavaScript】プログラミングで英単語当てゲームを作る / 英単語ヌメロン

JavaScript
スポンサーリンク

本記事では JavaScript を使って、英単語ヌメロンを作るプログラムについて紹介しています。

 

YouTubeに動画もあるので、ぜひご覧ください。

 

【早送り】プログラミングで単語当てゲームを作る / 英単語ヌメロン
スポンサーリンク

プログラミングで単語当てゲームを作る

DEMO

まず始めに、こちらが完成品のサンプルです。

 

コンピュータが生成するランダムな英単語を推測するゲームです。

 

用意した英単語は約500個なのでその中からランダムに選ばれた単語を推測するゲームになります。

 

単語は、Natural Language Corpus Data: Beautiful Data というサイトの単語リストからなるべく簡単なものを選びました。

 

入力した文字がどの程度合っているかは、「EAT」(イート)や「BITE」(バイト)数を元に判断します。

 

EAT:文字と桁(場所)が合っている場合

BITE:文字は合っているが桁(場所)は合っていない場合

 

入力したアルファベットが重複していたり、小文字でない場合や4文字ではない時には赤文字でエラーを伝えるメッセージが出ます。

 

入力ボタンを押すと、EATやBITEの数字が表れます。

 

そのヒントを元にコンピュータの英単語を推理してください。

無事当てることができたら、正解の単語が下に表示されます。

 

どうしても、正解の単語が分からない場合は「諦め」ボタンを押すと、正解が出てきます。

HTMLファイルの作成

 

まずはじめに、下記のように html ファイルを作ります。

 


<input>タグで「入力」と「諦め」のボタンを2つ用意しています。

 

また、ヒントを表す、EATとBITEについてのメッセージは、style=displaynone” で非表示にし、ある動作が行われたときに表示されるようにしています。

 

“textScreen” という id の「お見事!正解です」と「残念!正解は」というテキストを表示するキャンバス、”gameScreen” という id が付いている正解の英単語を表すキャンバスの二つを用意しています。

 

CSS ファイルはこのように書いています。

 

“textScreen” と “gameScreen” はvisibilityhidden; を使って非表示にしています。

 

これも特定の動作が行われるまで表示されません。

JavaScript ファイルの作成

 

JavaScript ファイルは以下のように作ります。

 

単語が書かれてある、”words.js” と メインの “script.js” ファイルを用意します。

 

“words.js” には準備した英単語 (string)が格納されている配列だけが書かれています。

それを “script.js” でインポートしています。

 


getRandomInt() 関数で0~単語数の範囲の数字をランダムに生成しています。

 

今回の単語は、Natural Language Corpus Data: Beautiful Data というサイトの単語リスト(テキストファイル)を読み込み、重複しているアルファベットがあるものを除外し、残った単語を小文字に変換して別のファイルに書き出すというプログラムを作り、用意しました。

 

最後に、難しそうな単語を適当に削除して数が多すぎないようにまとめたものが “words.js” に書かれています。

 

checkInput() では、入力した文字数がおかしくないか、ちゃんと小文字がタイプされているかや重複しているアルファベットが打ち込まれていないかをチェックしています。

 

入力した文字にエラーがある場合、isCheckedStrに文字列ではなく数字(1~3)が返却されることになります。

その数字をもとに、エラーについてのメッセージを赤文字で画面に表示しています。

 

isCheckedStr のタイプが “stirng” (文字列)の場合のみ、つまり入力にエラーが無い時のみ次の動作に進むことができます。

 

judge() 関数でEATとBITEの回数を数え、それを表示しています。

 

何回目のトライかも画面に出てきます。

 

そして、もし4 EATの場合は「お見事!正解です」というメッセージとともに、正解の4文字の英単語が表示されます。

 

以上、JavaScripで英単語ヌメロンを作るプログラムについての記事でした。

 

 

参考資料

 

 

【JavaScript】プログラミングでヌメロン(Numer0n)を作る / 7セグメントディスプレイ
プログラミングでヌメロン(数当てゲーム)を作りました。マスターマインドや Blow & Hit (ブローアンドヒット)とも呼ばれるこのゲームを JavaScript を使って作成。7セグメントディスプレイで数字を表示しています。

 

上の記事でも書かれているように、今回も柴田 望洋 さんの “新·明解C言語 中級編 (明解シリーズ)” という参考書をもとにコードを書きました。

 

 

C言語でヌメロン(数字当てゲーム)を作ってみたい場合は、柴田 望洋さんの「新・明解C言語 中級編」という本がおすすめです。

 

他にもたくさんゲームの作り方が載っているので楽しくC言語を学ぶことができます。

 

 

ご質問・ご感想は

ツイッターお問い合わせからいただけるとうれしいです。

 

最後まで読んでくれてありがとうございます。

ツイッターのフォローもお願いします。

それではまた!
 
 


YouTubeチャンネルを開設しました。
主にプログラミングについて配信をしています。

 

 
 

JavaScriptプログラミング
スポンサーリンク
この記事をSNSでシェアする
フォローする
スポンサーリンク

コメント