【テトリス #6】ブロックを積み上げる - スマレジエンジニアyushiのブログ

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

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

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

TypeScript
React
SCSS
Create React App

今回はブロックを積み上げます。

方針

前回までの実装では、落ちてきたブロックは地面を通過し、積み上がらない状態でした。

今回は、地面や積まれたブロックとの接触判定と、ブロックの積み上げを実装します。

接触判定

接触判定のロジックを用意します。

  for (const tile of getTiles(nextBlock)) {
    if (findBlock(blocks, tile[0] + nextBlock.x, tile[1] + nextBlock.y)) {
      return null;
    }
  }

nextBlockが既存ブロックに接触したかどうかを判定しています。
getTiles、findBlockは事前に作成済みのロジックです。
getTilesでは、あるブロックについて、その構成要素（Tile）の各座標を返却します。
findBlockは、ある座標について、すでにそこに存在しているブロックがあればそれを返却します。

ブロックの積み上げ

ボードの下辺もしくは既存のブロックに接触したブロックを積み上げます。

const [blocks, setBlocks] = useState<Block[]>([]);

if (/** 下辺もしくは既存ブロックに接触 */) {
  setBlocks([...blocks, fallingBlock as Block]);
}

画面

Pull Request

https://github.com/nek0meshi/tetris/pull/13

あとがき

最近は英語の勉強中です。
英語のwebページをスラスラ読んだり、英語の映画やドラマを聞き取れるようになりたいです。