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クラスへ局所化する意図があります。

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

描画

イメージの読み込み

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クラス他

状態管理

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

ゲーム状態

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)