javascript（テトリス005_開始と終了）

■ピースの開始位置とゲーム終了時の処理について。
テトリスは上からピースが降ってきて、上まで積みあがると終わりになる。この「上」をどういった処理にするか検討してなかったので、今回はまだ３マスでそれを考える。
ピースの形状から横向きで始めれば、４×２（横×縦）のマスがあれば十分。４マスでも同じ。

開始位置としては、下の肌色のマスにする。ここでピースを発生させて、そこから１マス下に落ちることで、htmlで定義しているマスに含まれる。これより上でピースを発生させようとすると、１マス落ちてもhtmlの定義外になるのでエラーが出る。

次に積みあがった時の処理。３－６のマスが既に積まれていた時に、新しいピースが発生しどこかのマスに重なるようであれば、上まで積みあがったと見なす。上の図なら、緑色の部分が積みあがっている部分で、赤が新しいピース。重なっている部分が５（茶色部分）。
javascript内の変数として、マスが埋まっている状態かの配列（board）をデータとして持っているので、それで判定。

コードは下のような感じ。tempblock が新しく作られるピース。tempblock[i]には初期値として、-7, -6, -5, -4, 3, 4, 5, 6 のいずれかになる。

    for (let i = 0; i < tempblock.length; i++) {
        if (board[tempblock[i]] === 1) {
            console.log("end");
            clearInterval(timer);
            document.removeEventListener('keypress', keypress_event);
            for (let i = 0; i < tempblock.length; i++) {
                if (tempblock[i] >= 0) {
                    $('.piece' + i).css('left', $('.squ' + tempblock[i]).position().left + 'px');
                    $('.piece' + i).css('top', $('.squ' + tempblock[i]).position().top + 'px');
                    $('.piece' + i).css('background-color', 'Grey');
                }
            }
            for (let i = 0; i < board.length; i++) {
                if (board[i] === 1) {
                    $('.squ' + i).css('background-color', 'Grey');
                }
            }
        }
    }

終了時には、setInterval や キーボードでの入力を解除し、今まで積みあがったブロックを灰色にしてみる。実行結果が下のもの（まだバグあり）。

次こそ4マスへの拡張を試してみたい。