React-Aufgabe: Erstellen Sie ein 10x10-Spielbrett (100 Quadrate), jedes zufällig in Rot oder Grün. Beim Klicken auf ein Quadrat ändert sich seine Farbe in die entgegengesetzte, und rekursiv ändert sich auch die Farbe aller benachbarten Zellen derselben Farbe (vertikal und horizontal).

Ниже пример реализации игрового поля 10x10 на React, где каждый квадрат имеет случайный цвет (красный или зелёный). При клике цвет квадрата меняется на противоположный, а также рекурсивно меняется цвет всех соседних клеток того же цвета по вертикали и горизонтали.

import React, { useState, useEffect } from 'react';

const ROWS = 10;
const COLS = 10;

// Генерируем случайный цвет: 'red' или 'green'
const randomColor = () => (Math.random() < 0.5 ? 'red' : 'green');

function GameBoard() {
  const [board, setBoard] = useState([]);

  useEffect(() => {
    // Инициализация доски случайными цветами
    const initialBoard = Array.from({ length: ROWS }, () =>
      Array.from({ length: COLS }, () => randomColor())
    );
    setBoard(initialBoard);
  }, []);

  const toggleColor = (color) => (color === 'red' ? 'green' : 'red');

  const handleClick = (row, col) => {
    const targetColor = board[row][col];
    const newBoard = board.map(row => row.slice()); // глубокая копия

    const visited = new Set();

    const dfs = (r, c) => {
      if (
        r < 0 || r >= ROWS ||
        c < 0 || c >= COLS ||
        visited.has(`${r},${c}`) ||
        newBoard[r][c] !== targetColor
      ) {
        return;
      }

      visited.add(`${r},${c}`);
      newBoard[r][c] = toggleColor(targetColor);

      // Рекурсивно меняем цвет соседних клеток
      dfs(r - 1, c); // вверх
      dfs(r + 1, c); // вниз
      dfs(r, c - 1); // влево
      dfs(r, c + 1); // вправо
    };

    dfs(row, col);
    setBoard(newBoard);
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${COLS}, 30px)`, gap: '2px' }}>
      {board.map((row, rIdx) =>
        row.map((color, cIdx) => (
          <div
            key={`${rIdx}-${cIdx}`}
            onClick={() => handleClick(rIdx, cIdx)}
            style={{
              width: 30,
              height: 30,
              backgroundColor: color,
              cursor: 'pointer',
              border: '1px solid #000',
            }}
          />
        ))
      )}
    </div>
  );
}

export default GameBoard;