【テトリス #7】タイマーでブロックを落とす - スマレジエンジニアyushiのブログ

テトリスを作っています。

テトリスカテゴリーの記事一覧 - スマレジエンジニアyushiのブログ

技術スタックは下記の通りです。

TypeScript
React
SCSS
Create React App

今回はタイマーでブロックを落とすようにします。

方針

前回まではキー操作でブロックを落としていました。

今回で、自動でブロックが落ちてくるようにします。

タイマーの基本機能

JavaScriptのタイマー機能をラップします。

IDの管理を省略し、intervalTime毎にcallbackを呼び出すようにします。

let timerId: NodeJS.Timer | null;
const intervalTime = 1000;

export const start = (callback: () => void) => {
  timerId = setInterval(callback, intervalTime);
};

export const stop = () => {
  if (timerId === null) {
    return;
  }

  clearInterval(timerId);
};

ページ表示時にタイマーを起動する

React hookにて、ページ表示時にタイマーを起動するようにします。

import { useEffect, useRef } from 'react';
import * as timer from '../features/timer';

const useTimer = (callback: () => void) => {
  const refNextStep = useRef(callback);
  useEffect(() => {
    refNextStep.current = callback;
  }, [callback]);
  useEffect(() => {
    const tick = () => refNextStep.current();
    timer.start(tick);

    return () => timer.stop();
  }, []);
};

export default useTimer;