1.概要

ビンゴゲームWebアプリケーションを作成する。
ただし、作成するのは抽選機能のみ。Webブラウザー上で、グラフィカルに抽選する機能を提供する。
（ビンゴカードをオンラインから取得してもおもしろいかも、全員がスマートフォン時代ならいけるかも）

2.用件

2.1 機能用件

数字は1～75
抽選中のアイコンは大きく表示する
全ての数字のアイコンを画面上に表示しておく
抽選済みの数字は強調表示される
抽選中の演出を用意する。
抽選の乱数は、基底値を固定すると同じ値が選択される
レイアウトは独立して変更可能とする

2.2 非機能用件

言語は、JavaScript+CSS3(for HTML5)

3.設計

3.1概念抽出

• 　数字アイコン
• 　点灯する、消灯する
• 　カレントのアイコン
• 　レイアウト
• 　抽選する
• 　クリアする（初期化する）

3.2 シナリオ

　3.2.1 クリア

　　数字アイコン1～75を消灯状態で表示する
　　カレントアイコンを消灯状態で表示する
　　乱数、抽選情報を初期化する

　3.2.2 抽選する

　　

抽選用演出を開始する

演出は、ランダムに未抽選の数字の選択（選択されると数字アイコンを点灯し、次の数字が選ばれたら消灯する）を繰り返す。

　　

演出を終了する

最終的な抽選を実施して、選択された数字アイコンを点灯させる。
最終的に選ばれた数字アイコンは数回点滅下のちに点灯する。
さらにカレントのアイコンに数字を表示する。

考えがまとまったので後はとっとと実装しまして、
出来上がり。
ソース:bingo.js,bingo_ctl.js
補足も確認して下さい。

TETRIS.Stageクラス

ステージは22本(*1)のラインがあり、ラインは10個の粒（ブロック）で構成されています。
簡単に言えば縦22x横10個の粒で構成されていることになります。
*1 ゲームとして有効なのは20ラインですが、テトリミノが落下する位置として2ライン分追加しています。

ステージの役割は粒の管理で、ラインの削除判定や削除中のラインの状態を管理します。

初期化

ラインを作成します。

DQ.TETRIS.Stage = function (engine) {
    this._engine = engine;
    this.lines = [];
    for (var i = 0; i < 22; i++) {
        this.lines.push(new DQ.TETRIS.Line(i));
    }
}

ゲーム開始時にライン上のチップを削除することで初期化します。

DQ.TETRIS.Stage.prototype = {
    left: DQ.TETRIS.STAGE_LEFT,
    top: -14,
    lines: [],
    clear: function () {
        for (var ln = 0; ln < this.lines.length; ln++) {
            for (var i = 0; i < 10; i++) {
                if (this.lines[ln].chips[i]) {
                    this.lines[ln].chips[i].remove();
                    this.lines[ln].chips[i] = null;
                }
            }
        }
    }
}

当たり判定

Stageクラスが落下中のテトリミノがステージの壁やステージ上の粒にぶつかるかどうかの当たり判定を担当します。

    hitTest: function (mino, dx, dy) {
        ///<summary>
        ///指定のテトリミノの当たり判定をします。
        ///</summary>
        ///<param name="mino" type="Tetrimino">
        ///対象となるテトリミノを指定
        ///</param>
        ///<param name="dx", type="number">
        ///x方向の移動予定幅を指定
        ///</param>
        ///<param name="dy", type="number">
        ///y方向の移動予定幅を指定
        ///</param>

        for (var i = 0; i < 4; i++) {
            var chip = mino.chip(i);
            var cx = Math.floor((chip.x + dx - this.left) / DQ.TETRIS.CHIP_SIZE);
            var cy = Math.floor((chip.y + dy - this.top) / DQ.TETRIS.CHIP_SIZE);
            //wall
            if (cx < 0
                || 10 <= cx
                || 22 <= cy) {
                return true;
            }
            //chip
            if (this.lines[cy].chips[cx]) {
                return true;
            }
        }

        return false;
    }
}

落下中のテトリミノを構成する４つの粒に対して壁とステージ上の粒との当たり判定を実施します。
ステージ上の粒の有無は、対象となる座標に粒のインスタンスがあるかどうかで判定しています。
横移動の場合、hitTest()でfalseが返ると移動できません。
落下処理の場合は、「遊び」状態へ遷移します。「遊び」状態が放置されると落下中のテトリミノはただの粒へと変化します。

粒への移行

落下が完了したテトリミノをラインへ粒として登録します。

{
    transChip: function (mino) {
        ///<summary>
        ///落下中だったテトリミノをチップへ変換します。
        ///</summary>
        ///<param name="mino" type="Tetrimino">
        ///変換するテトリミノを指定
        ///</param>

        for (var i = 0; i < 4; i++) {
            var chip = mino.chip(i);
            var cx = Math.floor((chip.x - this.left) / DQ.TETRIS.CHIP_SIZE);
            var ln = Math.floor((chip.y - this.top) / DQ.TETRIS.CHIP_SIZE);
            this.lines[ln].chips[cx] = new DQ.Screen.Canvas.Sprite({
                image: chipImg.client[0],
                x: cx * DQ.TETRIS.CHIP_SIZE + this.left,
                y: ln * DQ.TETRIS.CHIP_SIZE + this.top,
                width: DQ.TETRIS.CHIP_SIZE,
                height: DQ.TETRIS.CHIP_SIZE,
                dir: mino.type,
                animation: false,
                numberOfPause: 0
            });
            this._engine._canvas.push(this.lines[ln].chips[cx]);
        }
    }
}

