ウマ娘の馬名当てページを作った

懐かしい馬名が目白押しのウマ娘の馬名で、馬名の早当てページを作ってみました。
Javascriptのみで作ってあります。

poruruba/Umamusume

とりあえず、やってみたい場合は、以下のページを参照してみてください。
著作権の都合上、モザイクをかけているのと、ウマ娘がたくさんありすぎて、とりあえず、12頭を入れています。

ソースコード解説

以下の状態遷移に基づきます。

js/start.js

const QUIZ_STATUS = {
    IDLE : 0, // 開始前
    PREPARE: 1, // カウントダウン中
    WAITING : 2, // 宣告待ち
    INPUT: 3, // 回答待ち
    ANSWER: 4, // 降参
    CORRECT : 5, // 正解時
    MISS: 6, // 誤り時
};

状態が変わるたびに以下が呼び出されます。
ユーザからの回答待ち受け時間など、タイムアウト処理も含まれています。

js/start.js

        process: function(){
            if( this.counting < 0 ){
                // 状態遷移直後
            }
            if( this.counting == 0 ){
                // タイムアウト発生
            }
            if( this.counting >= 1 ){
                // タイムアウト待ち受け中
            }
        },

状態遷移は以下を呼び出します。

js/start.js

process_status: function(status){

上述の通り、状態遷移直後の処理と、タイムアウト発生時の処理を記述しています。

#コンテンツの用意

コンテンツは、quiz_imagesフォルダに置いています。2つ用意していまして、ウマ名を答えてもらうときの絵と、ウマ名を答えた後の結果の絵です。
それらを配置したのち、以下のファイル quiz_contents.js を作成します。

js/quiz_contents.js

const quiz_contents = [
  {
    name: "スペシャルウィーク",
    image: "quiz_images/スペシャルウィーク.png",
    blank_image: "quiz_images/blank_スペシャルウィーク.png",
    phrase: "お母ちゃん、見てて！ 私、日本一のウマ娘になる！"
  },
　・・・・

nameが答えの馬名、imageが答えた後の結果の絵の場所、blank_imageが答えてもらうときの絵です。

以下の部分は、お好みに合わせて適当に変えてください。

js/start.js

        NUM_OF_SELECT: 3,   // 選択肢の数
        PREPARE_COUNT : 3, // クイズ表示までのウェイト時間(秒)
        WAITING_DURATION: 5000, // 宣言待ち時間
        INPUT_DURATION: 3000, // 選択待ち時間
        RESULT_DURATION: 3000, // 結果表示時間

以上