ゲームの大枠 game.js② 〜「ぷよぷよプログラミング」でお勉強〜　その７

ぷよぷよには、どんな動きがあるのでしょう？

ゲームの大枠　game.js の残りを見てみよう

前回の続きを見ていきましょう！

少しおさらいをすると前回は、

・起動したときの準備
・変数の設定
・初期化の関数

を見ていきました。

今回は、残りの関数を見ていきます。

↓提供されているサンプルコード

ぷよぷよプログラミングコード一式201024.indd

ゲームの動き　Loop()関数

「ぷよぷよ」のゲームの動きの骨格が書かれています。

さてここで質問です！
「ぷよぷよ」はどんなゲームですか？

ちょっと書き出してみましょう。

・ぷよ が上から落ちてくる
・落ちてくる ぷよ を動かすことができる
　（左右、回転）
・ぷよ　は2つセットになっている
・同じ色の ぷよ が４つ（又は設定数）そろうと消える
・全部消したら「全消し」表示画でる
・ぷよ が画面一番上まで積み上がるとゲームオーバー 

などなど

この動きのを設定していきます。
（細かい動きはまた別の部分で設定します。）

長いので、まず骨格からみていきます。

function loop() {
   switch(mode) {
       case 'start':
           〜〜〜
           break;
       case 'checkFall':
       　　〜〜〜
           break;
       
        〜〜〜＾    
   }
   frame++;
   requestAnimationFrame(loop); // 1/60秒後にもう一度呼び出す
}

・function loop() 　は　loop()という関数　を設定します。

・switch(mode)　はswitch文（スウィッチぶん）という
　条件分岐の命令です。
　カッコの中の”mode”　の値をみてそれぞれ処理する内容を設定していきます。

・case がmodeの値別の処理を書くところです。
　breakでswitch文から抜けます。

switch文の構文は↓の様になります。

switch(〇〇) {
    case △△:
        〜〜〜〜
        break;
}

「〇〇の値が△△だったら〜〜〜〜の処理をします。」という意味になります。
沢山の条件がある場合は、switch文が便利です。

さて、「mode」がなんだったか覚えていますか？
「ゲームの現在の状況」を入れる変数ですね。

初期化（initialize()）で”start”　が入っています。