テトリミノを構成する４つの粒を該当する座標の粒として登録します。
粒のインスタンスは描画用のSpriteです。スプライトを作成する際には、座標系を粒から画面のpixel単位へ変換しています。
作成したSpriteは、キャンバスへ登録します（これによって、粒の描画はキャンバス(*2)が適宜実行してくれます)。
*2 念のためですが、このキャンバスは拙作のライブラリのキャンバスクラスの事です。

削除判定

ライン上に新しい粒が登録された後は、ラインの削除判定を実施します。

{
    eraseLine: function () {
        this._lineFlash = [];
        for (var i = 21; 2 <= i; i--) {
            if (this.lines[i].canErase()) {
                //削除可能なラインがあったのでフラッシュ状態へ移行
                this.mode = DQ.TETRIS.StageMode.Flash;
                this._elapse = 0;
                var line = new DQ.Screen.Canvas.Sprite({
                    y: i * DQ.TETRIS.CHIP_SIZE + this.top,
                    x: this.left,
                    width: DQ.TETRIS.CHIP_SIZE * 10,
                    height: DQ.TETRIS.CHIP_SIZE,
                    animation: false,
                    numberOfPause: 0,
                    image: flashImg.client[0]
                });
                this._lineFlash.push(line);
                engine._canvas.push(line);
            }
        }
        return this._lineFlash.length;
    },

全てのラインについて削除判定を行います。判定自体はラインクラスに任せていますが、ようはライン内の全ての領域に粒があれば削除可能です。
削除可能なら画面効果用のスプライトを登録しています。
この時点で、ゲーム全体の状態はゲーム中(Play)状態から削除中(Erase)状態へ遷移します。
また、画面効果として削除可能なラインがフラッシュして、しばらくしてからラインが消え、またしばらくしてから全体が落下するようになっています。
ちなみに、メソッドの名前が微妙だったりしますが、そこは目をつぶります。

状態管理

Stageクラスではラインが削除中の場合だけ状態を管理します。状態はUpdate()の呼び出しによる一定の時間経過後に遷移します。

{
    update: function () {
        if (this.mode == DQ.TETRIS.StageMode.None) {
            return;
        }
        this._elapse += 60 / TETRIS.fps;
        if (this.wait <= this._elapse) {
            //時間経過を超えた
            switch (this.mode) {
                case DQ.TETRIS.StageMode.Flash:
                    //フラッシュ中から削除中へ移行
                    this.mode = DQ.TETRIS.StageMode.Erase;
                    this._elapse = 0;
                    for (var i = 21; 2 <= i; i--) {
                        if (this.lines[i].canErase()) {
                            this.lines[i].clear();
                        }
                    }
                    for (var i = 0; i < this._lineFlash.length; i++) {
                        this._lineFlash[i].remove();
                    }
                    this._lineFlash = [];
                    break;
                case DQ.TETRIS.StageMode.Erase:
                    //削除中から通常へ移行
                    this.mode = DQ.TETRIS.StageMode.None;
                    this._elapse = 0;
                    var count = 0;
                    for (var i = 21; 2 <= i; i--) {
                        if (this.lines[i].canDown()) {
                            this.lines.splice(i, 1);
                            count++;
                        }
                    }
                    //削除した分だけラインを追加
                    for (i = 0; i < count; i++) {
                        this.lines.unshift(new DQ.TETRIS.Line(0));
                    }
                    //ライン番号を振り直す
                    for (i = 0; i < 22; i++) {
                        this.lines[i].line(i);
                    }
                    break;
            }
        }
    }
}

ステージの状態はNone→Flash→Erase→Noneへと遷移します。
状態遷移後に経過時間を示す_elapseがクリアされ、一定時間経過後にイベント処理が実施されます。
まず、Flash状態にある場合は削除可能なラインをクリアします。それからフラッシュ効果用のスプライトを削除(remove)します。
（スプライトをremove()するとキャンバスクラスからも削除され、描画の対象から外れます。）
次に削除状態にある場合は、ラインを落下させます。
落下処理については、削除可能なラインを配列から削除して、削除した分のラインを配列の先頭に追加することで落下したように見せています。
余談ですが、ぷよぷよなど粒自体が落ちていく場合にはこの手法は使えないですね。

全体の状態遷移

その２では、割愛していた全体の状態遷移の管理です。
updateメソッド中で、状態毎のチェックを実施しています。

    update: function () {
        var mode = DQ.TETRIS.Mode;
        switch (this.game) {
            case mode.Start:
            case mode.GameOver:
                return;
            case mode.Erase:
                //ラインの削除演出中
                this.stage.update();
                if (this.stage.mode == DQ.TETRIS.StageMode.None) {
                    //演出完了
                    this.game = DQ.TETRIS.Mode.Play;
                    //落下したラインに合わせてゴーストを移動
                    this.moveGhost();
                }
                break;
            case mode.Delay:
                //「遊び」中
                this._elapse += 60 / this.fps;
                if (this.wait <= this._elapse) {
                    this.game = DQ.TETRIS.Mode.Play;
                    this.stage.transChip(this.current);
                    this.current.remove();
                    this.shiftCurrent();
                    soundBox.play(1);

                    var n_line = this.stage.eraseLine();
                    if (n_line > 0) {
                        this.score.score += DQ.TETRIS.Game.ScoreTable[n_line];
                        this.score.line += n_line;
                        var pre = this.score.level;
                        this.score.level = Math.floor(this.score.line / 10) + 1;
                        if (pre != this.score.level) {
                            this.levelUp();
                        }
                        this.updateScore();

                        this.game = DQ.TETRIS.Mode.Erase;
                        return;
                    }
                }
                break;
            case mode.Play:
                //「落下中」
                if (this.isAccelerate()) {
                    if (this.current.y - this._startPos > DQ.TETRIS.CHIP_SIZE) {
                        this.score.score++;
                        this.updateScore();
                        this._startPos += DQ.TETRIS.CHIP_SIZE;
                    }
                }
                var dy = this.gdy;
                if (this.hitTest(0, dy + DQ.TETRIS.CHIP_SIZE)) {
                    //「遊び」に移行
                    this.game = DQ.TETRIS.Mode.Delay;
                    this._elapse = 0;
                    this.stopAccelerate();
                    this.current.move(0, dy);
                    this.current.fit();
                } else {
                    this.current.move(0, dy);

                }
                break;
        }

    }
}

