Reactでテトリスをつくる⑤＿キーボード入力イベントをつける

キーボード入力イベントをつける

const keydown = (e) => {
        switch(e.which){
            //Enter
            case 13:
                minoT.rotate()
                setDisp(minoT.val2(X, Y))
                break;
            //Right
            case 39:
                if(checkCrush(base, minoT.val2(X+1, Y))) {
                    break
                }
                setX(X+1)
                setDisp(minoT.val2(X+1, Y))
                break;
            //Left
            case 37:
                if(checkCrush(base, minoT.val2(X-1, Y))) {
                    break
                }
                setX(X-1)
                setDisp(minoT.val2(X-1, Y))
                break
            //Down
            case 40:
                if(checkCrush(base, minoT.val2(X-1, Y))) {
                    break
                }
                setY(Y+1)
                break
            default:
                break;
        }

右、左、下の動きを付けた。

一定時間ごとに描画を更新する処理は、こつがいる。
useEffectでやるにしても、タイミングをしっかりつかまないとレンダー過剰になりがちである。
色々考えた結果、周期的レンダー用に関数をつくった。

• 以下のロジックは、ブロックを下に１マス進めつつ、次のレンダーを１秒後に指定している。
• これが、setTimeoutにブロックを進める処理を入れるとうまくいかない。
  • なぜならば、最後に一秒後に１マス多く進むバグがでやすい。timeoutをキャンセルなどをやりはじめると複雑になりがち

    const [effect, setEffect]=useState(false)
    useEffect(()=>{
        setDisp(minoT.val2(X, Y))
        setY(Y+1)
        timeout = setTimeout(()=>{
            setEffect(!effect)
        },1000)

    },[effect])