昔作ったゲームをJSっぽくリファクタリングした結果【tmlib.js】

はじめに

• 同期的な書き方を減らそうと頑張った痕跡をメモった記事です。
• 私はゲーム設計に関して右も左も分からない人間です。
• クソコードで恥ずかしいですが勇気を出して。

tmlibで昔さくっと作ったゲーム

• Wave Fever (jsdoit)
• github
• ネイティブで出ていた「Wave Weaver」をリバエンしたゲームです。

早速Before-Afterいきましょ

Before (Game Sceneのみ)

before

tm.define("GameScene", {
    superClass: "tm.app.Scene",
    pattern: null, // Patternインスタンス
    level: 0, // ゲームレベル(初回０。徐々に上がる)

    init: function() {
.....
        window.player = Player().addChildTo(this);

        this.timer = Timer().addChildTo(this);
        this.levelLabel = levelLabel().addChildTo(this);

        // 初回パターン生成
        this.createPattern(this);
    },

    update: function(app) {
        // 一連のパターンが判定終了したら、インターバルを置いた後、次のパターンへ。
        if (this.pattern && this.pattern.ended_flag) {
            this.pattern = null;
            setTimeout(this.createPattern, NEXT_PATTERN_INTERVAL, this);
        }

        // 一定時間毎にレベルアップ
        if (this.timer.label.text > this.level * 15 + 15) {
            this.level = this.level + 1;
            this.levelLabel.levelUp(this.level);
        }

        // ゲームオーバーチェック
        if (window.player.playerIcon.isDead){
            // 間違った色に接触した瞬間にタイマーをストップする
            this.timer.sleep();
        }
        if (window.player.playerIcon.isGameOver){
            app.replaceScene(GameOverScene(this.level, this.timer.label.text));
        }
    },

    createPattern: function(obj) {
        obj.pattern = Pattern(obj.level).addChildTo(obj);
    }
});

After (Game Sceneのみ)

after

tm.define("GameScene", {
    superClass: "tm.app.Scene",
    level: 0, // ゲームレベル(初回０。徐々に上がる)

    init: function() {
.....
        window.player = Player().addChildTo(this);
        player.playerIcon.on('collision', function() {
            player.playerIcon.off('collision');
            self.timer.off('levelUp');
            // 間違った色に接触した瞬間にタイマーをストップし、レベルアップカウントも停止
            self.timer.sleep();
            clearInterval(self.timer.intervalID);
        });
        player.playerIcon.on('dieAnimationEnd', function(e) {
            player.playerIcon.off('dieAnimationEnd');
            self.app.replaceScene(GameOverScene(self.level, self.timer.label.text));
        });

        this.timer = Timer().addChildTo(this).on('levelUp', function() {
            self.level = self.level + 1;
            self.levelLabel.levelUp(self.level);
        });

        this.levelLabel = levelLabel().addChildTo(this);

        this.pattern = Pattern().addChildTo(this).on('popEnd', function(e) {
            // 一連のパターンが終了したら、インターバルを置いた後、次のパターンへ。
            setTimeout(_.bind(self.createPattern, self), NEXT_PATTERN_INTERVAL);
        });

        // 初回パターン生成
        this.createPattern();
    },

    update: function(app) {
        /* nothing to do */
    },

    createPattern: function() {
        var patternNum  = tm.util.Random.randint(0, 2);
        var popPosition = tm.util.Random.randint(POP_POS_LEFT, POP_POS_RIGHT);

        switch(patternNum){
            case PATTERN_NORMAL:
                this.pattern.createNormal(this.level, popPosition);
                break;
            case PATTERN_NARROW:
                this.pattern.createNarrow(this.level, popPosition);
                break;
            case PATTERN_RUSH:
                this.pattern.createRush(this.level, popPosition);
                break;
        }
    }
});

何が変わったのか

• Playerクラスのgameoverに関する処理をイベント駆動っぽくした。（以前は update() を使ったかなり同期的な書き方になっていた。）
• Patternクラスのインスタンス生成を1度だけにして、こちらもイベント駆動っぽい書き方に直した。
• 参考： [tmlib.js]tmlibで学ぶ、イベント駆動型のクラス設計
• 追記： Timerもイベント駆動にして、遂に update() を空に出来ました。やった。

無知は罪である

• このゲームを作っていた際は、Beforeのような同期的な書き方しか知らなかった。フラグを大量に使う書き方しか知らなかった。
• それから数ヶ月、相対的に少しは見るに堪える書き方が出来つつあるのではないか。 timer部分もupdate()から外に出したい。 (済)。出来ればフラグ数を0にしたい。クラスのプロパティもより減らしたい。

おわりに

• Afterもクソな部分ばかりです、多分。ので、間違いや改善案があった際はご指摘頂けると幸いです。
• 設計は本当に難しい。まとまった情報が欲しい。