やったこと

f:id:KaneyHonest:20210419141317p:plain

目的

タイピングの速度を上げるためにタイピングゲームをやっているときに、単文ではなく長文がやりたいと思ったのをきっかけに、長文タイピングゲームを作ろうと思いました。

jQueryではなくvue.js

以下の動画を見てjQueryじゃだめなんだーと思いvue.jsを即席で習得

www.youtube.com
ユーチューブで１時間以内に学習

www.youtube.com

作っていくうちに

まず気づくべきだったのは、ググれば長文タイピングゲームもでてくるという事実（完成してから知った）

www.e-typing.ne.jp
そして日本語入力を判定するのは難解な点

qiita.com

いちいち「あ」なら「a」、「つ」なら「tu」「tsu」とかを定義していくのが面倒なため、この時点で当初はなんとなく日本語入力を想定していたのを英語入力に軌道修正

virtual keyboard

以下のライブラリーでweb上にキーボードを表示

github.com

画面変更

v-ifを利用してtrueとfalseで最初の画面、３カウントダウン、タイピングゲーム、結果画面を変更。

<!-- 最初の画面 -->
<div v-if="view" class="top">

<!-- プレイ画面 -->
<div v-if="!view">

押したキーへの反応とその処理

created: function() {
        window.addEventListener('keydown', this.inputkey);
      },

methods: {
inputkey(event) {

          // タイピング画面のときだけ反応
          if ( this.count < 1 && this.selected > 0) {
            this.keydown = event.key;
            this.now = this.sentence[this.point];

            // 押したキーが合っていたなら
            if ( this.keydown === this.now.slice(this.word, this.word + 1)) {
              this.word++;
              this.words++;

              // 文章の文字数とカウントが同じなら次の文章を表示
              if (this.word === this.now.length) {
                this.point++;
                this.word = '';
                this.type = this.sentence[this.point];
                this.translation = this.translations[this.point];
              } else {
                this.type = '<span class="type">' + this.now.slice(0, this.word) + '</span>' + this.now.slice(this.word, this.now.length);  
              }
            } 
              //押したキーが違うなら赤色で表示
              else if (this.keydown !== 'Shift') { 
              this.type = '<span class="type">' + this.now.slice(0, this.word) + '</span>' + '<span style="background-color: red;">' + this.now.slice(this.word, this.word + 1) + '</span>' + this.now.slice(this.word + 1, this.now.length);
            }
          }
        }
      },