ゲーム全体の状態はゲーム開始直後(StartGame)、ゲームオーバー(GameOver)、ゲーム中(Play)、遊び中(Delay)および削除中(Erase)です。
ゲーム開始直後およびゲームオーバー状態はキー操作があるまでやることも状態遷移もありません。
次に基本となるゲーム状態ですが、ここについては前回説明しているので割愛します。
遊び状態は一定時間が経過するとステージへ定着(transChip)します。それからラインの削除判定を実施し、削除可能なラインがなければゲーム中状態へ遷移し、削除可能なラインがあれば削除中へ遷移します。
また、削除可能なラインがあった場合はスコアーの計算やレベルアップの判定も実施していますが、説明は割愛します。
削除中状態ではステージに状態管理を委譲しています。これは、削除中の演出の管理をStageクラスへ局所化する意図があります。

次回は、ゴーストやハードドロップについてです。

1. プロジェクトを導入
2. マップの新規追加対応
3. マップのプロパティー編集に対応
4. コマンドを追加（マップの移動、リサイズ)
5. スプライトのアップロード対応

ナイトリービルドを更新。
マップエディター
後の問題はオフラインでも使えなければ公開している意味が無いことかorz

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

マップエディター

マップエディターを汎用化するために、しばらく改変を続けたいと思います。

ナイトリービルドを更新。
マップエディター

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

描画

イメージの読み込み

