youtube「Vue.jsでタイピングゲームをつくってみよう！」に問題数の変動に応じた対応をしてみた。

今回参考にさせていただいた動画はyoutuberきどさんの

こちらの動画「Vue.jsでタイピングゲームをつくってみよう！」です。

とてもわかりやすい動画でした。ありがとうございます。

こちらのタイピングゲームに私なりのアレンジを加えてみました。

本記事の内容は

・タイピングゲームの問題数が変わっても同じ動作にする

です。
動画の場合、タイピングゲームの問題数が5つで固定されています。
「正解した時のゲージの増え方と色」が問題数の変化に対応できないので
今回はそこにアレンジを加えていきます。

こんな感じで、問題数を増やすとゲージが突き抜けてしまう。
色も5問目正解で変わってしまい、また元に戻る。

まずは、アレンジ前のコードはこちら
問題数が5問固定になっている箇所にコメントいれます。

vue.js

new Vue({
    el: "#app",
    data: {
        startFlg: "",
        current_question: "",
        questions: [
            'apple',
            'banana',
            'chocolate',
            'donut',
            'espresso',
        ],
        typeBox: "",
        current_question_counts: 0,
        question_counts: 0
    },
    computed: {
        styleObjet: function() {
            width = 20 * this.current_question_counts + "%"
            //①正解数ゲージの増やし量width
            //↑20は(100%/問題数5)　これが固定されているので問題数に応じて変化できない
            if (this.current_question_counts == 5) {
            //②current_question_countsが問題数になったらcolorを変えるif文
            //←5は問題数。これが固定されているので問題数に応じて変化できない
                color = "#03a9f4"
            } else {
                color = "orange"
            }
            return {
                'width': width,
                'background-color': color
            }
        }
    },
    methods: {
        gameStart: function() {
            this.startFlg = true;
            this.$nextTick(function() {
                document.getElementById('typeFrom').focus()
            })
        }
    },
    mounted: function() {
        this.current_question = this.questions[0]
        this.question_counts = this.questions.length
    },
    watch: {
        typeBox: function(e) {
            if (e == this.current_question) {
                this.questions.splice(0, 1)
                this.current_question = this.questions[0]
                this.typeBox = ""
                this.current_question_counts = this.current_question_counts + 1
            }
        }
    }
})

ゲージの増やし量やゲージの色が変わる部分の値が固定されているので

ここにアレンジを追加します。
追加したアレンジがこちら　※最後に全文載せます。

vue.js

        questions: [
            'apple',
            'banana',
            'chocolate',
            'donut',
            'espresso',
            'example1', //6問目追加
            'example2', //7問目追加
            'example3' //8問目追加
        ],

まず問題数を増やしてみます。
この問題数に応じたコードにアレンジしますね。

vue.js

            'example1', //6問目追加
            'example2', //7問目追加
            'example3' //8問目追加
        ],
        typeBox: "",
        current_question_counts: 0,
        question_counts: 0,
        i: 0 //①変数iを定義 
    },
    computed: {
        styleObjet: function() {
            width_value = 100 / (this.questions.length + this.i) 
            //②変数width_valueに(100% / 問題数 + 減ってしまった分を足す変数i)代入
            width = width_value * this.current_question_counts + "%"
            //③従来20固定だった箇所に変数width_valueを差し込む
            //これにより問題数に応じたゲージの増え方をします。
            if (this.current_question_counts == this.questions.length + this.i) { 
            //④従来5固定だった箇所にthis.questions.length + this.iを差し込む
            //これにより問題数に応じたゲージの色の変化をします。
                color = "#03a9f4"
            } else {
                color = "orange"
            }
            this.i++ //④変数iに＋１
            return {
                'width': width,
                'background-color': color
            }
        }
    },

①まず変数iをcomputedの外で定義して0を入れておきます。これ大事です。

ゲージの増え量の調整をします。

②computed内で変数width_valueを定義して100 / (this.questions.length + this.i) を代入。
これでゲージ100%に対して問題数で割ってあげた数が１問正解時の増え量width_valueになる感じです。
また、ここで変数i君が登場しました。これ大事です（2回目)。

③従来20固定だった箇所に変数width_lengthを差し込みます。
これにより問題数に応じたゲージの増え方をします。

次にゲージの色の調整をします。

④従来5固定だった箇所にthis.questions.length + this.iを差し込む。
これで全問正解後のゲージの色が変わります。

さて、変数iが必要な理由。

今回のコードは問題終了後に配列questionsの１番目を削除して、次の問題を表示するコードでしたね。
※もし、理解ができてない方はいましたらyoutube動画の方を再度見てください。

配列数が減るってことはlengthが減るってことなので、そのままだとゲージの100%を割る数がどんどん減っていきます。
つまり、ゲージの増え量が問題正解ごとにどんどん増えていってしまいます。

それを防ぐ為に変数i君をいれてあげて、毎問題正解後に+1してあげます。
減ってしまう配列数lengthを足してあげる形になります。

つまり、変数i君をcomputed外で定義してあげた理由は、変数内の値を問題正解後に増やして上げていく為です。
それが⑤ this.i++です。

はい、これでquestionsの配列内に入れる配列(問題数)が何問になっても
ゲージの増え方と色の変化をさせることができました。

いい感じに増えていきます。

色もちゃんと変わった！

全文はこちら↓

vue.js

new Vue({
    el: "#app",
    data: {
        startFlg: "",
        current_question: "",
        questions: [
            'apple',
            'banana',
            'chocolate',
            'donut',
            'espresso',
            'example1', //6問目追加
            'example2', //7問目追加
            'example3' //8問目追加
        ],
        typeBox: "",
        current_question_counts: 0,
        question_counts: 0,
        i: 0 //変数iを定義 
    },
     computed: {
        styleObjet: function() {
            width_value = 100 / (this.questions.length + this.i) 
            //②変数width_valueに(100% / 問題数 + 減ってしまった分を足す変数i)代入
            width = width_value * this.current_question_counts + "%"
            //③従来20固定だった箇所に変数width_valueを差し込む
            //これにより問題数に応じたゲージの増え方をします。※変数iが必要な理由は後述します。
            if (this.current_question_counts == this.questions.length + this.i) { 
            //④従来5固定だった箇所にthis.questions.length + this.iを差し込む
                color = "#03a9f4"
            } else {
                color = "orange"
            }
            this.i++ //④変数iに＋１
            return {
                'width': width,
                'background-color': color
            }
        }
    },
    methods: {
        gameStart: function() {
            this.startFlg = true;
            this.$nextTick(function() {
                document.getElementById('typeFrom').focus()
            })
        }
    },
    mounted: function() {
        this.current_question = this.questions[0]
        this.question_counts = this.questions.length
    },
    watch: {
        typeBox: function(e) {
            if (e == this.current_question) {
                this.questions.splice(0, 1)
                this.current_question = this.questions[0]
                this.typeBox = ""
                this.current_question_counts = this.current_question_counts + 1
            }
        }
    }
})

まぁそもそも問題数を変動させるとかはないと思うのですが気になったので
アレンジしてみました。

ここで問題になる文言をRubyのスクレイピングで持ってきて
ランダムに格納、とかやってみても面白そうですね。

丁度、Railsのアプリにvue.jsを導入しようと思っていた矢先に、とても参考になる動画に巡り逢えてよかったです。
きどさんには感謝の気持ちです。

この動画もおすすめですね。

４月は勉強+就活です！
気合いれてがんばっていきます。