はじめに

この記事はN高等学校 Advent Calendar 2019の12日目の記事です。
昨日の記事は同じキャンパスの先輩であるGenbu氏の静的な Web サイトをどうやって速くするかです。合わせて是非。
因みに明日の記事も同じキャンパスの狂人Nemesis氏のflutter触ったです。こちらも合わせてどうぞ。

こんにちは。N高等学校1年生のはとと申します。プログラミング歴は一年にも満たない若輩者ではありますが、ここまでの学習の成果としてアドベントカレンダーを書かせていただきます。よろしくお願いいたします。

作ったもの

See the Pen GRgJjZL by HATO (@hatopoppo) on CodePen.

タイピングゲームです。HTMLとCSSだけで実装しました。JavaScriptは使ってません。
inputの自動選択は、私が知る限りHTMLとCSSではどうにもならないので一々クリックしないといけない仕様となっております。
本来こんな事CSSでやるべきじゃないので当然の如く脳筋クソコードです。それにあいまって元々のクソコード力も重なりクソの二段構えコードとなっております。

若干ゃ解説

このコードの鍵や、苦労した点等の解説を少しだけします。

仕組み

まずこのタイピングゲームで鍵になるのはここ

<inputtype="text"class="A1"pattern="java"required>

inputタグの中の

pattern="java"

ここ。

このpatternという所でinputに入れられたテキストの正誤判定をしています。
本来の用途としては、

pattern="^[0-9A-Za-z]+$"

等で受け付ける文字の種類を限定するのですが¹、今回はここに文字列javaを入れることにより、この文字列以外は受け付けないという形に出来ました。

そして、文字列が正しいと判断されると擬似要素 :valid が、
正しくないと判断されると擬似要素 :invalid が与えられる為、CSSで

.A1:valid~.A2:invalid~.A3:invalid~.A4:invalid~.A5:invalid~.A6:invalid~.Q2{opacity:1;}

のように書いてやって、A1（最初の問題のinput）が正しければ次の問題を表示という形に出来ました。
因みに得点の部分もこういう感じで切り替えています。本来は別の方法を使いたかったのですが後述の理由により断念しました。

苦労した点

今回苦労したのは、inputの切り替えと得点の兼ね合いです。
現在正解時のinputの交代は、

input[pattern]:valid{display:none;}

このように、validの時に要素を消すという処理で行なっているのですが、このような形にすると、元々得点の部分で行なっていた、要素のカウントを出来るコード

input[pattern]:valid{counter-increment:count;

が動かなくなり、原因と改善案の模索で半日ほど潰していました。
理由は恐らく、要素そのものを消している為、カウント対象の要素がなかった事だと思います。
実際、opacityを0にする方式にしてみるとしっかりと得点のカウントがされました。
しかし、opacityを切り替える場合では、inputが常に存在している状態になります。
その状態だと問題を解いた後も、見えないinputがまだ選択状態、即ち入力待ちの状態になってしまう為、そこから次のinputの選択をせずに入力を行うと

一問前のinputに入力
　　　　↓
patternの正誤判定が働き一問前の問題とinputがまた表示

というストレスフルの状態になった為、やむなくinputは消滅させ得点は正誤判定で切り替えるシステムとしました

終わりに

脳筋実装ではありますが、CSSでもゲームを作る事ができました。
CSSの限界はもっと上にあると思うので、今後もCSSの限界に挑み続けようと思います。
最後に、このゲームを作っている途中にクラスメートに言われた言葉を金言として書き、終わろうと思います。
「CSSはゲームを作るものじゃない」
「時間の無駄」
「JavaScript使え」
「CSS中毒」

ご覧いただきありがとうございました。

追記

すでにCSSで僕なんかよりも完成度高くタイピングゲームを作り、分かりやすく解説もしていらっしゃる先駆者の方がおりましたので、畏敬の念を込めてリンクを貼らせていただきます。
codegrid