Reactで作るテトリスクローン

Reactを使ったゲーム開発のチュートリアルとして、今回は「Reactで作るテトリスクローン」を紹介します。

プロジェクトのセットアップ

まずは、Reactのプロジェクトを作成しましょう。ターミナルで以下のコマンドを実行してください。

npx create-react-app tetris-clone

プロジェクトが作成されたら、必要なライブラリをインストールします。

cd tetris-clone
npm install react-konva konva

ゲームの基本機能を実装する

次に、テトリスの基本的な機能であるブロックの落下や移動、ラインの消去を実装していきます。コンポーネントの構成としては、以下のようになります。

• Game：ゲーム全体を管理するコンポーネント
• Board：ゲームの盤面を表示するコンポーネント
• Block：テトリスのブロックを表示するコンポーネント

import React, { useState } from "react";
import { Stage, Layer } from "react-konva";
import Board from "./Board";

const Game = () => {
  const [board, setBoard] = useState(Array(20).fill(Array(10).fill(0)));
  const [block, setBlock] = useState([]);

  return (
    <Stage width={320} height={640}>
      <Layer>
        <Board board={board} />
      </Layer>
    </Stage>
  );
};

export default Game;

import React from "react";
import { Rect } from "react-konva";
import Block from "./Block";

const Board = ({ board }) => {
  return (
    <>
      {board.map((row, y) =>
        row.map((cell, x) => <Rect key={`${x},${y}`} x={x * 32} y={y * 32} width={32} height={32} fill="#eee" stroke="#aaa" strokeWidth={1} />)
      )}
      <Block />
    </>
  );
};

export default Board;

import React from "react";
import { Rect } from "react-konva";

const Block = () => {
  return (
    <>
      <Rect x={32 * 3} y={0} width={32} height={32} fill="#f00" stroke="#000" strokeWidth={1} />
      <Rect x={32 * 4} y={0} width={32} height={32} fill="#f00" stroke="#000" strokeWidth={1} />
      <Rect x={32 * 5} y={0} width={32} height={32} fill="#f00" stroke="#000" strokeWidth={1} />
      <Rect x={32 * 4} y={32} width={32} height
以上のコードでは、`Game`コンポーネントがゲーム全体を管理し、`Board`コンポーネントが盤面を表示しています。また、`Block`コンポーネントでは、テトリスのブロックを表示しています。

## ブロックの落下を実装する

次に、ブロックの落下機能を実装していきます。まずは、ブロックを移動するための`moveBlock`関数を定義します。

```jsx
const moveBlock = (block, x, y) => {
  const movedBlock = block.map(([bx, by]) => [bx + x, by + y]);
  return movedBlock;
};

次に、ブロックを落下させるためのdropBlock関数を定義します。この関数では、setTimeoutを使用して、一定時間ごとにブロックを下に移動します。

const dropBlock = (block, setBlock) => {
  const movedBlock = moveBlock(block, 0, 1);
  setBlock(movedBlock);
  setTimeout(() => {
    dropBlock(movedBlock, setBlock);
  }, 1000);
};

最後に、GameコンポーネントでdropBlock関数を呼び出すようにします。

const Game = () => {
  const [board, setBoard] = useState(Array(20).fill(Array(10).fill(0)));
  const [block, setBlock] = useState([
    [3, 0],
    [4, 0],
    [5, 0],
  ]);

  useEffect(() => {
    dropBlock(block, setBlock);
  }, []);

  return (
    <Stage width={320} height={640}>
      <Layer>
        <Board board={board} block={block} />
      </Layer>
    </Stage>
  );
};

以上のコードで、ブロックが落下するようになりました。

まとめ

Reactを使って、テトリスクローンの基本的な機能を実装する方法を紹介しました。今回は、ブロックの落下機能のみを実装しましたが、さらに機能を追加することで、完全なテトリスゲームを作ることができます。