Help us understand the problem. What is going on with this article?

CSSは神なのでゲームも作れる

はじめに

この記事は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でやるべきじゃないので当然の如く脳筋クソコードです。それにあいまって元々のクソコード力も重なりクソの二段構えコードとなっております。

若干ゃ解説

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

仕組み

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

CSSisGOD.html
<input type="text" class="A1" pattern="java" required>

inputタグの中の

CSSisGOD.html
pattern="java"

ここ。

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

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

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

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

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

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

苦労した点

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

CSSisGOD.css
input[pattern]:valid{
  display: none;
}

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

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

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

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

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

終わりに

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

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

追記

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


  1. この場合は、半角英数字のみという制限をかけている。詳しくは他記事参照。 

hato-poppo
N高でWEBの勉強を始めた4期生です。備忘録的に活用します。
https://hatopoppo.studio/
nnn-school
IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成する。
https://nnn.ed.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした