JavaScriptでシンプルなゲームを作成する #01

　前回の美少女ポジティブ日記開発から数ヶ月。
　無事に就職が決まった私でございますが、今回はJavaScriptの学習として、ブラウザで動く単純なゲームを作成したいと思います。

どのようなゲームか？

　数を数えるゲームです。はい？と思われたことと存じますので、詳細に説明いたします。

アルバイトの作業をゲーム化

　現在、私は、物流倉庫で派遣のアルバイトをしております。
夏は蒸しに蒸された灼熱の空間で、滝のような汗を撒き散らしながら、冬は搬入口より入りし北風が荒れ狂う極寒の空間で、小鹿のように震えながら、日々作業に勤しんでおります。
　話が逸れましたが、そのアルバイトの作業を簡略化したものをゲームにしよう、という目論見です。
　作業の流れは、以下のようになります。

　①搬入された段ボールから商品を取り出す
　②リストと照らし合わせて、数が合っているかを確認する。
　③確認後、商品を箱に詰める。
　④箱の外側に、商品判別用の看板を書いて、貼付。

　この流れの中から、今回は「数が合っているかを確認する」「看板を書く」という項目のみをゲーム化しようと思います。 　

作成予定画面

　作成すべきそれぞれの画面を、以下に設定します。
　全てJSの処理で切り替わるので、単一のページ内に収めることとなります。こういうのをSPAと呼ぶのでしょうか？

スタート画面

　タイトル画面です。スタートを押せばゲームが始まります。それと同時にカウントダウンがスタートするため、以下に記す工程を、できるだけ素早く行わなければいけません。

カウント画面

　画面上部に、検品する商品の詳細が記されています。
　この画面では「qty」に記されている数と同じ回数だけボタンを連打（＝カウント）することが求められます。現在のカウント数は表示されないので、自分の中で数を数えながらボタンを押す必要があります。
　「次へ」で次の工程へと移ります。

看板選択画面

　この画面では正しい看板を選択する必要があります。
　画面上部の「Seller Id」に記されている文字列と同じ看板を選択します。
　ここで誤った看板を選ぶと、その時点でゲームオーバーです。シビア。

看板記入画面

　この画面では、看板に商品判別用のコードを書きます。
　画面上部の「SKU」に記されている数列を、入力欄に正しく記入します。

リザルト画面

　制限時間内に、正確にカウントし、正確に看板を選び、正確に看板に記入を行えば、ゲームクリアです。
　リザルトが画面に表示され、タイトルへと戻れます。
　看板の選択を間違えたり、途中で時間切れになった場合も、強制的にこの画面が表示されます。

開発工程

①各画面のマークアップとレイアウト作成

　スタート画面、カウント画面、看板選択画面、看板記入画面、リザルト画面、の計５つの画面を作成します。
　ゲーム的処理は一旦置いておき、「次へ」を選択することで画面を移れるようにしておきましょう。

②ゲーム的処理の作成

　カウント画面では、ボタンを押すことでカウントが進むように
　看板選択画面では、選択した看板の情報が保持され、次の画面で表示されるように
　看板記入画面では、テキストボックスに入力した情報が保持されるように
　リザルト画面では、保持したそれぞれの情報を元に、結果が表示されるように
　それぞれの処理を、作成して行きましょう。

③ゲーム的処理の作成Part2

　カウントすべき数量、選択すべき看板名、記入すべき数列、制限時間……これらは、ゲーム開始と同時に、ランダムで設定される必要があります。
　そういった処理を作成しましょう。

④制限時間処理の作成

　スタートと同時にカウントダウンが始まり、０になれば強制的にリザルト画面へ移行する処理を作成します。
　カウントすべき数量に応じて、制限時間が変動するように設定できればと思っております。

⑤完成

　以上の工程を作りきることで、ゲームとしての機能は完成するはずです。細かなバグ等を調整していきましょう。