【JavaScript】【タイピングゲーム】7日目(最終日) 結果報告を作る

2022.10.10更新

【JavaScript】【タイピングゲーム】のタイトル画像になります

JavaScriptを使ってオリジナルの単語タイピングゲームを作っていきます。

単語タイピングゲーム作りを通してリアルタイム入力、文字列の操作、タイマーによるプログラムの自動実行、簡単なアニメーションなど実践的なプログラミング技術を学んでいきます。

「JavaScriptでプログラミング入門」の応用編になりますので、まだ終えてない方はそちらを先にご覧ください。

結果報告を作る

いよいよ最終日です。

まだまだいじり足りないトコロはたくさんあると思いますが、今回結果報告部分を作って、今回のタイピングゲーム作りはひとまず終了したいと思います。

点数を表す「score」という変数とタイプミスの場所を保存する「mistake_ary」という配列を用意しておいてください。


var score;
var mistake_ary = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

タイプミスの場所を保存する「mistake_ary」ですが、これはそれぞれ

mistake_ary[0]・・・「a」

mistake_ary[1]・・・「b」

mistake_ary[2]・・・「c」

mistake_ary[3]・・・「d」

・

mistake_ary[24]・・・「y」

mistake_ary[25]・・・「z」

のように各アルファベットに対応しておりまして、アルファベットは26文字なので26個の要素を用意しております。

このそれぞれの要素を間違えた場所に応じて加算していくので、26か所全て「0」で初期化しておきます。

結果報告書

今回の結果報告書ですが、

出題数

正解数

間違えた場所

こちらを報告したいと思います。

出題数は「stage」を、正解数は「score」を、間違えた場所は先ほどの配列「mistake_ary」を使って表示します。

間違えた場所

それでは間違えた場所の記録方法ですが結論からいいますと、「my_get_key()」の前半部分

			
if(key_code == mondai_code_ary[moji_point] - 32){
	input_mondai = input_mondai + String.fromCharCode(key_code + 32);
	document.getElementById("input_mondai_box").innerHTML = input_mondai;
	moji_point++;
}
else{
	input_mondai = input_mondai + String.fromCharCode(key_code + 32);
	mistake_ary[mondai_code_ary[moji_point] - 97]++;
	document.getElementById("input_mondai_box").innerHTML = input_mondai;
	mistake_flag = 1;
}

こちらのタイプミスをした時の処理の部分に


mistake_ary[mondai_code_ary[moji_point] - 97]++;

こちらの一文を加える事で間違えた場所を記録する事ができます。

配列の中に配列が入るので慣れないウチはややこしいかもしれません。

このような時は一つ一つ分解して考えましょう！

例えば「bed」という単語の２文字目の「e」を打ち間違えた時を考えてみます。

「bed」の２文字目を打ち間違えた場合

まずは「mondai_code_ary」の中身です。

「mondai_code_ary」には問題の文字コードが入るので

bed

↓

[98][101][100]

このようになります。

続いて「moji_point」ですが、２文字目になりますので「1」になります。(１文字目は「0」から始まるので)

変数の内容がわかったトコロでこれらをさきほどのプログラムに当てはめます。

mondai_code_ary[1]　→　101

なので、もともとの部分にあてはめると・・・、

mistake_ary[101 - 97]++　→　mistake_ary[4]++

結果「mistake_ary」の「e」に対応する部分を加算する事ができました！

スコア

今回はシンプルに一単語正解したら「10」点加算しようと思いますので「my_get_key()」後半部分の正解が確定した時点で


score = score + 10;

こちらの一文を加えます。

結果報告用関数

変数の準備ができたトコロで結果報告です。


function my_result(){
	document.write("出題数=" + stage + "問<br>");
	document.write("正解数=" + (score / 10) + "問<br>");
	document.write("間違えた場所<br>");
	for(i = 0;i < 26;i++){
		if(mistake_ary[i] > 0){
			document.write(String.fromCharCode(i + 97) + ":" + mistake_ary[i] + "回 ");
		}
	}
}

結果報告用の関数「my_result()」です。

出題数にはそのまま「stage」の値を、正解数は一問正解するたびに「score」は10点増えるので、それを10で割れば正解数になりますね！

最後に間違えた場所ですが、「String.fromCharCode」で文字コードから文字に変換できるので「mistake_ary」を「for」ループで一巡して、加算された場所に「a」の文字コード「97」を加えれば表示する事ができますね。

あとは「my_game_over()」と「my_time_over()」にこちらの関数を加えれば結果報告は完了です！