javascriptのゲームで漢字を出力して漢字を入力して比較をしたいのですが

javascriptで漢字のタイピングゲームを作りたい。javascriptで漢字を
出力して漢字を入力しての比較は出来るのでしょうか。

例えば、下記の様に出題をしている時に最初の"日"を入力しての比較を
したい場合の具体的なjavascriptのコードを教えてほしいのですが。宜
しく回答願います。

日本国憲法泣く子は育つ

質問者からの補足コメント

• 

  有難う御座います。
  
  そうなんですか。jqueryが良いですか。私は普通のjavascriptで簡単に
  出来ると思っていたのですが。そうでもないんですね。
  
  最終的には最後の質問の回答で出来そうな感じですが。これはjqueryと
  言う事で質問を再提出したいと思います。又、再質問の時はもう少し
  jqueryを勉強をしてからにしたいと思います。
  
  それも有りますが。jqueryと言うのはjavascriptの一つのutilityとか
  の類なんでしょうか。良くjabascript関連の所にjqueryの本が並んでい
  たりします。
  
  jqueryを使った方が良いとの事ですが。どう言う所が今回の場合には都
  合が良いのでしょうか。また、今回の場合いのライブラリーはどう言う
  のが良いのでしょうか。これだと言うライブラリーがございましたら紹
  介願います。
  
  宜しく回答願います

  No.4の回答に寄せられた補足コメントです。 補足日時：2017/01/25 14:15

No.6 ベストアンサー 回答者： yambejp 回答日時： 2017/01/25 19:54

念の為お伝えしますがjquery自体仕様が肥大化していて

正直あまりおすすめできないようライブラリになりつつあります。
どちらかというと私もアンチ派なので普段であればお勧めしないです

>全体的に$(...).何々が続く構文が増えた様な気がします
まさにそれがjqueryをつかう意義で、タグの指定が楽で
参照や書き換えが容易なところがよいのでしょう。

今回の肝は$(this).data('pre')の参照、書き換えです。
別の手段をとってもいいのですが、ちょっと煩雑で肥大化しがちなので
dataを利用するのが賢明です。

あとは間違い入力の際の文字色を変えるなど、htmlとしては
本来やるべきではない処理なので、そのあたりは冗長な表現になっています

>例えば出題されたゲームをクリアした時の次の出題をすると

当然次はそう来るでしょうね・・・
このあたりはajaxという技術を使うと楽そうです。
ajaxは平のjavascriptでやるよりjqueryにお世話になったほうが相当楽です

ちなみに質問の度に毎回機能拡張を希望されていますが
あまり１質問で別内容の質問をすると可読性も落ちるので
適当なところで締めて、別途機能を絞って質問されたほうがよいですよ

この回答へのお礼

初心者の私に沢山の回答有難う御座いました。

これからも勉強して行期待と思います。

お礼日時：2017/01/25 21:10

No.5 回答者： yambejp 回答日時： 2017/01/25 16:21

ざっとjquery版を書いてみました。

（もうちょい整理すれば簡単にかけそうですがとりあえず動く版です）
もちろんjavascriptだけでも書けないことはないですが
今回のケースだとjqueryなど利用した方が圧倒的に楽です

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
var q="あいうえお";
$('#q').html(q);
$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});
});
</script>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>

この回答へのお礼

有難う御座います。
動きました。助かりました。

多分、これはjqueryを使って要るんですよね。script src="..."の所が
jqueryをincludeしている所でしょうか。

所々にjqueryに絡んだ構文が有るとは思いますが。それは、どの辺で
しょうか。$('#q').html(q);当りでしょうか。

全体的に$(...).何々が続く構文が増えた様な気がします。これでゲー
ムとしては出来ていると思いますが。

これは、例えば出題されたゲームをクリアした時の次の出題をすると
言った時と言うのは、ソースをどの様に変更するのでしょうか。これ
は、当然に出題をクライアントのマシンにファイルとして保存をして居
ないと行けないのですが。こう言うのは、出来るのでしょうか。

何回も済みません。宜しく回答願います。

お礼日時：2017/01/25 19:22

