Помоги:
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
let pyramid = [];
let cells = Array(7).fill(null);
let message = document.getElementById('message');

// Инициализация пирамиды
function initPyramid() {
    pyramid = []; // Сброс пирамиды
    const colorCount = {}; // Объект для подсчета фигурок каждого цвета

    // Генерируем 15 фигурок (по 3 для каждого цвета)
    const totalPieces = 15; // Общее количество фигурок
    const piecesPerColor = totalPieces / colors.length; // Количество фигурок для каждого цвета

    // Заполняем объект colorCount
    colors.forEach(color => {
        colorCount[color] = piecesPerColor; // Устанавливаем количество фигурок для каждого цвета
    });

    // Создаем слои пирамиды
    for (let i = 0; i < 5; i++) { // 5 слоев
        let layer = [];
        for (let j = 0; j < i + 1; j++) {
            // Находим цвет, который еще не исчерпан
            let color;
            do {
                color = colors[Math.floor(Math.random() * colors.length)];
            } while (colorCount[color] <= 0); // Повторяем, пока не найдем цвет с оставшимися фигурками

            layer.push({ color: color, active: true });
            colorCount[color]--; // Уменьшаем счетчик для выбранного цвета
        }
        pyramid.push(layer);
    }

    renderPyramid();
    renderCells();
    message.innerText = ''; // Сброс сообщения
}

// Отрисовка пирамиды
function renderPyramid() {
    const pyramidDiv = document.getElementById('pyramid');
    pyramidDiv.innerHTML = '';
    pyramid.forEach((layer, i) => {
        const layerDiv = document.createElement('div');
        layerDiv.className = 'layer'; // Добавляем класс для слоя
        layer.forEach((piece, j) => {
            const pieceDiv = document.createElement('div');
            pieceDiv.className = 'piece'; // Устанавливаем класс для фигуры
            pieceDiv.style.backgroundColor = piece.active ? piece.color : ''; // Устанавливаем цвет только для активных фигурок
            pieceDiv.style.opacity = piece.active ? '1' : '0.5'; // Устанавливаем прозрачность
            pieceDiv.onclick = () => {
                if (isPieceActive(i, j)) { // Проверяем, активна ли фигурка
                    pickPiece(i, j);
                }
            };
            layerDiv.appendChild(pieceDiv);
        });
        pyramidDiv.appendChild(layerDiv);
    });
}

// Отрисовка ячеек
function renderCells() {
    const cellContainer = document.getElementById('cell-container');
    cellContainer.innerHTML = '';
    cells.forEach((color, index) => {
        const cell = document.createElement('div');
        cell.className = 'cell';
        if (color) {
            const pieceDiv = document.createElement('div');
            pieceDiv.className = 'piece'; // Устанавливаем класс для фигуры
            pieceDiv.style.backgroundColor = color; // Устанавливаем цвет ячейки
            pieceDiv.style.opacity = '1'; // Полная непрозрачность для фигурки в ячейке
            cell.appendChild(pieceDiv); // Добавляем фигурку в ячейку
        }
        cellContainer.appendChild(cell);
    });
}

// Проверка, активна ли фигурка
function isPieceActive(layer, index) {
    // Проверяем, есть ли фигурки на верхнем слое
    if (layer === pyramid.length - 1) {
        return true; // Фигурки на верхнем слое всегда активны
    }
    // Проверяем, есть ли фигурки на слое выше
    const upperLayer = pyramid[layer + 1];
    const leftIndex = index; // Индекс для левой фигурки
    const rightIndex = index + 1; // Индекс для правой фигурки

    // Проверяем, закрыта ли фигурка двумя фигурками сверху
    const isBlocked = (upperLayer[leftIndex] && upperLayer[leftIndex].active) || 
                      (upperLayer[rightIndex] && upperLayer[rightIndex].active);

    return !isBlocked; // Если фигурка закрыта, она не активна
}

// Выбор фигурки
function pickPiece(layer, index) {
    if (pyramid[layer][index].active) { // Проверяем, активна ли фигурка
        const color = pyramid[layer][index].color;
        pyramid[layer][index].active = false; // Помечаем фигурку как неактивную
        renderPyramid();
        placeInCell(color);
    }
}

// Помещение в ячейку
function placeInCell(color) {
    const emptyIndex = cells.indexOf(null);
    if (emptyIndex !== -1) {
        cells[emptyIndex] = color;
        renderCells();
        checkCells();
    } else {
        message.innerText = 'Игра окончена: ячейки заполнены!';
    }
}

// Проверка ячеек
function checkCells() {
    const colorCount = {};
    cells.forEach(color => {
        if (color) {
            colorCount[color] = (colorCount[color] || 0) + 1;
        }
    });
    for (let color in colorCount) {
        if (colorCount[color] === 3) {
            cells = cells.map(c => (c === color ? null : c));
            renderCells();
            message.innerText = 'Фигурки исчезли!';
            return;
        }
    }
}

// Запуск игры
initPyramid();
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#game-container {
    text-align: center;
    background-image: url('background.jpg'); /* Добавьте свой фон */
    background-size: cover; /* Заполнение фона */
    padding: 20px;
    border-radius: 10px; /* Закругленные углы для контейнера */
}

#pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.layer {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: -20px; /* Сдвигаем слои вверх для эффекта наложения */
}

.piece {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px; /* Закругленные углы для объема */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для объема */
    transition: transform 0.2s; /* Плавный переход при наведении */
}

.piece.active {
    border: 1px solid #000; /* Рамка для активных фигурок */
}

.piece.active:hover {
    transform: scale(1.1); /* Увеличение при наведении только для активных фигурок */
}

.cell {
    width: 45px; /* Уменьшаем ширину ячейки */
    height: 45px; /* Уменьшаем высоту ячейки */
border: 1px solid #00000090;
display: flex-box;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
margin: 5px;
    background-color: rgba(128, 128, 128, 0.5); /* Полупрозрачный серый фон для ячеек */
}


.active {
    opacity: 1; /* Полная непрозрачность для активных фигурок */
}

.inactive {
    opacity: 0.5; /* Бледный цвет для неактивных фигурок */
    pointer-events: none; /* Отключаем события клика для неактивных фигурок */
}

#cell-container {
    display: flex;
justify-content: center;
}

#message {
    margin-top: 20px;
    font-weight: bold;
}
В данной игре реализовано добавление фигурки в ячейку, но, когда это происходит, ячейка оказывается смещена относительно добавленной фигурки. Разберись и исправь!