Reactでテトリスをつくる④＿落下で衝突判定

ミノの一秒置きの描画位置保持を廃止。X座標とY座標で管理する

tetris.jsx

export const Tetris = () => {
    const [disp, setDisp] = useState(Base)
　　//ミノの一秒置きの描画位置保持を廃止。X座標とY座標で管理する
    const [X, setX] = useState(4)
    const [Y, setY] = useState(0)
    const [base, setBase] = useState(disp)

落下の衝突判定

tetris.jsx

/*
衝突判定
@a [][] 判定対象
@b [][] 判定対象
*/
const checkCrush=(a, b)=>{
    let check = false
    for(let i = 0; i < a.length; i++) {
        if(!b[i]) break
        for(let j = 0; j < a[i].length; j++) {
            check = (a[i][j] > 0 && b[i][j] > 0 ) ? true : false
            if(check) return check
        }
    }
    return check
}

tetris.jsx

    useEffect(()=>{
        minoT.reset()
    },[])
    useEffect(()=>{
        setDisp(merge(base, minoT.val2(X, Y)))
        let timeout = setTimeout(() => {
            setY(Y+1)
        },1000)
        if(checkCrush(base, minoT.val2(X, Y))) {
            clearTimeout(timeout)
            setBase(merge(base, minoT.val2(X, Y)))
            minoT.reset()
            setY(0)
        }
    }, [X, Y])
    return (<Display disp={disp}/>)
}