前回までで、JavaScriptでキーボード入力を受け付ける方法について学びました。 このページではその機能を利用して、簡単なタイピングゲームを作ってみたいと思います。
タイピングゲームといっても無数にあるので、本当に簡単なものにしたいと思います (本分はJavaScriptの勉強なので)。 ここではA~Zまでの文字をランダムに200文字表示して、 その入力速度を計ってみることにします。
このページのスクリプトを理解できれば、 もっと複雑で高性能なタイピングゲームも作れるようになるでしょう。 是非じっくりと読んで理解していってください。
タイピングゲームを作るために、以下の流れに従ってスクリプトを組んでみることにしましょう。
文字に対応するキーコードを、配列kcodeを作成して格納します。
0~25までの乱数を200個作成して、配列rndに格納します。
取得したキーコードが問題文先頭文字のキーコードと同じか確認します。
同じ場合、現在時刻を取得して、変数typStartに格納します。
cntが200になったら、現在の時間を取得して変数typEndに格納します。
以下のスクリプトをHTMLのヘッダーに記入してみてください。 今回は解説は殆どしていませんので、スクリプト中のコメントを参考になさってください。
上記スクリプトのサンプルです。出題枠はCSSで少し装飾しています。詳しくはソースを覗いてみて下さい。
仮に今10文字入力したとしましょう。そうすると問題文は先頭から10文字削除されています。 ということで先頭はmoji[rnd[10]]が表示されています。 それに対応するキーコードはkcode[rnd[10]]になります。
他に文字の切り取りや乱数の作成、時間の計算等について復習なさりたい方は、以下のリンクを参照なさってください。
上記のタイピングゲームでは、文字がザ~と流れて目がチカチカします。 それで少しだけ改良したものを作ってみました。プレイして比べてみてください。
このスクリプトでは、文字を切り取らずに色を薄く(灰色)していきます。 ただ上のままのスクリプトで色変えを行うと、 折り返し部分で文字が次の行に行ったり戻ったりして見にくくなりました。 それでテーブルを使って文字を表示するようにしています。
テーブルの各セルにID名を付けて、そのセルの文字色を灰色にするようにしています。 詳しく解説はしませんが、関心がおありの方は是非ソースを覗いて研究なさってください。