React tapşırığı: 10x10 oyun sahəsi hazırlayın (100 kvadrat), hər biri təsadüfi rəngdə (qırmızı və ya yaşıl). Kvadrat üzərinə kliklədikdə, onun rəngi əksinə dəyişir və eyni rəngdə olan bütün qonşu hüceyrələrin rəngi də (şaquli və üfiqi) rekursiv dəyişir.

Ниже пример реализации игрового поля 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;