switch(mode) {
    case 'start':
        mode = 'checkFall';
        break;

上の場合
modeの値が”start”だったら、
modeの値を”checkFall”にする。

という処理をしています。

modeの値が”checkFall”になったのだから、
次は case 'checkFall':　の処理に入るのかな？
と思った方もいらっしゃるかもしれません。

この場合、 case 'checkFall':　の処理には行かず、
switch文から抜けて、

frame++;
requestAnimationFrame(loop); 

の処理に移ります。

switch文は１つのcaseに入って、break　まできたら処理を抜ける
というルールになっています。

どんな条件があるか？

では、のこりのcaseを見ていきます。

「ぷよぷよプログラミング」のコードは
こまかくコメントがあってわかりやすいです。

case だけ抜き出してみます。
現在のゲームがどういう状態かmodeの値で判断しています。

case 'start':　　ゲームスタートしたばかりの状態
case 'checkFall':　ぷよが落ちるかどうかのチェックをおこなう
case 'fall':　ぷよを落とす
case 'checkErase':　ぷよが消せるか判断する
case 'erasing':　ぷよを消す
case 'newPuyo':　新しいぷよを生成できるか
case 'playing':　ゲームプレーヤーの操作
case 'moving':　ゲームプレーヤーがぷよを動かす
case 'rotating':　ゲームプレーヤーがぷよを回転させる
case 'fix':　ぷよを固定させる
case 'gameOver':　ゲームオーバー
case 'batankyu':　ゲームオーバーの「ばたんきゅー」を表示

では一つずつ。（長いですが）

case 'checkFall'　ぷよが落ちるかどうかのチェックをおこなう

 case 'checkFall':
    // 落ちるかどうか判定する
    if(Stage.checkFall()) {
        mode = 'fall'
    } else {
    // 落ちないならば、ぷよを消せるかどうか判定する
        mode = 'checkErase';
    }
    break;

ぷよ が上から落ちるかどうかの判断をします。

Stage.checkFall()　は
stage.jsの自由落下をチェックするcheckFall()関数を呼び出しています。

この関数から処理結果が返ってきます。
（return〇〇　の〇〇が返ってきます。）
true　か　false

if文（イフぶん）も条件分岐の構文です。

if(条件true false判断のもの）{
  true のときの処理
}
else{
　false のときの処理
}

Stage.checkFall()から
true が返ってきたらmodeをfall
falseが返ってきたらmodeをcheckErase

という処理をしています。

case 'fall'　ぷよを落とす

case 'fall':
    if(!Stage.fall()) {
    // すべて落ちきったら、ぷよを消せるかどうか判定する
        mode = 'checkErase';
    }
    break;

Stage.fall()　は
stage.jsの自由落下させるfall()関数を呼び出しています。

この関数で、ぷよの自由落下をさせます。

if(!Stage.fall())　の　！　は、not の意味があります。
if文の条件がtrue false 判断のものは、

if(条件true false判断のもの）{
  true のときの処理
}
else{
　false のときの処理
}

となっています。
Stage.fall()で返ってくる値はfalseしかないので
if文の条件文に！を入れて、falseをtrueにしています。
（ちょっとむつかしいですね）

全て落ちきったら、
modeをcheckEraseに変更します

case 'checkErase'　ぷよが消せるか判断する

case 'checkErase':
     // 消せるかどうか判定する
    const eraseInfo = Stage.checkErase(frame);
    
    if(eraseInfo) {
        mode = 'erasing';
        combinationCount++;
        // 得点を計算する
        Score.calculateScore(combinationCount, eraseInfo.piece, eraseInfo.color);
        Stage.hideZenkeshi();
    } else {
        if(Stage.puyoCount === 0 && combinationCount > 0) {
        // 全消しの処理をする
        Stage.showZenkeshi();
        Score.addScore(3600);
        }
        combinationCount = 0;
        // 消せなかったら、新しいぷよを登場させる
        mode = 'newPuyo'
    }
    break;

ぷよが消せるかの判断をします。

Stage.checkErase(frame)は
stage.jsの自由落下させるcheckErase()関数を呼び出しています。

この関数から、消えるぷよの個数と色の情報が返ってきます。
eraseInfoに入ります。

ぷよが消せる場合
・modeをerasingに変更します。
・combinationCount（何連鎖かを記録する変数）をカウントアップします。
・得点計算のためScore.calculateScore()を呼び出します。
・Stage.hideZenkeshi()を呼び出します。

Score.calculateScore()は
score.jsの得点計算のcalculateScore()関数です。

この関数は、必要な値を指定しないといけません。
これを引数（ひきすう）と言います。

combinationCount, eraseInfo.piece, eraseInfo.color
連鎖の数、ぷよの数、ぷよの色

Stage.hideZenkeshi()は
stage.jsの全消しを消去するhideZenkeshi()関数です。
全部消えた時に「全消し」という画像が出ます。
その画像を使ったアニメーションを消去する処理です。

ぷよが消せない場合

if(Stage.puyoCount === 0 && combinationCount > 0) 

・stage.jsのぷよの数をカウントしているpuyoCountが０
・combinationCount（連鎖の数）が１以上

この２つの条件を満たした時「全消し」の処理をします。

Stage.showZenkeshi()は
stage.jsの全消しのshowZenkeshi()関数です。
「全消し」アニメーションを表示します。

Score.addScore()は
score.jsのスコアを追加するaddScore()関数です。
全消しすると3600点ももらえるのですね！

連鎖個数を０にします。
combinationCount = 0;

新しいぷよをふらせるために
mode を　newPuyo　にします。

まとめ

思ったより長くなってしまいました。
一旦ここで切ります。

javascriptの構文の説明が入ってきて混乱していませんか？

・switch文
　case
・if文
    !  else
・他のclassの関数を呼び出す

いろいろと関数を呼び出すので、あっちこっち見ていかないといけません。
（慣れます）

あせらず、ひとつひとつ見ていきましょう。

私が持っている本はこちら↓　（改訂新版の前のものですが）

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

↓　入門用に丁寧な参考書。サンプルデータもダウンロードできます。

確かな力が身につくJavaScript「超」入門 第2版

参考　「ぷよぷよプログラミング」サイト

【公式】ぷよぷよeスポーツ×プログラミング

「ぷよぷよプログラミング」サポートページ – Monaca Education

パンフレット（初級中級の写経と上級のヒントが書いています）

001

＊　こちらの連載記事は、プログラミング初心者さん向けです。
プログラミングが詳しい方は、説明がおかしい所など見つけていただけましたらコメントなどでご指摘していただけるとうれしいです。

＊　事前にSEGAさんの使用許諾を受けています。
©SEGA ©Asial Corporation