どうもかわうそです！
今回は、jQueryとjavascriptでブラインドタッチ練習用のタイピングゲームを作ってみましたので、その内容をお伝えしていきます！
まずこちらがURLです。https://kawauso-29.com/typing/
実際に遊んでみた動画はこんな感じです。
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使って、自分にとって使いやすい通知サービスを作っていこうと思います。