React uzdevums: izveidot 10x10 spēļu laukumu (100 kvadrātiņi), katrs nejaušas krāsas (sarkans vai zaļš). Noklikšķinot uz kvadrāta, tā krāsa mainās uz pretējo, un arī rekursīvi mainās visu blakus esošo šī paša krāsas šūnu krāsa (vertikāli un horizontāli).

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