JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Крестики-нолики Тетрис</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="game" width="400" height="400"></canvas>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');

    const GRID_SIZE = 10;
    const CELL_SIZE = 40;
    const SYMBOLS = ['X', 'O'];
    const FALL_SPEED = 500; // Скорость падения символов (в миллисекундах)

    let grid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(null));
    let currentSymbol = 'X';
    let currentX = Math.floor(GRID_SIZE / 2);
    let currentY = 0;
    let gameOver = false;
    let fallTimer = null;
    let fallInterval = null;

    function drawGrid() {
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 1;

      for (let i = 1; i < GRID_SIZE; i++) {
        ctx.beginPath();
        ctx.moveTo(i * CELL_SIZE, 0);
        ctx.lineTo(i * CELL_SIZE, GRID_SIZE * CELL_SIZE);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(0, i * CELL_SIZE);
        ctx.lineTo(GRID_SIZE * CELL_SIZE, i * CELL_SIZE);
        ctx.stroke();
      }
    }

    function drawSymbol(symbol, x, y) {
      ctx.font = '30px Arial';
      ctx.fillStyle = 'black';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(symbol, x * CELL_SIZE + CELL_SIZE / 2, y * CELL_SIZE + CELL_SIZE / 2);
    }

    function drawCurrentSymbol() {
      drawSymbol(currentSymbol, currentX, currentY);
    }

    function clearCell(x, y) {
      ctx.clearRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
    }

    function moveLeft() {
      if (currentX > 0) {
        clearCell(currentX, currentY);
        currentX--;
        drawCurrentSymbol();
      }
    }

    function moveRight() {
      if (currentX < GRID_SIZE - 1) {
        clearCell(currentX, currentY);
        currentX++;
        drawCurrentSymbol();
      }
    }

    function drop() {
        if...