Reactでテトリスをつくる②＿テトロミノをつくる

テトロミノの「T」型をつくってみる

現在のミノの形を保持するためにクロージャ型にしてみる
とりあえずこんな形をベースとした

tetris.jsx

/*
ミノクロージャ
*/
var inoT = (()=>{
    var init=[
        [0,0,0],
        [1,1,1],
        [0,1,0],
    ]
    var T=[]
    return {
        val: function(){
            return T
        }
        reset:function(){
            T=init
            return this
        }
    }
})

回転させる関数が必要だ

tetris.jsx

    /*
    回転
    */
    var rotate=function(){
        let newT=JSON.parse(JSON.stringify((new Array(3)).fill((new Array(3)).fill(0))))
        T.map((d,i)=>{
            T[i].map((e,j)=>{
                newT[i][j] = T[2-j][i]
            })
        })
        T = newT
    }

落下位置を表現しなければ

• 落下位置は引数で指定して、出来上がった配列を受け取る仕組みとする

tetris.jsx

/*
ミノクロージャ
*/
var minoT = (() => {
    var init=[
        [0,0,0],
        [1,1,1],
        [0,1,0],
    ]
    var T=[]
    var rotate = () => {
        let newT=JSON.parse(JSON.stringify((new Array(3)).fill((new Array(3)).fill(0))))
        T.map((d, i) => {
            T[i].map((e,j) => {
                newT[i][j] = T[2-j][i]
            })
        })
        T = newT
    }
    return {
　　　　/*
　　　　ミノの縦横位置設定
　　　　*/
        val: (x = 0, y = 0) => {
            let newT = T
            for(let i = 0; i < y; i++) {
                newT = [[0, 0, 0]].concat(newT)
            }
            for(let j = 0; j < x; j++) {
                newT=newT.map(row => [0].concat(row))
            }
            return newT
        },
　　　　/*
　　　　ミノの回転
　　　　*/
        rotate: () => {
            rotate()
            return this
        },
　　　　/*
　　　　ミノの初期化
　　　　*/
        reset: () => {
            T = init
            return this
        }
    }
})()

コンソールに出力してみる

console

//初期化して出力
console.log(minoT.reset().val())

/*
[ 
  [ 0, 0, 0 ],
  [ 1, 1, 1 ], 
  [ 0, 1, 0 ],
]
*/

//初期化して右に90度回転して右に3マス下に1マス移動して出力
console.log(minoT.rotate().val(3,1))

/*
[
  [ 0, 0, 0, 0 ],
  [ 0, 0, 0, 0 ],
  [ 0, 0, 0, 0 ],
  [ 0, 0, 1, 0 ],
  [ 0, 1, 1, 0 ],
  [ 0, 0, 1, 0 ],
]
*/

きちんと動きができている
これを前回つくった描画機能に入れれば描画される