10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【個人開発】タイポを探すゲームをつくりました

Last updated at Posted at 2021-12-20

はじめに

私は現在RUNTEQというプログラミングスクールで学習しています。
学習を進める中で、何度もタイポエラーに遭遇してきました。
ときには前と同じタイポで時間を食ってしまい、ガックリしてしまうこともありました。

そんなある日、「google」という社名はもともとは「googol」のタイポだったと知りました。
そして人間が手で打つ以上、どんなにつよつよエンジニアであってもタイポをすることはあって、それはきっと今後も変わらないのだろうなと思いました。ならばタイポ自体を防ごうとするのではなく、日頃からタイポを見つける練習をすることで、早期発見に努めることはできるんじゃないか?と考えこのゲームを作るに至りました。

概要

5問出題、制限時間3分。ただひたすらにタイポを探すゲームです。

※タイポ探しの練習を目的としているので、制限時間を超えてもゲームオーバーにはなりません。スコアがマイナス値になります。
※目が疲れるので、疲れ目でないとき推奨です(特にスマホの場合)。

遊び方

  1. トップページです。右下の【Play】ボタンを押下してください。
    スクリーンショット 2021-12-17 18.26.23.png
  2. ルールページでルールを確認し、準備ができたら【Start】ボタンを押下してください。
    スクリーンショット 2021-12-17 18.42.06.png
  3. プレイ画面です。赤枠内の!ボタンでヒントがでます。隣の音声ボタンでは音のありなしを選べます。
    この問題だと緑枠がタイポなので、これを押すと次の問題に進みます。
    スクリーンショット 2021-12-17 18.26.54.png
  4. 5問終了後に結果画面が表示されます。
    スクリーンショット 2021-12-17 18.27.55.png

使用技術

  • Nuxt.js (@nuxt/cli v2.15.8)
  • Firebase (9.18.0)
    • Cloud Firestore
    • Hosting

苦労したところ

DBにはタイポの正誤リストのみを入れており、取得後オブジェクトやら配列やらでループして、タイポの位置や色がランダムになるように1行ずつ生成しているのですが、アルゴリズムを考えるのに頭が混乱して苦戦しました。
また、Cloud Firestoreにはrandomがなかったので、データをランダム取得しようとした場合に困りました。
ググってみて色々方法はあったのですが、今はそれほどデータ量が多くないので、一旦全データを取得し、そこからランダムに5つ選ぶ処理を入れています。

終わりに

たくさんの方に使って頂けて感動しました。
FirebaseのGoogle Analyticsを入れておいたので、数字で実績が見れてモチベーションになりました。
主にRuby、Ruby on Railsを学んでいるので、違う技術をキャッチアップしながら作るのは不安もありましたが、なんとか1人でリリースまで持っていけたので、自走力が少しついてきたのかなと思えたのも嬉しかったです。少しずつ機能追加などして運用していけたらなと思っています。

10
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?