ゲームの大枠 game.js③ 〜「ぷよぷよプログラミング」でお勉強〜 その８
これで大枠はわかった！
ゲームの大枠 game.js の残りを見てみよう
前々回、前回の続きを見ていきましょう！
前回は、loop関数内のswitch文での条件分岐を見ていきました。
今回は、その残りです。
いろいろなcaseがありました。
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 'erasing': ぷよを消す
ぷよを消す処理です。
case 'erasing':
if(!Stage.erasing(frame)) {
// 消し終わったら、再度落ちるかどうか判定する
mode = 'checkFall';
}
break;Stage.erasing(frame)は
stage.jsの自由落下させるerasing()関数を呼び出しています。
ぷよを消す時のアニメーション処理が書かれています。
Stage.erasing(frame)からfalseが返ってきたら、
（ぷよを消すアニメーションが終了したらfalse）
mode を checkFall に変更します。
case 'newPuyo': 新しいぷよを生成できるか
case 'newPuyo':
if(!Player.createNewPuyo()) {
// 新しい操作用ぷよを作成出来なかったら、ゲームオーバー
mode = 'gameOver';
} else {
// プレイヤーが操作可能
mode = 'playing';
}
break;ここでは、落下用の新しいぷよを生成できるかの判断によってモード変更をしています。
Player.createNewPuyo()は
player.jsのcreateNewPuyo()関数を呼び出しています。
createNewPuyo()関数で、最初に、ぷよを落とす隙間があるか、
一番上の段・左から３列目にアキがあるか判断。
なければfalse を返して
mode をgameOverに変更します。
アキがある場合は、新しいぷよを作成、落下させます。
mode を playingに変更します。
case 'playing': ゲームプレーヤーの操作
case 'playing':
// プレイヤーが操作する
const action = Player.playing(frame);
mode = action; // 'playing' 'moving' 'rotating' 'fix' のどれかが帰ってくる
break;ゲームプレイヤーの動作によってmodeを変えていきます。
Player.playing(frame)は
player.jsのplaying()関数を呼び出しています。
playing()関数はぷよの動きの処理です。
自由落下しているぷよが接地していないか。
キー等が押されて移動する前に、移動できるかの確認してから動かすなど
いろいろ処理をしています。
modeにplaying()関数から返ってくる
'playing' 'moving' 'rotating' 'fix' のいづれかをセットします。
case 'moving': ゲームプレーヤーがぷよを動かす
case 'moving':
if(!Player.moving(frame)) {
// 移動が終わったので操作可能にする
mode = 'playing';
}
break;ぷよの左右の動きを処理するところです。
Player.moving(frame)は
player.jsのmoving()関数を呼び出しています。
ぷよが動かせなくなったら
modeをplayingにします。
case 'rotating': ゲームプレーヤーがぷよを回転させる
case 'rotating':
if(!Player.rotating(frame)) {
// 回転が終わったので操作可能にする
mode = 'playing';
}
break;ぷよの回転の動きを処理するところです。
Player.rotating(frame)は
player.jsのrotating()関数を呼び出しています。
ぷよの回転ができなくなったら
modeをplayingにします。
case 'fix': ぷよを固定させる
case 'fix':
// 現在の位置でぷよを固定する
Player.fix();
// 固定したら、まず自由落下を確認する
mode = 'checkFall'
break;ぷよの固定処理をするところです。
Player.fix(frame)は
player.jsのfix()関数を呼び出しています。
ぷよを固定するため座標の設定やら
どうも操作用のダミーぷよ画像などを消す操作がされているようです
（のちのちこの辺りは説明します）
固定終了したら、
modeにcheckFallを設定します。
case 'gameOver': ゲームオーバー
case 'gameOver':
// ばたんきゅーの準備をする
PuyoImage.prepareBatankyu(frame);
mode = 'batankyu';
break;ぷよが上まで積み上がってしまってゲームオーバーした時の処理です。
PuyoImage.prepareBatankyu(frame)は
puyoImage.jsのprepareBatankyu()関数を呼び出しています。
「ばたんきゅー」画像を表示する準備の処理をします。
mode をbatankyuに変更します。
case 'batankyu': ゲームオーバーの「ばたんきゅー」を表示
case 'batankyu':
PuyoImage.batankyu(frame);
Player.batankyu();
break;case 項目最後です！
PuyoImage.batankyu(frame)は
puyoImage.jsのbatankyu()関数を呼び出しています。
「ばたんきゅー」画像の座標を何やら計算して決めています。
その後、
Player.batankyu()は
player.jsのbatankyu()関数を呼び出しています。
キーボードの上キーが押されたら
リロードされて、ゲームリセットされます。
残りの処理
いよいよgame.js最後です。
frame++;
requestAnimationFrame(loop);
}frame++ でframeの値に１足しています。
requestAnimationFrame(loop)
requestAnimationFrameはアニメーションの描画処理に使われる手法です。
ブラウザの表示に邪魔しないように、渡した関数を実行してくれます。
今回の場合は、loop関数です。
requestAnimationFrameについては
こちらの記事が図解されていてわかりやすいです。
このぷよぷよのゲームは無限ループで処理をされています。
起動したらゲーム開始。
終了は強制終了。
（ゲームオーバーになっても上キー待ち状態になっています）
という作りになっています。
（もし、違う！という場合、ご指摘いただけると嬉しいです）
まとめ
ぷよぷよゲームの骨格を見ていきました。
ぼんやりとですが大枠がわかったでしょうか？
なかなか一度では理解するのは難しいので
何回もソースコードを眺めてみてください。
だんだん見慣れてきます。
参考 「ぷよぷよプログラミング」サイト
パンフレット（初級中級の写経と上級のヒントが書いています）
サンプルソースコード
＊ こちらの連載記事は、プログラミング初心者さん向けです。
プログラミングが詳しい方は、説明がおかしい所など見つけていただけましたらコメントなどでご指摘していただけるとうれしいです。
＊ 事前にSEGAさんの使用許諾を受けています。
©SEGA ©Asial Corporation