canvasのdrawImageに引き渡すimgオブジェクトですが、描画する前に読み込みが完了している必要があります。
そのため、ゲームエンジンを起動する前に全ての画像の読み込みの完了(loadイベントを使用）をチェックします。

var count = 0;
function image_loaded(sender) {
   count++;
   if(count == 4) {
       TETRIS = new DQ.TETRIS(engine);
       TETRIS.initialize();

       //engineはタイマーやキーイベントを管理
       engine.start();
   }
}

stageImg = new DQ.Image(DQ.page(), {
   width: 320,
   height: 320,
   src: "default/images/stage.png",
   onLoaded: image_loaded
});

...

canvasへの描画

前回も少し触れていますがcanvasへの描画はキャンバスクラスが担当していますので、その仕組みを説明しておきます。
キャンバス内では、指定されたFPSになるようにインターバルタイマーが発生してupdateメソッドを呼び出されます。
updateメソッド内では、背景から順番にイメージを都度描画しています。

update: function () {
    if (this.drawing) {
        return;
    }
    this.drawing = true;
    var ctx = this.obj0.getContext("2d"),
        sort_compare = function (o1, o2) {
             return o1.zIndex - o2.zInde;
    }

    //準備
    this._sprites.sort(sort_compare);

    //描画
    !this._bg && ctx.clearRect(0, 0, this._size.width, this._size.height);

    //背景描画
    this._bg && this._bg.draw(ctx, this._size);

    //スプライト描画
    for (var i = 0; i < this._sprites.length; i++) {
        this._sprites[i].draw(ctx, this._size);
    }

    //前景描画
    this._fg && this._fg.draw(ctx, this._size);

    //情報レイヤー描画
    this._ig && this._ig.draw(ctx, this._size);

    this.drawing = false;
},

TETRISクラス

TETRISクラスは、分析・設計では[<<場>>ゲーム]として抽出されたクラスです。
ゲームの進行を管理して、ステージやテトリミノなどのインスタンスを保持します。

初期化

インスタンスの作成時に背景やステージなどの設定を行います。

DQ.TETRIS = function (engine) {
    this._engine = engine;
    this.next = [];
    this._next7 = [];
    //ステージを作成
    this.stage = new DQ.TETRIS.Stage(engine);
}
DQ.TETRIS.prototype = {
  initialize: function () {
    //ステージをスプライトとして追加
    var stage = new DQ.Screen.Canvas.Sprite({
        y: 0,
        x: 0,
        width: 320,
        height: 320,
        animation: false,
        numberOfPause: 0,
        image: stageImg.client[0]
    });
    //背景を設定
    var bg = new DQ.Screen.Canvas.BG({
        width: bgImg.width(),
        height: bgImg._height,
        image: bgImg.client[0]
    });
    this._engine._canvas.push(stage);
    this._engine._canvas.bg(bg);
    ...
  }
}

テトリミノの作成

次のテトリミノの作成はwikiによれば、おおよそ以下の通りです。

あらかじめ重複しないように７つのテトリミノを決定します。そして、その７つのテトリミノを使い切ると次の７つのテトリミノを決定します。

{
    _next7: [],
    _genNextTetrimino7: function () {
        var used = [false, false, false, false, false, false, false];
        this._next7 = [];
        for (var i = 0; i < 7; i++) {
            while (true) {
    var candidate = Math.floor(Math.random() * 7);
    if (i < 2 && (candidate == DQ.TETRIS.TetriminoFactory.DIR.S || 
                  candidate == DQ.TETRIS.TetriminoFactory.DIR.Z)) {
        continue;
    }
    if (used[candidate]) {
        continue;
    }
    used[candidate] = true;
    this._next7.push(candidate);
    break;
            }
        }
    },
    genNextTetrimino: function () {
        //上限 MAX_NEXT分(3つ)だけ、次のテトリミノを作成する
        for (var i = this.next.length; i < DQ.TETRIS.MAX_NEXT; i++) {
            //7つのテトリミノがなければ作成
            this._next7.length == 0 && this._genNextTetrimino7();

            //テトリミノのインスタンスを作成
            var mino = DQ.TETRIS.TetriminoFactory.create(this._next7.shift());
            mino.setCanvas(this._engine._canvas);

            this.next.push(mino);
        }

        //待機位置へ移動
        for (var i = 0; i < DQ.TETRIS.MAX_NEXT; i++) {
            this.next[i].to(DQ.TETRIS.NextPos[i].x, DQ.TETRIS.NextPos[i].y);
        }
    }
}

落下テトリミノの作成

ゲームを開始すると、待機しているテトリミノが落下するテトリミノへと移行します。

{
    shiftCurrent: function () {
        //待機中のテトリミノの先頭を落下中のテトリミノに移行
        this.current = this.next.shift();

        //ステージの最上部へ移動
        this.current.to(DQ.TETRIS.STAGE_LEFT + DQ.TETRIS.CHIP_SIZE * 3, this.stage.top);
        if (this.hitTest(0, 0)) {
            //開始位置で衝突するなら終了
            this.gameOver();
            return;
        }

        //減った分だけ次のテトリミノを作成します。
        this.genNextTetrimino();

        //ゴーストを作成
        this.ghost && this.ghost.remove();
        this.ghost = DQ.TETRIS.TetriminoFactory.createGhost(this.current);
        this.ghost.setCanvas(this._engine._canvas);
        //落下中のテトリミノと位置合わせ
        this.ghost.to(DQ.TETRIS.STAGE_LEFT + DQ.TETRIS.CHIP_SIZE * 3, this.stage.top);

        this.moveGhost();
    }
}

落下処理

無操作の状態で、テトリミノはレベルに応じて落下していきます。
落下する量の計算は次の様になります。

{
    calcGDY: function () {
        this.gdy = this.g * DQ.TETRIS.CHIP_SIZE / this.fps;
        //1chip分/framを最大値とする(hitTest()が対応していないので）
        this.gdy = this.gdy > DQ.TETRIS.CHIP_SIZE ? DQ.TETRIS.CHIP_SIZE - .1 : this.gdy;
    }
}

TETRISクラスのupdate()もFPSに従って定期的に呼び出されます。

{
    update: function() {
        var dy = this.gdy;
        //当たり判定
        if (this.hitTest(0, dy + DQ.TETRIS.CHIP_SIZE)) {
            //「遊び」に移行
            this.game = DQ.TETRIS.Mode.Delay;
            this._elapse = 0;
            this.stopAccelerate();
            //下に移動
            this.current.move(0, dy);
            //描画上のずれを補正
            this.current.fit();
        } else {
            this.current.move(0, dy);
        }
}

次はStageクラス他

DQ.RPG.DamageType = { Unknown: 0, Pysical: 1, Magic: 2, Fire: 3, Water: 4, Erth: 5, Wind: 6, Sander: 7, Light: 8, Dark: 9, Swamp: 10, Baria:11 }
Player.prototype.gainDamage = function(damage, type) {
   for(var i = 0 ; i < this._equipmentIDs.length ; i++ ) {
       var equip = world.items[this._equipmentIDs[i].uid];
       damage = equip.gainDamage(damage, type);
   }
   return damage;
}

storategys['roro'] = roro_storategy;

roro_storategy.prototype.gainDamage = function(damage, type) {
   var dm = DQ.RPG.DamageType;
   swich(type) {
       dm.Magic:
       dm.Fire:
           dm /= 2;
           break;
       dm.Swamp:
       dm.Baria:
           dm = 0;
           break;
   }
   return dm;
}

沼なら

・・・それから３日後

装備することで一時状態を追加すれば、良いのではないでしょうか。
呪われた装備なら、カースを追加。カース状態中は装備を外せないが、カースを解除されると装備も外せると。

「浮いている」なら、スパイクや沼やバリア無効。

ロトを装備している「状態」なら魔法や火を半減、ダメージを受けるチップ（沼、バリア）無効。

装備に equipメソッドとremoveメソッドを追加します。

DQ.RPG.Item.prototype = {
  equip: functon(type, to) {
    to.temporary.push(
        new DQ.RPG.State(world.statuses.find("uid", 10009)));
  },
  remove: function() {
  }
}

特殊な装備は装備したときに状態を追加します。

DQ1では、呪われていると王様の台詞が変化します。呪われたらフラグを立てる方法が単純ですが、
プレイヤーが呪われた状態かを調べる方法もありです。

Player.hasStatus = function(uid) {
}

チップによるイベントでは、状態によるisAvoid()判定とgainDamage()判定を実施します。
スパイクでのダメージの場合、luckにより回避が発生する仕組みも実装できます。

Player.prototype.isAvoid(type) {
}
Player.prototype.gainDamage(dmg, type) {
}

Status.prototype.isAvoid(type) {
}
Status.prototype.gainDamage(dmg, type0 {
}

標準で提供されていない状態や装備は後から追加可能にします。
今でも、種類毎にストラテジーを選択する仕組みが実装されていますが、いっそのことUID別の
テーブルがあれば、そこからストラテジーを選択出来るようにして拡張毎のストラテジーを後から
追加出来るようにすればよいのではないでしょうか。

DQ.RPG.State.Roro = function() {
}
DQ.RPG.State.table.push({uid: 10009, strategy: DQ.RPG.State.Roro});

ナイトリービルドを更新。
RPG 習作(debug)
戦闘テスト
メッセージエディター

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

状態管理

常にタイマーからの更新要求が飛んでくるので、ゲームの状態を用意して描画を少し管理することにします。

ゲーム状態

Start:
“Push A Button” を表示して、ゲームの開始を待っている状態

Play:
ゲーム進行中、落下中のテトリミノを落としたり、キー操作を画面に反映します。

Pause:
ゲーム進行中ですが、落下などの進行を中断します。

Erase:
ラインの削除演出を表示中です。
テトリミノの落下が抑止されます。

GameOver:
“Game Over” が表示されます。

ライン削除

演出の状態を管理します。
ライン削除演出の状態を管理します。

None:
落下中ではない

Flash:
落下対象のラインを光らせます。

Erase:
落下対象のラインが消えます。

Down:
落下対象のラインを落とします。

実装モデル

設計を元に、クラスを作成します。

実装用に作成したクラスは以下の通りです。

1. TETRIS:ゲーム全体を管理
2. Stage: ステージ上のイベントを処理
3. Line: 各ラインの状態を管理
4. Tetrimino: 落下中やNextなどのテトリミノを管理
5. TetriminoFactory: Tetriminoの作成を管理

[TETRIS]+-ステージ[Stage]
[TETRIS]-進行管理[Engine]
[TETRIS]+-current[Tetrimino]
[TETRIS]+-next[Tetrimino]

[Stage]+-[Line]
[Line]+chip[Sprite]

画像

下準備として、ステージやチップ（粒）の画像を用意します。
背景

粒

ステージ

フラッシュ

テトリミノの作成

テトリミノは全て4つの粒で構成されています。
それぞれのテトリミノの粒の位置を配列で準備します。
単純なI型は、次の様になります。９０度づつ回転するので種別ごとに４つのデータを持ちます。

        [ //I
            [[0, 1], [1, 1], [2, 1], [3, 1]],
            [[1, 0], [1, 1], [1, 2], [1, 3]],
            [[0, 2], [1, 2], [2, 2], [3, 2]],
            [[2, 0], [2, 1], [2, 2], [2, 3]]
        ],

この情報を元にスプライトを作成します。

    create: function (type) {
        var chips = types[type][0]; //指定された型の先頭の粒リストを取得
        var sprites = [];
        for (var i = 0; i < chips.length; i++) {
            sprites.push(
                new DQ.Screen.Canvas.Sprite({
                    image: chipImg.client[0],
                    x: chips[i][0] * DQ.TETRIS.CHIP_SIZE,
                    y: chips[i][1] * DQ.TETRIS.CHIP_SIZE,
                    width: DQ.TETRIS.CHIP_SIZE,
                    height: DQ.TETRIS.CHIP_SIZE,
                    dir: type
                })
            );
        }
        //４つのスプライトを元にグループを作成
        var group = new DQ.Screen.Canvas.SpriteGroup(sprites);
        return new DQ.Tetrimino(type, group);
    }

Spriteは座標とイメージを保持していてCanvasクラスから渡されたコンテキストを元に以下の様な感じで描画しています。

  Sprite.prototype = {
        draw: function (ctx) {
            var x = this.x;
            var y = this.y;
            var w = this.width, h = this.height;
            ctx.drawImage(this.image, 0, this.dir * h, w, h, Math.floor(x), Math.floor(y), w, h);
        }
    }

テトリミノの作成は専用のクラスを用意しておいて、テトリミノ自身からは分離しておきます。createGhost()やrotate()は必要に応じて後で説明します。

DQ.TETRIS.TetriminoFactory = {
    DIR: { I: 0, O: 1, S: 2, Z: 3, J: 4, L: 5, T: 6, G: 7 },
    types: [
        [ //I
            [[0, 1], [1, 1], [2, 1], [3, 1]],
            [[1, 0], [1, 1], [1, 2], [1, 3]],
            [[0, 2], [1, 2], [2, 2], [3, 2]],
            [[2, 0], [2, 1], [2, 2], [2, 3]]
        ],
        [ //O
            [[1, 0], [1, 1], [2, 0], [2, 1]],
            [[1, 0], [1, 1], [2, 0], [2, 1]],
            [[1, 0], [1, 1], [2, 0], [2, 1]],
            [[1, 0], [1, 1], [2, 0], [2, 1]]
        ],
        [ //S
            [[0, 1], [1, 1], [1, 0], [2, 0]],
            [[1, 0], [1, 1], [2, 1], [2, 2]],
            [[2, 1], [1, 1], [1, 2], [0, 2]],
            [[0, 0], [0, 1], [1, 1], [1, 2]],
        ],
        [ //Z
            [[0, 0], [1, 0], [1, 1], [2, 1]],
            [[2, 0], [2, 1], [1, 1], [1, 2]],
            [[0, 1], [1, 1], [1, 2], [2, 2]],
            [[1, 0], [1, 1], [0, 1], [0, 2]]
        ],
        [ //J
            [[0, 0], [0, 1], [1, 1], [2, 1]],
            [[1, 0], [1, 1], [1, 2], [2, 0]],
            [[0, 1], [1, 1], [2, 1], [2, 2]],
            [[1, 0], [1, 1], [1, 2], [0, 2]]
        ],
        [ //L
            [[0, 1], [1, 1], [2, 1], [2, 0]],
            [[1, 0], [1, 1], [1, 2], [2, 2]],
            [[0, 1], [1, 1], [2, 1], [0, 2]],
            [[1, 0], [1, 1], [1, 2], [0, 0]],
        ],
        [ //T
            [[0, 1], [1, 1], [2, 1], [1, 0]],
            [[1, 0], [1, 1], [1, 2], [2, 1]],
            [[0, 1], [1, 1], [2, 1], [1, 2]],
            [[1, 0], [1, 1], [1, 2], [0, 1]]
        ]],
    create: function (type) {
        var chips = DQ.TETRIS.TetriminoFactory.types[type][0];
        var sprites = [];
        for (var i = 0; i < chips.length; i++) {
            sprites.push(
                new DQ.Screen.Canvas.Sprite({
                    image: chipImg.client[0],
                    x: chips[i][0] * DQ.TETRIS.CHIP_SIZE,
                    y: chips[i][1] * DQ.TETRIS.CHIP_SIZE,
                    width: DQ.TETRIS.CHIP_SIZE,
                    height: DQ.TETRIS.CHIP_SIZE,
                    dir: type,
                    animation: false,
                    numberOfPause: 0
                })
            );
        }
        var group = new DQ.Screen.Canvas.SpriteGroup(sprites);
        return new DQ.Tetrimino(type, group);
    },
    createGhost: function (mino) {
        var chips = DQ.TETRIS.TetriminoFactory.types[mino.type][0];
        var sprites = [];
        for (var i = 0; i < chips.length; i++) {
            sprites.push(
                new DQ.Screen.Canvas.Sprite({
                    image: chipImg.client[0],
                    x: chips[i][0] * DQ.TETRIS.CHIP_SIZE,
                    y: chips[i][1] * DQ.TETRIS.CHIP_SIZE,
                    width: DQ.TETRIS.CHIP_SIZE,
                    height: DQ.TETRIS.CHIP_SIZE,
                    dir: DQ.TETRIS.TetriminoFactory.DIR.G,
                    animation: false,
                    numberOfPause: 0
                })
            );
        }
        var group = new DQ.Screen.Canvas.SpriteGroup(sprites);
        return new DQ.Tetrimino(mino.type, group);
    },
    rotate: function (mino, dir, ndir) {
        var pre = DQ.TETRIS.TetriminoFactory.types[mino.type][dir];
        var pos = DQ.TETRIS.TetriminoFactory.types[mino.type][ndir];
        for (var i = 0; i < mino._group._member.length; i++) {
            var sp = mino._group._member[i];
            var cx = sp.x - pre[i][0] * DQ.TETRIS.CHIP_SIZE;
            var cy = sp.y - pre[i][1] * DQ.TETRIS.CHIP_SIZE;
            cx += pos[i][0] * DQ.TETRIS.CHIP_SIZE;
            cy += pos[i][1] * DQ.TETRIS.CHIP_SIZE;

            sp.x = cx;
            sp.y = cy;
        }
    }
}

続く

ソース:tetris.js

tetris.html
フレーム内を一度クリックするとキーが効くようになります。十字キーに対応しています。
Aボタンは’V'キー
Bボタンは’C'キー
です。

設計編
実装編(1)

1.分析

1.1 シナリオ

　ゲームの内容をシナリオとして簡単に記述します。

1.1.1 ゲームを始める

　ゲームの開始を促す表示がされていて、ボタンを押すとゲームが開始される。
　最初は何も無いステージに様々な形状のブロックが上から落ちてくる。
　ブロックは中央上部から落ちてくる。
　ブロックが落下を始めると次のブロックが明示される
次のブロックは３つまで表示される。

1.1.2 操作する

　プレイヤーは落ちていくブロックを回転、あるいは左右に移動させながらステージの下に隙間無く埋めていく。
　また、ブロックの落下速度をプレイヤーの操作によって落下させることが出来る。
　（加速中はスコアが増加する）

1.1.3 ラインを消す

　ブロックが落ちた事で隙間無く埋まったラインは、消えてスコアーとなる。
　同時に複数のラインを消すとスコアーは指数的に増加する。
　ラインが消えると上のラインが下に落ちてくる
（※ライン単位でしか下に落ちないので、ブロックの粒の下に空洞があっても粒単独で下に落ちたりはしない（つまり連鎖は無い））。

1.1.4 レベルアップ

　ゲームを進めてスコアーが一定以上になるとレベルが上がり、無操作状態でのブロックの落下速度が速くなる。
　レベルアップと共に背景やＢＧＭに変化がある。

1.1.5　ゲームオーバー

　ブロックの落下口からブロックが落ちることが出来なければ、ゲームオーバーとなる。
　ゲームオーバーになると、ゲームを終了するか、新しくゲームを始めるかの選択肢が表示される。

1.1.6 その他と非機能要件

　ステージは縦20ライン、横10粒。
　落下表示は、一粒よりも細かい粒度で表現されること。
　横移動は粒単位で良い事とする。
　言語はJavaScript。
　プラットフォームは Webブラウザー 及び HTML5 canvasとする。
　落下したブロックは見た目上ラインに接触していても回転や横滑り出来る猶予(遊び期間）を設ける。
　「遊び中」に移動または回転すると、「遊び中」のカウントはクリアされる。
　操作はキーボード（もしくはバーチャルパッド）

1.2 概念の抽出

　前述のシナリオから名詞・動詞を拾う形で、思いつくままに概念を抽出してみます。
　一つのテクニックとして、物、事、場の視点から抽出します。

1.2.1 物

　プレイヤー
　ブロックテトリミノ
　　赤（縦棒）、青（凸型）、黄（四角）、緑（残りのやつ）
　次のブロックテトリミノ
　粒（造語、ブロックを構成する一つ一つの四角を粒と呼ぶことにする）
　ステージ
　枠？
　ライン
スコア
　背景
　BGM
　ジングル
　タイマー（暗黙の了解で追加）
※ブロックはプレイヤーが操作しなくても「時々刻々」と落下していく。時々刻々、即ちインターバルタイマーの登場（これを重力と表現するかは人の好き好き）

1.2.2 事

　（ブロックが）落ちる
　（ブロックが）加速する
　（ブロックが）回転する
　（ブロックが横に）移動する
　（ブロックが）止まる（地面か、ラインにぶつかれば止まる）
　（次のブロックを）決める
　（レベルが）上がる
　（スコアが）増える
　（ラインが）消える
　（ラインが）落ちる
　（ゲームが）終わる
　（ゲームが）始まる
　（ステージを）クリアする
　（BGMを）鳴らす

たまたまですが、どれもオブジェクトではなく振る舞いのようです。

1.2.3 場

　ゲーム

1.3 概念モデル

抽出した概念から静的モデルを作成（知見を基にオブジェクトでは無く属性への落とし込みも行ってます）。
[ゲーム|スコア;レベル|開始();終了();BGM再生();次ブロック決定()]
[テトリミノ]+-[粒]
[テトリミノ|タイプ(赤,青...)|落下();加速();回転();移動()]
[ステージ]+-[ライン]
[ ステージ||初期化()]
[ライン]+-[粒]
[ライン|行|消す();落とす()]

1.4 シーケンス

※下記のシーケンスの文法は独自なのでがんばって解釈してください。

1.4.1 初期化

ゲーム->背景.作成()
ゲーム->スコア.初期化()
ゲーム->レベル.初期化()
ゲーム->ステージ.作成()->ライン.作成()
ゲーム->”Push Start”.表示()
ゲーム->BGM.再生(オープニング)

1.4.1 ゲーム開始

ゲーム->ステージ.クリア()->ライン.クリア()
ゲーム.次のテトリミノを決定()
ゲーム->テトリミノ:次.作成()
ゲーム.:次を落下するテトリミノへ移動()

1.4.2 プレイヤーなどによる操作

プレイヤー->テトリミノ.加速()
プレイヤー->テトリミノ.移動()
プレイヤー->テトリミノ.回転()
タイマー->テトリミノ.落下()
タイマー->底から順番に|ライン.消す()※但し、消せるなら
タイマー->ライン.落とす()※但し、落ちるなら

思いつくままに書くとこうなるが、自明なので以下に修正

　タイマー->ゲーム.更新()->ブロック.落下(Level)　※落下出来なければ、ゲームオーバー
　タイマー->ゲーム.更新()->スコア.更新(加速中?)
　タイマー->ゲーム.更新()->底から順番に|ライン.消す()※但し、消せるなら
　タイマー->ゲーム.更新()->スコア.更新(ライン数)
　タイマー->ゲーム.更新()->底から順番に|ライン.落とす()※但し、落ちるなら
　　　　　　　　　　　　　
ここで気になるのがラインを消す演出です。ラインがそろうと、パッと光って、ポンと消えて、それからバスッと落ちます。
これを表現するためにはラインには状態管理が必要です。

通常->消せる(光ってる)->消した ※ライン自体が消えるのか、ライン上の粒だけがいなくなるのかは実装のお話。

1.4.3 ゲームオーバー

ゲーム->”Game Over”.表示()
ゲーム->選択肢.表示()

2. 設計

概念モデルでは当然、プラットフォームやアーキテクチャーには依存していないので、ここでモデルを少し具体化します。

2.1 アーキテクチャー

　設計モデルに入る前に、アーキテクチャーの考察をしておきます。
　まず、画面表示にはHTML5 canvasを使用します。canvasへの描画については、自前のライブラリーを使用します。
　この時点で「背景」、「前景」、「スプライト」のオブジェクトが登場します。
　背景には背景を、前景にはステージを表示します。スプライトは一粒、1スプライトとします。

　描画は設定されたFPSに基づいて発生するインターバルタイマー毎に画面をクリア、更新します。
　一粒は14px,14pxとします。
　
　テトリミノの「遊び」の表現は状態遷移モデルで管理します。
[落下中]->[遊び中]
[遊び中](移動または、タイムアウト)->[落下中]

2.2 設計モデル

　(ドメイン)モデルとビューの分離は難しく考え無い事にします。
全く分離しないなら、「自分のことは自分でする」という振る舞いの配置原則に従って、モデル自身が画面への描画責務を負います。まあ、それは現実解ではないでしょう（たぶん）。

（モデル）
　[粒]->[スプライト]->[イメージ]　※このイメージはCSSスプライトとします。
[ステージ]->[イメージ]　※ステージのイメージ（枠）は一枚絵
[背景]->[イメージ]　　　※背景も一枚絵
[BGM]->[Audio]　　※このAudioはHTML Audio を想定

プレイヤーは現実的にキー入力とします。
(シーケンス)
　キー入力->ブロック.回転()

テトリミノは、回転や落下に伴い、スプライトの座標を更新します。
　一般にモデルとビューは分離する物とされています。それを守るならコントローラーかスプライト側がモデルであるテトリミノを参照するべきです。
　まあ、ここは適当に行きましょう（気になれば後で修正すればＯＫです）。

（モデル）
　[キャンバス]->[スプライト]
　[キャンバス]->[canvas]

キャンバスには全てのスプライトへの参照を保有させます。
　と言うことは、次テトリミノの作成や次テトリミノを落下テトリミノへ移行した場合にスプライトをキャンバスへ登録したり、
　逆にラインが消えると該当するスプライトをキャンバスから削除する必要があります。

（モデル）
[キャンバス||登録(スプライト);削除(スプライト)]
　[ゲーム]->[テトリミノ:次]
　[ゲーム]->[テトリミノ:落下中]

（シーケンス）
ゲーム->ブロック:次.作成()
ゲーム->キャンバス.スプライト登録(:次.スプライト群)

次のブロックから、落下ブロックへの昇格時はスプライトをそのまま引き継いで、座標だけを変更する事にします。
（シーケンス）
ゲーム->:次.昇格()->スプライト.移動()
　
　描画は一連の更新作業が済んだ後に実施します。

（シーケンス）
タイマー->ゲーム.更新()
タイマー->キャンバス.更新()

このゲームの実装上のトピックとしては、粒の当たり判定と回転によるブロックの表示切り替えでしょうか。
これは、実装時にはっきりさせることにします。

3. イテレーション

　最初のイテレーションでどこまで実装しましょうかね。
　とりあえず、スコアとレベルの実装は無し。
　ＢＧＭも無し。
　ラインが消える際の演出も無し。
　
　ブロックが落下できるまでとかけちくさいことは言わず、ゲームとして成立するレベルまでは仕上げることにします。

実装編その１