React тапшырмасы: 10x10 оюн талаасын түзүңүз (100 квадрат), ар бири кездейсоқ түс менен ( кызыл же жашыл). Квадратга чыкылдатканда, анын түсү тескерисине өзгөрөт, жана ошондой эле рекурсивдүү түрдө ошол эле түстөгү бардык көршү клеткалардын түсү өзгөрөт (түз жана горизонталдуу).

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