No.4 回答者： yambejp 回答日時： 2017/01/25 13:10

>①　var reg=new RegExp("^"+t.value);は、入力した文字の先頭の文字

と言う事でしょうか。

はい、聞きなれないかもしれませんが正規表現という手法でチェックしています。
「^」を使いというのは、入力した文字が、答えの先頭から一致するかチェックする
という手法です

>②　if(q==t.value){は、入力した文字の全てが問題文と全正解と言う
事でしょうか。

q（問題文）とt.value(入力した文字)が完全に一致したらということで
この場合はcompleteという文字を表示するようにわけておきました

>③　}else if(q.match(reg)){は、入力した文字の一部が問題文と一致
したと言う事でしょうか。

(1)のところで書いたとおり先頭からチェックしています
たとえば問題が「あいうえお」であれば入力文字は
「あ」「あい」「あいう」「あいうえ」の場合という見です
「あいうえお」の場合はcompleteですね

＞④　ここで、若しもタイプミスをした場合に問題文のタイプミスをした
文字を赤色に変更する。また、入力した文字は表示をしないと言う変更
をした場合にはどの様にソースは変更したら良いのでしょうか。

ちょっと面倒そうな仕様ですね
複雑になってくるならjqueryなどライブラリを導入したほうがよいかもしれません。

No.3 回答者： yambejp 回答日時： 2017/01/25 09:46

※訂正

元ソースkeydownと書きましたが、チェックするならkeyupです。
下の方にsampleを上げてあるので確認してください

＞①　addEventListenerの二番目の引数のfunction(e){check(e)}のeとは
何でしょうか。

これはdocumentの全てのタグに対してkeydownイベントを監視して
トリガーが発生した場合check()というユーザー関数を実行しています。
引数のeは「イベント」なのですが、もう少しjavascriptを深く勉強しないと
わからないかもしれないですね。とりあえずは「この手の処理はイベントを
引数で渡す」というルールがあるとだけ覚えておいてください

＞var t=e.target;
＞上記のe.targetも分かりません。これはtargetのプロパティです

これはイベントが発生しているタグ（target）を変数tに受けています。

＞③　if(t.name=="a" && t.value==q){
＞この部分の"a"と"q"とは何でしょうか。
まずqについては、事前に定義したとおり問題文です。
var q="日本国憲法泣く子は育つ";

t.name=="a"は、ターゲットのnameが"a"の箇所つまり
<input type="text" name="a" style="width:20em;">
・・・回答欄ですね。

条件文を解釈すると
keydownイベントが発生したターゲットのtのnameが"a"の回答欄であること
その値(value)が問題文qと同じであること
上記条件に合致した場合、となります

＞④　もし、これを今の1行単位から1文字単位に"ok!"を表示をするとど
＞こを変更すれば良いのでしょうか。

こんな感じですかね
<script>
document.addEventListener('keyup',function(e){check(e)});
var q="日本国憲法泣く子は育つ";
window.onload=function(){
document.getElementById('q').innerHTML=q;
}
function check(e){
var t=e.target;
if(t.name=="a"){
var reg=new RegExp("^"+t.value);
var msg="";
if(q==t.value){
msg="complete";
}else if(q.match(reg)){
msg="ok!";
}else{
msg="ng";
}
document.getElementById('res').innerHTML=msg;
}
}
</script>

この回答へのお礼

有難う御座います。下記のhtmlで動作を確認しました。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script>
document.addEventListener('keyup',function(e){check(e)});
var q="あいうえお";
window.onload=function(){
document.getElementById('q').innerHTML=q;
}
function check(e){
var t=e.target;
if(t.name=="a"){
var reg=new RegExp("^"+t.value);
var msg="";
if(q==t.value){
msg="complete";
}else if(q.match(reg)){
msg="ok!";
}else{
msg="ng";
}
document.getElementById('res').innerHTML=msg;
}
}
</script></HEAD>
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
</BODY>
</HTML>

すみませんが、少し質問します。
①　var reg=new RegExp("^"+t.value);は、入力した文字の先頭の文字
と言う事でしょうか。

②　if(q==t.value){は、入力した文字の全てが問題文と全正解と言う
事でしょうか。

③　}else if(q.match(reg)){は、入力した文字の一部が問題文と一致
したと言う事でしょうか。

もし、そうならばここでは全ての問題文は重複の無い文字にしないと行
けないと言う事でしょうか。

④　ここで、若しもタイプミスをした場合に問題文のタイプミスをした
文字を赤色に変更する。また、入力した文字は表示をしないと言う変更
をした場合にはどの様にソースは変更したら良いのでしょうか。

すみませんが。宜しく回答願います。。

お礼日時：2017/01/25 12:48

No.2 回答者： zircon3 回答日時： 2017/01/24 20:15

「HTMLで作成した画面上のテキスト入力欄に文字を入力すると、そのイベントをひろって起動するJavascriptのfunctionを作成。

このfunction内で入力された文字と〇〇の文字を比較し結果を××に表示する」

ということでしょうか？
〇〇と××の部分はご質問の文章からは読み取れなかったのでご自身でお考えください。
なお、ゲーム実行者が漢字以外を入力した場合はエラーメッセージを表示するといったエラー検出機能を加えられた方がよいでしょう。
入力可能な文字数も問題ですね。これはHTMLで作成する入力欄の作り方にもよりますが。

あと、当方は「・・・そのイベントをひろって・・・」と想像しましたが、画面上に［実行］というボタンを設けてもようでしょう。その場合はこのボタンをクリックしたらJavascriptのfunctionを起動するように作られればよいだけです。

Javascriptの勉強がまだでしたら少し大きめの書店に行かれると入門書が置かれているかと思います。ネットで探す場合は「javascript 入門書」とか「javascript 入門書 おすすめ」といったキーワードで検索されると見つかるかと思います。
またネット上の説明サイトを探す場合は「javascript 入門」とか「javascript 初心者」といったキーワードで探されるとよいです。

参考まで。

No.1 回答者： yambejp 回答日時： 2017/01/24 20:08

似たような漢字を表示させてユーザーにストレスになるような仕様でなければ

大丈夫でしょう

たとえば「柿」と「杮」とかパソコンの環境によって同じように見えるもの
もあります。

ざっくり書くとこんな感じ、あとは何をトリガーにどういう結果がほしいなど
仕様をつめていくしかありません

<script>
document.addEventListener('keydown',function(e){check(e)});
var q="日本国憲法泣く子は育つ";
window.onload=function(){
document.getElementById('q').innerHTML=q;
}
function check(e){
var t=e.target;
if(t.name=="a" && t.value==q){
document.getElementById('res').innerHTML="ok!";
e.preventDefault();
}
}
</script>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>

この回答へのお礼

有難う御座います。
下記のhtmlで動作を確認しました。例題は、テストも兼ねて「あいうえ
お」に変更しています。

<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script>
document.addEventListener('keydown',function(e){check(e)});
var q="あいうえお";
window.onload=function(){
document.getElementById('q').innerHTML=q;
}
function check(e){
var t=e.target;
if(t.name=="a" && t.value==q){
document.getElementById('res').innerHTML="ok!";
e.preventDefault();
}
}
</script>
</HEAD>
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
</BODY>
</HTML>

少し、質問が有ります。
①　addEventListenerの二番目の引数のfunction(e){check(e)}のeとは
何でしょうか。宣言も定義も無いので良く分かりません。この部分は、
キーを押した時に、check(e)が実行されると思いますが。引数のeの意
味が分かりません。eとは、キーを押した時の文字コードの事でしょう
か。

②　function check(e){
var t=e.target;
上記のe.targetも分かりません。これはtargetのプロパティです
が、意味を教えて下さい。

③　if(t.name=="a" && t.value==q){
この部分の"a"と"q"とは何でしょうか。

この場合では、全問正解の時に"ok!"を表示しますが。これをやっ
ているとは思いますが。理屈が分かりません。

④　もし、これを今の1行単位から1文字単位に"ok!"を表示をするとど
こを変更すれば良いのでしょうか。

済みません。宜しくお願いします。

お礼日時：2017/01/24 23:21