ゼロからはじめるJavaScript 第30回 「間違い漢字探し」ブラウザ脳トレゲームを10行で作ろう
マイナビニュース2024年3月6日(水)16時1分
漢字にまつわる脳トレゲームはとても愉しいものです。今回はJavaScriptでブラウザで動く「間違い漢字探し」を実装してみましょう。このゲームは、簡単に作成できる割りに面白く、ルールを工夫することで、オリジナリティも演出できます。
○10行で作る間違い漢字探しゲーム
それでは、HTML/JavaScriptで漢字探しゲームを作ってみましょう。100文字ある漢字の中で1文字だけ違う漢字が混ざっています。それを探すというゲームです。
次の10行のプログラムをテキストエディタにコピーして「find_kanji.html」という名前で保存しましょう。
そして、ブラウザにファイルをドラッグ&ドロップしましょう。すると、プログラムが実行されて漢字間違い探しの画面が表示されます。一文字だけ違う漢字を見つけたら、クリックしてみましょう。正解かどうか判定し、漢字を赤色にして答えを教えてくれます。
なお、10行のプログラムの中に、10個の問題を収録しているので、ブラウザをリロードしてみると、異なる問題が表示されます。
○10行のプログラムを確認しよう
さて、今回の10行のプログラムですが、ちょっと頑張って10行(1行は80字以内)にしています。プログラムを短くするために、三項演算子とアロー関数(無名関数)を利用しています。
そのため、プログラムは、ちょっと読みにくいものになってしまいました。プログラムに改行を入れて、コメントを付け加えると以下のようになります。
プログラムを確認してみましょう。(*1)では似た漢字の問題データを配列にセットします。
(*2)では手軽に整数の乱数を利用できるように、rnd関数を定義します。JavaScriptで関数を定義する場合、一般的には下記のように書きます。
function 関数名(引数) { 関数の定義 }
しかし、アロー関数(無名関数の)を使う場合、下記のように定義できます。より簡潔に関数が定義できることが分かるでしょう。
関数名 = 引数 => 関数の定義
プログラムの(*3)の部分では、どの漢字を問題に使うのか問題を選択します。(*1)で定義した配列の中から1つを選択します。
(*4)ではどの場所の漢字を間違った漢字にするのか乱数で決めます。漢字は100文字の中から1文字選ぶので、ここで変数rの値(0から99番目)のどこを間違った感じにするのかランダムに選択します。
(*5)では、HTMLのDOM要素のidが「q」のものを探して、そこに漢字を100文字書き込むという処理を記述します。「Array(100).fill(0)」と書く事で、値が0の要素を100個持つ配列変数を作成できます。そして、map関数を使うことで、各要素の1つずつに対して引数に指定した無名関数の処理を実行します。
map関数の処理(*6)では、配列の要素番号iと(*4)で選んだ変数rを比較します。つまり、答えとなる漢字を表示するか否かをここで選びます。そして、10で割って余りが9ならば改行を挿入します。これによって、10文字毎に改行を入れることができます。
そして、漢字が正しいかどうかを判定するために、漢字を1文字ずつタグで囲います。それで、漢字がクリックされた時に、関数chkを実行して、正誤判定を行うようにします。
(*7)では、クリックされた漢字が正しいかどうかを判定し、答えの漢字を赤色に変更する関数chkを定義します。ここでも、アロー関数を使って、関数を定義します。
○ゲームに制限時間を導入しよう
さて、上記のプログラムでも、一応形になっているのですが、100文字を1つずつゆっくり探していけば、簡単に答えを見つけることができます。そこで、ゲームに制限時間を導入してみましょう。
以下のプログラムを「find_kanji-time.html」という名前で保存しましょう。
.
○10行で作る間違い漢字探しゲーム
それでは、HTML/JavaScriptで漢字探しゲームを作ってみましょう。100文字ある漢字の中で1文字だけ違う漢字が混ざっています。それを探すというゲームです。
次の10行のプログラムをテキストエディタにコピーして「find_kanji.html」という名前で保存しましょう。
そして、ブラウザにファイルをドラッグ&ドロップしましょう。すると、プログラムが実行されて漢字間違い探しの画面が表示されます。一文字だけ違う漢字を見つけたら、クリックしてみましょう。正解かどうか判定し、漢字を赤色にして答えを教えてくれます。
なお、10行のプログラムの中に、10個の問題を収録しているので、ブラウザをリロードしてみると、異なる問題が表示されます。
○10行のプログラムを確認しよう
さて、今回の10行のプログラムですが、ちょっと頑張って10行(1行は80字以内)にしています。プログラムを短くするために、三項演算子とアロー関数(無名関数)を利用しています。
そのため、プログラムは、ちょっと読みにくいものになってしまいました。プログラムに改行を入れて、コメントを付け加えると以下のようになります。
プログラムを確認してみましょう。(*1)では似た漢字の問題データを配列にセットします。
(*2)では手軽に整数の乱数を利用できるように、rnd関数を定義します。JavaScriptで関数を定義する場合、一般的には下記のように書きます。
function 関数名(引数) { 関数の定義 }
しかし、アロー関数(無名関数の)を使う場合、下記のように定義できます。より簡潔に関数が定義できることが分かるでしょう。
関数名 = 引数 => 関数の定義
プログラムの(*3)の部分では、どの漢字を問題に使うのか問題を選択します。(*1)で定義した配列の中から1つを選択します。
(*4)ではどの場所の漢字を間違った漢字にするのか乱数で決めます。漢字は100文字の中から1文字選ぶので、ここで変数rの値(0から99番目)のどこを間違った感じにするのかランダムに選択します。
(*5)では、HTMLのDOM要素のidが「q」のものを探して、そこに漢字を100文字書き込むという処理を記述します。「Array(100).fill(0)」と書く事で、値が0の要素を100個持つ配列変数を作成できます。そして、map関数を使うことで、各要素の1つずつに対して引数に指定した無名関数の処理を実行します。
map関数の処理(*6)では、配列の要素番号iと(*4)で選んだ変数rを比較します。つまり、答えとなる漢字を表示するか否かをここで選びます。そして、10で割って余りが9ならば改行を挿入します。これによって、10文字毎に改行を入れることができます。
そして、漢字が正しいかどうかを判定するために、漢字を1文字ずつタグで囲います。それで、漢字がクリックされた時に、関数chkを実行して、正誤判定を行うようにします。
(*7)では、クリックされた漢字が正しいかどうかを判定し、答えの漢字を赤色に変更する関数chkを定義します。ここでも、アロー関数を使って、関数を定義します。
○ゲームに制限時間を導入しよう
さて、上記のプログラムでも、一応形になっているのですが、100文字を1つずつゆっくり探していけば、簡単に答えを見つけることができます。そこで、ゲームに制限時間を導入してみましょう。
以下のプログラムを「find_kanji-time.html」という名前で保存しましょう。
.
「漢字」をもっと詳しく
「漢字」のニュース
-
Matt 本名は「まさし」なのに「マット」と呼ばれている訳明かす 名前「途中で変わってて」4月28日19時5分
-
ゆうちゃみ、フリップトークで豪快に漢字をミス 近藤千尋&松嶋尚美に教えてもらうも「あんまり変わらないじゃないですか!」4月25日15時7分
-
浙江大学、BMIにより「念で漢字を書く」ことを初めて実現—中国4月24日19時30分
-
3月生まれの名前「サクラネーム・フラワーネーム」が人気4月19日9時45分
-
自宅で受検できる「漢検オンライン個人受検」開始4月3日9時45分
-
最新AI搭載漢字学習アプリ「かんじぃPT」&バーチャル教室、2025年大阪・関西万博への出展が決定3月27日18時16分
-
検定試験におけるオープンバッジ活用事例セミナー(4/10)3月25日13時16分
-
3月19日(火)より、iOS/Android向け『旺文社 辞典アプリ』に、『旺文社 国語辞典 第十二版』と『旺文社 漢字典 第四版』の配信をスタート!〜無償体験版のサービス提供も同時開始〜3月21日17時46分
-
小学館「HugKum」無料ドリルサイトに「名探偵コナンと学べるシリーズ」から、漢字力・英熟語・歴史と地理のコンテンツが追加3月19日14時16分
-
「漢字は中国人ではなく韓国人が作ったもの」韓国人作家の主張に注目集まる=韓国ネット「誇らしい」3月13日21時0分
ITニュースランキング
-
1Google、「Pixel 8a」を5月14日に発売 - Tensor G3搭載・120Hz対応で約7万円 マイナビニュース
-
2加護亜依、小学校なじめず「荒れる7歳長男」に苦悩 “現場目撃”で衝撃「私の知ってる息子じゃない」「何回も悩んで泣いた」 ねとらぼ
-
3イオンモバイルが異例の“200GBプラン”を提供する狙い 金融連携サービスも強化で大手キャリアに対抗しうる存在に ITmedia Mobile
-
4ドコモで買える指輪「EVERING」、Visaのタッチ決済に対応 ただしSuicaには対応せず ITmedia Mobile
-
5新型iPadのPVは、なぜここまで不快なのか 日本の著名クリエイターらが「嫌悪感」続々考察...「多様性を破壊」「『必然性』が欠落」 J-CASTニュース