こんにちは、企画制作課のmatsumotoです。
DTPオペレーターをしながら、日々、Webのフロントエンドの勉強もしています。

さて、主題のJavaScriptとCSSアニメーションを使ったタイピングゲームについてですが、
私が密かにJavaScriptの練習のために作ったものの一つで、それらを眠らせておくのはもったいないな〜と思ったので、この場を借りて発表させてもらおうと思った次第です！

※会社では作ってません！

そもそも JavaScript、CSSって何？

JavaScriptとCSSは、Webサイトでユーザーが目にする部分（フロントエンド）を構成する言語です。

フロントエンドを構成する主な言語としては、JavaScriptとCSSの他に、HTMLという言語もあります。

それぞれの役割としては、

① HTML →　Webページそのもの。見出しや本文等、文書の構造化
② CSS →　装飾、簡易的なアニメーション
③ JavaScript →　動的な表現、計算・処理

に分けられます。

今回紹介する内容は、これらWebの言語を扱ったお話になります。

まずは出来上がりのモノから

タイピングゲームのリンクはこちら！

※動作環境はPCで Google Chrome 最新版推奨！

遊び方

画面に大きく表示されているワードをテキストボックスに打ち込み、画面の「SEND」ボタンを押す（Enterキーでも可）と入力の判定に進みます。
画面下に表示される、タイムゲージが右端まで到達すると時間切れになります。時間設定は１問あたり１０秒です。
入力ミスの回数と時間切れした回数が、合計３回になると終了します。

出題されるワードについて

出題されるワードはCSSで使われるプロパティです。
CSSプロパティって、よく使うものでも単語スペルをちゃんと覚えていなかったりするんですよね・・・（エディターの入力補完があるから）
どうせなら覚えて損のない（私が）単語にしようと思ったので、CSSプロパティが採用に至りました。

ようやく本題・・・

はい、ようやく「JavaScriptとCSSアニメーションの合わせ技」の部分です。

※今回はタイピングゲームの詳しい説明はしません。（期待をさせてしまった方はすいません・・・。）

タイピングゲームを開始するとすぐに、画面下で動くタイムゲージのアニメーション。

それを実現しているのが以下のCSSコードです。

<style>
.time-gauge {
    animation: progress 15s linear 1;
    /* 省略 */
}

@keyframes progress {
    0% {
        width: 0;
    }
    
    100% {
        width: 100%;
    }
}
</style>

なんと、アニメーション部分はこれだけで成り立っています・・・！

書いてあることを少し説明をしますと、

任意のセレクタ名 {
    animation: アニメーションの名前  開始から終了までの時間  アニメーションが変化する速度  繰り返し回数;
}

@keyframes アニメーションの名前 {
    /* アニメーションの開始地点での状態 */
    0% {
        CSSプロパティ: 値;
    }
    
    /* アニメーションの終了地点での状態 */
    100% {
        CSSプロパティ: 値;
    }
}

となり、今回で言えば

アニメーションの名前：　progress
開始から終了までの時間：　15秒
アニメーションが変化する速度：　linear(一定の速度)
繰り返し回数：　1回;
アニメーションの開始地点での状態：　横幅は0%
アニメーションの終了地点での状態：　横幅は100%（画面いっぱい）

になります。

今回のタイムゲージに関連するところを全て載せると↓のような感じ。

<style>
.time-gauge {
    animation: progress 15s linear 1;
    background-color: #4c2fec;
    bottom: 0;
    color: #fff;
    height: 5px;
    position: absolute;
}

@keyframes progress {
    0% {
        width: 0;
    }
    
    100% {
        width: 100%;
    }
}
</style>

続いて、JavaScriptですが、大きく分けてポイントが２つあります。

① HTMLコードの動的な挿入と削除
② CSSアニメーションが終了したタイミングで関数を呼び出す

まずはコードを見ていきましょう。

<!-- HTML -->
<div id="timeGaugeView"></div>

<script>
// JavaScript
const timeGaugeView = document.getElementById('timeGaugeView');

const questions = () => {
    const timeGauge = '<div class="time-gauge" onanimationend="timeOut()"></div>';
    
    /* 省略 */
    
    timeGaugeView.innerHTML = timeGauge;
};
</script>

7行目　id="timeGaugeView"というHTML要素を取得して、timeGaugeViewという変数に格納しています。
10行目　新しくHTMLコードを用意し、timeGaugeという変数に格納しています。
14行目　変数timeGaugeを、7行目で取得したHTML要素の子要素として挿入しています。

新しく挿入されるHTMLコードの「onanimationend="timeOut()"」という部分は、CSSアニメーションが終了したときに「””」で囲われた任意の関数を呼び出します。

はい！　↑ここです合わせ技！

タイピングゲームで、実際にCSSアニメーションが終了したときに呼び出される「timeOut」という関数は、時間切れになったときの処理を行います。

<script>
// 時間切れ
const timeOut = () => {
    out++; // 時間切れになった回数をカウント
    
    if(out === TIMEOUT){ // ３回時間切れになると終わり
        result();
    } else if(out + miss === MISS){ // 入力ミスの回数と時間切れした回数が、合計３回になったときも終わり
    	result();
    } else { // 上２つの条件が当てはまらないとき、次の問題が出される
        questions();
    }
};
</script>

このように、「CSSアニメーションの終了が引き金となって、次の処理が行われる」という、JavaScriptとCSSの連動がなされているのです！

ちなみに挿入したHTMLコードを削除する（タイムゲージの削除）場合はこんな↓感じ。

<script>

timeGaugeView.innerHTML = '';

</script>

いかがでしたでしょうか。
今回はこれで以上となります。

次回の投稿も隠れた作品を紹介するかもしれません。

それではまた。