Reactでテトリスをつくる①＿枠をつくる

目次（このシリーズの記事検索結果）

はじめに

Qiita投稿のため

Qiita投稿のための取り組みとして、テトリスをつくりたいと思います。
なぜテトリスにしたかというと、有名なゲームであり難易度も多少高いと思うからです。

テトリスの作り方には様々なやり方があり、それらは既にノウハウとしてWebにアップされているものもあります。

それらと同じことをやっても、やる方も見るほうもあまり意味ありません。まだ、だれもやっていないやり方でやろうと思うわけです。

れもやっていないやり方でやる

今回は上記の観点で、以下の方法でプログラムすることにします。

• 画面を方眼紙のように見立てて、配列で表示を全渡しする。
• 配列は1次元配列にする

画面をドットにして渡す

工数

これはあくまで、「Reactでテトリスつくったらこんな感じです。」
というのをやりたいので、プロトタイプです。
それで、プロトタイプというものは、たとえ時間かけてつくったとしても、没になれば全く別のやりかたで作り直す可能性があるので、普通は時間をかけません。
個人開発ですと3日以内にデモンストレーションレベルに仕上げる算段です。

プロトタイプの品質

デモンストレーションレベルでは、バグがあってもOKです。
動くところをみせられればよいです。だから、とくにかっちりとしたテストとかも必要ありません。

const Base=[
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,1,1],
]

function Display(props) {
    let screen = []
    for(let i = 0; i < props.disp.length; i++) {
        for(let j = 0; j < props.disp[i].length; j++) {
            (props.disp[i][j] === 1) ? d.push(<Dot x={j*20} y={i*20}/>) : null
        }
    }
    return ({screen})
}

function Dot(props){
    return <div style={{'width': '20px', 'height': '20px', 'backgroundColor':'red','position':'absolute', 'top':props.y,'left':props.x}}></div>
}