ゲーム的処理を実装する #04

　前回で、ゲーム画面を遷移する処理は完成しました。
　今回は、各画面の操作内容を保持するような、ゲーム的な処理を作っていきましょう。

カウント処理

　この「数える」ボタンを押した時、カウントが進む処理を作っていきます。

// カウント処理
  $(document).on('click', '.countButton', function(){
    count++;
  });

　以上です。めちゃめちゃ単純。

看板切り替え処理

　左右の矢印で、看板をスライドさせて切り替える処理を実装します。先ほどとは打って変わって、めちゃめちゃ苦労しました。

１.まず、html上に看板を二つ用意します。片方にはdisplay: none;を持たせたstandByクラスを付与し、非表示にしています。
２.左の矢印を押した時、transform: translate(-500px, 0);という内容を持ったleftSlideクラスを、現在表示している看板に付与します。これで看板は左に飛んでいく。
３.左に飛んだ看板にdisplay: none;を持たせたtempStandByを付与し、消し去ります。①で出てきたstandByを使わないのは、それぞれを区別するためです。ちなみに、この処理をすぐに行うと、スライドの途中で看板が消えてしまいます。よって、queueメソッドを用いて、時間差でこの処理を行いましょう。
４.standByクラスの付いている看板に、transform: translate(500px, 0);を持ったrightSlideクラスを付けます。さらに、standByクラスを外します。これで、この看板は画面の右側に隠れてセットされます。
５.rightSlideクラスを外します。すると看板が、右から画面中央に飛んできます。
６.左に流した看板に付いている、leftSlideクラスとtempStandByクラスを外します。さらに、standByクラスを付与することで、①の状態に戻ります。

　至極複雑な処理でしたが、実装できた時の喜びも大きかったです。
　次の画面に移る時、ここで選択した看板名を保持しておき、次の画面のhtmlに表示させます。

看板記入処理

　先ほど保持した看板名が表示されています。ここの処理は単純であり、val()でテキストボックスに入力された数値を保持するだけですね。

結果表示処理

　「カウント」「看板名」「看板に記入した数値」、保持しているこれらの値が、正解と同じかどうか、if文で確かめていきます。
一つでも違うものがあれば、失敗。全て合っていれば成功です。結果に応じて、htmlに表示させる文章を変えていきましょう。



　端折った部分もありますが、基本的に以上となります。ゲームとしての機能は完成しつつありますのでね。