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

オリカ

2020年8月5日 11:57

動くの？動くの？（ワクワク）

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

いよいよ、ゲームの動きに関するファイルを見ていきましょう。

ぷよぷよのブックレットには、以下のように書いてあります。

②次に「game.js」を書く
ここではゲームの大きな流れや、処理を行う順番などの外枠を書いていきます。（最初に画像ファイルを準備する、新しいぷよを落とし始める、その次はぷよが落ちる、ぷよが消えるなど）

このファイルはゲームの骨格を書きます。
細かい動きは、別のファイルに書いていきます。

プログラミングは、一つのファイルに書ける分量制限
というのはありません。
ですので書こうと思えば、
一つのファイルにすべての処理を書くことができます。

でも、想像してみてください。
この「ぷよぷよプログラミング」のいくつかのjavascriptファイルが
１つにまとまっている事を。

長〜〜〜〜いソースコードを追っていくことを……。

考えるだけで、ウェぇぇえ〜〜　となります。

小分けにしたほうが、
・見やすい
・管理しやすい
です。

このファイルをどのような切り口で分けていくか。
ここが大事ですね。
（いまだに苦手です…）

話がそれました。
もとに戻します。

プログラミングのルール

ファイルの中身を見る前に
プログラミングのお約束事項を伝えておきます。

その１　入力は半角英数字で

プログラミングコード入力は、半角英数字入力が原則です。
コメントなど日本語を入力する場合はありますが、
命令文などは半角英数字を使います。
（日本語だとエラーになります）

その２　プログラミングは上から下へ順番に処理をしていく

どの言語でも同じです。
（違う言語があるかもあしれません。あったら教えて下さいっ！）　

「関数」（function)と呼ばれる部分は、
呼ばれたらその関数の中を上から下へと処理をします。

JavaScriptの記述ルール

いろいろ記述ルールはあるのですが、
とりあえず「game.js」を読むのにあたって
必要なものを説明します。（順不同です）

・文の終わりは　；（セミコロン）をつける

・コメントは　//　（スラッシュ）のあと
　複数行にまたがるときは　/* */ で、くくる

・function 　関数
　他から呼ばれたら処理をおこなう。
　何回も行う処理を一つにまとめたもの。

・() 小カッコと{} 中カッコ
　プログラミングにはよくカッコで囲まれているところが
　でてきます。どんなところで、(){} が使われているのか
　見て覚えてください。

起動したときの処理をセット

お待たせしました！
ソースコードをみてみましょう。

Monaca上のソースコード、
もしくはサンプルコードを一緒に見てくださいね。

// 起動されたときに呼ばれる関数を登録する
window.addEventListener("load", () => {
   // まずステージを整える
   initialize();

   // ゲームを開始する
   loop();
});

起動したときに、どんな動きや処理をするかセットします。

addEventListener　（アドイベントリスナー）
イベントの「種類」の「関数」を指定します。

.addEventListener(種類,関数)

「load」（ロード（起動））された時に
「initialize()」関数と「loop()」関数を呼び出す。

という意味です。

イベントの種類はいろいろとあります。
・クリックされた時
・マウスダウンされた時
・ボタンが押された時
・画面がスクロールした時　　などなど

関数部分は
function initialize()　　の中身を処理して
function loop() 　の中身を処理をしましょう。

変数のセット

プログラミングをしていく上で「変数」（へんすう）は必ず出てきます。

もちろん、変な数　という意味ではなく、
中身が変わる数（文字や他の場合もあります）という意味です。

「数」というより「入れ物、箱」のイメージのほうがわかりやすいでしょうか。

let mode; // ゲームの現在の状況
let frame; // ゲームの現在フレーム（1/60秒ごとに1追加される）
let combinationCount = 0; // 何連鎖かどうか

let は変数を宣言しますよ、という意味。

「mode」という箱には、ゲームの現在の状況の情報を入れる
「frame」という箱には、ゲームの現在のフレーム情報を入れる
「combinationCount」という箱には、連鎖数を数字で入れる

といった意味になります。

関数「initialize()」　初期化処理

起動した時に、最初に呼ばれる関数です。
イニシャライズ　＝　初期化　です。
すべての値をスタートの状態にセットします。

function initialize() {
   // 画像を準備する
   PuyoImage.initialize();
   // ステージを準備する
   Stage.initialize();
   // ユーザー操作の準備をする
   Player.initialize();
   // シーンを初期状態にセットする
   Score.initialize();
   // スコア表示の準備をする
   mode = 'start';
   // フレームを初期化する
   frame = 0;
}

コメントが細かく入っているので、わかりやすいですね。

初期化処理の関数をみると、それぞれの初期化処理を呼び出しているのがわかります。

例えば、「画像の準備をする」
PuyoImage.initialize();

「PuyoImageクラスの　initialize()関数を呼び出す」
という意味です。

PuyoImageクラスはどこにあるかというと、
puyoImage.jsを見てください。

class PuyoImage {

ファイルの最初に書かれています。
このクラスです。

このPuyoImageクラスを見ていくと
static initialize()
が書かれています。

この initialize() を呼び出しています。

いくつか初期化処理をして、

mode = 'start';
frame = 0;

変数宣言した
mode に'start' を入れています。
frame に 0 を入れています。

これらは次のLoop()関数で使用します。

まとめ

game.jsの中身はまだ残っていますが、
長くなったので一旦切ります。

game.jsではゲームの大枠が書かれていました。

いろいろな情報が出てきて、目がチカチカしませんでしたか？
混乱していませんか？

クラスって何？何ナノ〜？
という方、こちらの記事がわかりやすいかなと。

「Qiita」（キータ）は、エンジニアリングに関する知識を記録・共有するためのサービスです。
プログラミングでつまづいた時によくお世話になっています。

Javascriptをもっと知りたい方は、本を一冊読んでもいいと思います。
１度読んだだけで使いこなせなくても、一通りの構造などが
頭に入っていると、自分でいろいろと調べる時に便利です。

↑私はかなり昔にこの本を読みました。（改訂新版ではないもの）
技術書がこの様に長く残っているのは、
中身が素晴らしいからだと思います。

（なんと、奥付見たら2010年でした！！）

※　Javascript使っている方で、
　　初心者用のお薦め技術書がありましたら、是非、教えて下さい！

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

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

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

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