画面の切り替えを実装する #03

　前回は、ゲームを遊ぶための様々な画面を作り上げていきました。
　今回は、それらの画面表示を切り替える処理を、実装していきましょう。

　こちらはタイトル画面ですね。「スタート」というボタンを押すと

　このような、カウント画面に移行するのが理想です。

どのように実装していくか？

　まず、スタート画面、ゲーム画面、リザルト画面、それぞれを包括している親要素を、全てdisplay: none;で非表示にします。非表示であることがデフォルト、という感じですね。
　そしてnowShowという、些か適当な名前のクラスにdisplay: block;を設定し、nowShowが付与された画面が表示されるようにしましょう。

ゲームスタート

$(document).on('click', '#startButton', function(){
    $('#startScreen').removeClass('nowShow');
    $('#gameScreen').addClass('nowShow');
  });

　スタート画面でスタートを押すと、スタート画面のnowShowが取り除かれ、ゲーム画面にnowShowが付与されます。

ゲーム進行

　ゲーム画面において、上部の「制限時間表示」「検品物詳細表示」と、下部の「次へ」ボタンは、どの段階においても変わらず表示されています。故に、中核となる部分の表示だけをnowShowの移動で表現します。

// 現在nowShowがついてる番号を表示
 // 0……カウント画面
 // 1……看板選択画面
 // 2……看板記入画面
 index = $('.nowShow').index('.mainWrap');

　mainWrapとは、ゲームの操作を行う画面に付与されたクラスです。ゲームの段階の数だけ、このクラスのついた要素は存在します。このクラスの中でnowShowクラスがついているもの（＝現在表示されているもの）が何番目なのか、indexという変数に格納しておきます。

// 次へボタンを押すと次の画面を表示させる
  $(document).on('click', '.next', function(){
    $('.mainWrap').eq(index).removeClass('nowShow');
    $('.mainWrap').eq(index + 1).addClass('nowShow');
    index++;

    // 最後のゲームなら、結果画面に遷移
    if((index - 1) == 2){
      $('.mainWrap').removeClass('nowShow');
      $('#gameScreen').removeClass('nowShow');
      $('#resultScreen').addClass('nowShow');
    }
  });

　nextクラスのついたボタンを押すことで、現在のindex番目のmainWrapに付与されているnowShowクラスを消し去り、次の番号のmainWrapにnowShowを分け与えます。
　index - 1が最後のゲームの番号なら、リザルト画面に移行する分岐処理も召喚します。なぜindex - 1なのかというと、ボタンを押した時点でindexの番号が進んでしまうからです。

スタート画面へ

$(document).on('click', '#endButton', function(){
    $('#resultScreen').removeClass('nowShow');
    $('#startScreen').addClass('nowShow');
    index = 0;
    $('.mainWrap').eq(index).addClass('nowShow');
  });

　リザルト画面にて、「タイトルへ」というボタンをクリックすると、スタート画面へと戻る処理です。この時点でindexをリセットし、mainWrapに降り直しております。

　以上をもって、「スタート画面」→「ゲーム進行」→「結果表示」→「スタート画面」という画面ループを、クリック操作のみで実装することができました。 　次回はいよいよ、各ゲームの処理を実装していきましょう。