タイピングゲーム

今回は、HTML・CSS・JavaScriptを使って、ブラウザ上で遊べるタイピングゲームを作ってみました。
難しい設定などは不要で、ページ内に表示されている画面から、そのままタイピング練習ができます。

レベルを選んでスタート

レベル選択画面が表示されています。

現在レベルは全部で9段階あります。

最初は、キーボードの基本となるホームポジションから始まり、母音、アルファベット、ひらがなの単語、短い文章、長文へと少しずつ難しくなっていきます。

いきなり難しい文章を打つのではなく、段階的に練習できるようにしてみました。

基礎から文章入力まで練習できます

レベル1〜3は、キーボードの位置を覚えるための基礎練習です。

特にレベル1では、ホームポジションで使うキーを中心に練習できます。

レベル4以降は、ひらがなの単語が出てきます。
表示された言葉を見ながら、ローマ字で入力していく形です。

後半のレベルでは、短い文章や少し長めの文章も出てくるので、慣れてきたら文章入力の練習にもなります。

スコアとコンボもあります

ただ文字を打つだけだと少し味気ないので、スコアやコンボも入れてみました。

正しく入力するとスコアが増え、連続で正解するとコンボもつながります。

タイピング練習というより、ちょっとしたゲーム感覚で遊べるようにしたかったので、このあたりは作っていて楽しかった部分です。

デザインは2種類あります

今回のタイピングゲームには、デザインの切り替え機能も入れてみました。

ひとつは、ゲームっぽい雰囲気の「レトロ風」。
もうひとつは、落ち着いた雰囲気の「和風」です。

同じゲームでも、見た目を変えるだけで印象がかなり変わるので、その時の気分で変えてみてください。

遊び方

まず、好きなレベルを選びます。
画面に表示された文字や言葉を見て、入力欄にローマ字で入力します。

正しく入力できると、自動で次の問題に進みます。

制限時間が終わると、スコアや正解数、ミス数、正確率が表示されます。

最初はゆっくりでもいいので、正確に打つことを意識して遊んでみてください。

不具合があるかも

自分でもやってみましたが、もしかしたら不具合があるかもしれないので、発見した際にはご連絡頂けると修正＆改善ができます。