【テトリス #9】ブロックを最下層まで落とす - スマレジエンジニアyushiのブログ

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

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

TypeScript
React
SCSS
Create React App

今回は、ブロックを最下層まで落とす機能などを作ります。

ブロックを落とすロジック

この機能では、落下中のブロックを最下層（積まれたタイルがある場合は、それに接する）まで落とします。

  /**
   * 最下層までブロックを落とす.
   */
  const fall = () => {
    if (fallingBlock === null) {
      return;
    }

    /**
     * 最下層に到達するまで繰り返し更新する.
     */
    let currentBlock = { ...fallingBlock };

    // whileループと等価だが、不具合による無限ループを防ぐためにforループで記述する.
    for (let i = 0; i < boardHeight; i++) {
      const movedBlock = getNextBlock(
        currentBlock,
        boardWidth,
        boardHeight,
        tiles
      );

      if (!movedBlock) {
        break;
      }

      currentBlock = movedBlock;
    }

    setFallingBlock(currentBlock);
  };