jQueryとjavascriptでブラインドタッチ練習用のタイピングゲームを自作した

どうもかわうそです!

今回は、jQueryとjavascriptでブラインドタッチ練習用のタイピングゲームを作ってみましたので、その内容をお伝えしていきます!

まずこちらがURLです。https://kawauso-29.com/typing/

実際に遊んでみた動画はこんな感じです。

jQueryで自作して社内公開したタイピングゲームです

youtubeでも紹介しました。

実はこれ社内ブログでも公開したんです。なかなか評判が良く嬉しかったです!

さっそく紹介していきます。

jQueryとjavascriptでタイピングゲームを自作してみた

作成した経緯や使い方など書いていきます!

完全オリジナルというか、教材や教本、サイトは見てないので、これが正しい作り方だったかは正直疑問ですが、めちゃめちゃ楽しかったです!

使い方解説

  • 半角英数字のみの対応です(判定は一応できる)
  • スマホは非対応です(判定は一応されます)
  • できる限り大きいディスプレイをおすすめします
  • 入力用のテキストエリアにフォーカスされると、仮想キーボードオープンしてゲームスタートです。
  • 設定はcookieに保存され、次回も同じ状態でスタートできます。

darkmode

ダークテーマに変更できます。自己満テーマです。

wordmode

かわうそが事前に設定してある単語が問題として出題されます。

fileupmode

メモ帳やcsvファイルで自分が設定した文字がランダムに出題されます。

出題単語単位で改行してください。aiueoとかkakikukekoでもお好きにどうぞ・・・

文字化けする場合はエンコードを何パターンか変えながらやってみてください。UTF-8なら問題ないはずです。

countup

初期設定です。

ゲームをしている時間を計測してくれるモードです。endボタンを押すことで、リザルト画面に移動できます。

countdown

制限時間モードです。初期値は30秒だったはず・・・

キーボード

ホームポジションに基づいて色分けしています。

  • グレー:小指
  • 黄色:薬指
  • ピンク:中指
  • 青:人差し指

です。ダークテーマでは、色分けのヘルパーはでませんが、次に打つべき文字のヘルプは出してくれます。

リザルト画面

総合計タイピング数、成功タイピング数、ngタイピング数、経過時間を全て計測しています。

ここでは成功タイピング数/経過時間 つまり、1秒あたりの成功タイピング数を精度指標として、record更新に使用しています。

仮に、成功タイピング数/sが同じだった場合、第二指標として経過時間の大小で判定すべきなのですが、未設定です。

使い方は以上ですね!簡単なので、いろいろ試してみてください。

制作の動機

ブラインドタッチの練習がしたかったけど、使いやすいタイピングゲームがなかった!

とりあえず作れそうかな~と思った!

使用言語

  • jQuery
  • JavaScript
  • HTML
  • CSS

ほぼjQueryです。HTMLもできるだけ記述が少ないよう、jsで動的に作ったりしています。

jQueryのライブラリはcookie.jsのみ使用

開発期間

3週間、1日90分ぐらいだったと思います。

基本仕事中の息抜きとして作成し、帰宅後はお酒飲みながらゲーム感覚で作成していました。とりあえず楽しかったです。

反省点

  • 事前設計をしなかったのでかなり記述が長くなり、保守性はとんどなく、ゴリゴリのコードになってしまった
  • どこに何が書いてあるのか分からない

反省点しかありません!もっと美しく、もっと少なく、もっと拡張性があったり、メンテナンスしやすいコードを書けるようになりたいです。

学んだこと

  • cookieの使い方はかなり勉強になった
  • 演奏配列に慣れた
  • オブジェクトの型って本当に大事だと思った。
  • エラーで上手くいかない時間も、これ乗り越えたら成長できるぞー!とポジティブになれた。

次回に向けて

ZaifのAPI使えるみたいなので、仮想通貨の情報をで引っ張てきて、うまく自分のスマホに通知されるように何か作ってみたいですね~!

感想

とにかく制作時間中は本当に楽しかったです!

どんどん新しい関数や記述の仕方を覚えていきました。

普段仕事で使う記述なんて、フロント部分の動的なページ作成がほとんどなので、こうやって作り込むことは今までなかったです。

楽しい気持ちも自分の雑魚さも改めて実感しました!

次は仮想通貨のAPI使って、自分にとって使いやすい通知サービスを作っていこうと思います。

フォローする