各画面をマークアップする #02

　現在の私は相も変わらず、地獄の業火で炙られているが如き猛暑の中、毎日アルバイトに勤しんでおります。
　さて、今回は、HTMLとCSSを用いて、ゲームに必要な画面を作り上げていきましょう。

スタート画面

　所謂タイトル画面です。 　

　ゲームのタイトルは「THE・検品」です。基本的に、各作業を検品と呼ぶためです。現在の時給を表示しておき、ゲームをクリアするたびに時給が上がっていく仕組みにしたいと思います。ちなみに、初期設定である1250円は、私のガチな時給です。交通費は出ないのですが、それを差し引いても高めだと思います。いいアルバイトでした。

　それはさておき、CSSを用いて各パーツに適切なレイアウトを設定しましょう。

　至極シンプルです。とりわけ大変なこともありません。

カウント画面

　画面上部に記されている「qty」という数だけ、ボタンを押すことを要求されます。
　ボタンはクリックされた時、押されている感が出るといいですね。、擬似クラス:activeを用いて、それらしく設定します。基本的にスマホで遊ぶことを想定しているため、ontouchstart属性をボタンにセットしておきます。

看板選択画面

　左右の矢印で看板を切り替え、適切な看板を選択する必要があります。適切な看板とは、画面上部に記載されている「Seller Id」と同じ看板のことです。
　矢印で看板を切り替える処理は、この時点では実装されていません。

看板記入画面

　こちらも、画面上部に記載されている「SKU」と同じ数字を打ち込む処理を求められます。先ほどと同じパーツを使っているため、すぐにできました。

リザルト画面

　全ての工程を終えると、結果画面が表示されます。カウント、看板選択、看板記入を、時間内にこなすことができれば、成功です。
　時給が50円アップします。超過大評価であることは否定できません。
　ちなみに「よくやった！」と言ってるおじさんのイラストは、実際の現場のリーダーに酷似しています。バレたら多分殺されます。

　「カウントを間違えたまま全ての工程を終える」「看板の選択でミスをする」「看板の記入でミスをする」「時間切れ」……いずれかの条件を満たすと、検品失敗となります。辛辣な言葉を撃たれ、解雇されます。そうはいっても、タイトル画面に戻れば普通にもう一度遊べます。ただし、時給はリセットされます。







　画面の作成は、以上となります。次回はいよいよJavaScriptを用いて、これらの画面を同一ページ内で切り替えられるようにしていきましょう。