Недавно я закончила еще один проект - Конструктор визиток. Я занялась этим проектом, потому что конструкторы визиток, которые я видела, сложны в работе. Мне захотелось сделать что-то достаточное простое, удобное и понятное для пользователей. На картинке ниже представлен вариант моей визитки, сделанный в конструкторе.

А ниже видео процесса создания визитки (картинка - ссылка на youtube).

Конструктор визиток обладает следующими возможностями и инструментами.

Права панель:

• выбор размера визитки из предложенных;

Панель инструментов:

• выбор начертания, размера и цвета шрифта;
• дополнительные стили (жирный, курсив, подчеркивание);
• перенос в блоков текста в пределах области редактирования;
• сохранение результата картинкой на компьютере пользователя;
• печать полученной визитки;

Левая панель:

• выбор цвета фона визитки;
• загрузка картинки фона с компьютера пользователя;
• выбор картинки для фона из загруженных вариантов.

Во время разработки я столкнулясь с теми же проблемами, что описаны в статье Разработка Rich Text Editor: проблемы и решения, поэтому подход к фомированию структуры данных был схож с тем, что предложен в статье.

Набор инструментов я взяла самый минимальный. Сначала, я планировала включить еще выравнивание блоков(по центру, слева, справа) внитри визитки, но позже отказалась от этой идеи, потому что выравнивания блоков мышкой оказалось вполне достаточно.

Сделать визитку

Следующий проект - это связка двух проектов: редактор уровней игры "Сокобан" и игра "Сокобан".

В игре пользователь загружает созданный в редакторе уровень и играет в игру. Доступ к уровню, который создает пользователь, должен предоставляться отовюду. Значит, нужна удаленная база, которая позволяет работать с необходимыми данными.

MongoDB Atlas прекрасно подошел для целей проекта, потому что дает:

• удаленный доступ к базе MongoDB любому пользователю;

• возможность поработать с Serverless технологией;

• простую работу с данными;

• хорошую документацию.

В рамках моего проекта MongoDB Atlas позволил:

• сохранить новый уровень в таблицу;

• отредактировать текущий уровень;

• загрузить список всех созданных уровней.

Также в редакторе уровней было интересно сделать непосредственно редактор. Отрисовка панели инструментов, выбор компонентов для добавления на игровое поле, их перетаскивание мышью, привязка компонентов к сетке игрового поля при перемещении полностью реализовано на Canvas.

Когда редактор уровней был готов, я использовала часть кода с предыдущего проекта игры "Сокобан" и с текущего редактора и сделала новую версию игры "Сокобан". В этом проекте отредактированные уровни загружаются с удаленного сервера для дальнейшей игры.

Ссылка на репозиторий Редактора уровней

Сделать свой уровень

Ссылка на репозиторий игрушки

Поиграть

Следующий проект - игра "Сокобан". Сокобан — логическая игра-головоломка, в которой игрок передвигает ящики по лабиринту, показанному в виде плана, с целью поставить все ящики на заданные конечные позиции. Только один ящик может быть передвинут за раз, причём герой игры — «кладовщик» — может только толкать ящики, но не тянуть их.

Реализация игры имеет несколько особенностей:

• карта хранится в json-файле. Таким образом, при изменении файла можно менять игровое поле. Это пригодится для следующего проекта - редактора уровней для Сокобана.

• игровое поле реализовано на канве. Это упростило отображение игрового поля и перемещение объекта-кладовщика. Для загрузки изображений, я использовала механизм Promise.

this.imagesPromises = {
    [WALL]: this.loadImage(wallImg),
    ...
}
loadImage(url){
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.addEventListener('load', e => resolve(img));
        img.addEventListener('error', () => {
            reject(new Error(`Failed to load image's URL: ${url}`));
        });
        img.src = url;
    });
}

    ...
    this.imagesPromises[state.board[y][x]].then(img => {
        ctx.drawImage(img, x * SIZE_BLOCK, y * SIZE_BLOCK, SIZE_BLOCK, SIZE_BLOCK)
    })
    ...

• в CSS выполнен красивый визуальный эффект при установке ящика на место.

    .animation {
        color: rgba(255, 255, 255, 0.3);
        font-size: 25em;
        font-weight: bold;
        z-index: 5;
        animation: ani 0.8s forwards;
    }

    @keyframes ani {
        30% {
            opacity: 1
        }
        50% {
            opacity: 0.5
        }
        100% {
            opacity: 0
        }
    }

Ссылка на репозиторий

Поиграть

Следующий проект для изучения возможностей React+Redux - пиксельный редактор.

В пиксельном редакторе есть следующие инструменты для рисования:

• карадаш;
• ластик;
• прямоугольник;
• круг;
• прямая линия;
• заливка;
• выбор цвета.

А также дополнительные возможности:

• предпросмотр;
• сохранение изображения на компьютере пользователя.

Размер области для рисования - 25 х 28 пикселей.

Область рисования редактора первоначально была реализована путем добавления сетки из div-компонентов, где каждый div - представлял собой один пиксель будущего изображения. От этого способа пришлось отказаться, т.к. при рисовании прямоугольника стала заметна задержка рисования. Чтобы найти проблему, я измерила время обработки каждого события с помощью React Developer Tools.

Оказалось, что одно событиие mousemove и связанная с ним пачка событий выполняются примерно 311ms, что довольно много. При этом 290ms осуществляется обновление и перерисовка компонента Canvas (который на самом деле div) и его дочерних компонентов Cell (тех самых div-пикселей).

После перехода к обрасти рисования на канве (canvas), скорость отрисовки графических примитивов возросла в несколько раз. Это отражено и при замере скорости в React Developer Tools.

Сетка канвы для визуализации пикселей выполнена в CSS. Размер в backgroundSize - размер ячейки.

    const canvasStyle = {
        backgroundSize: `${CELL_WIDTH}px ${CELL_WIDTH}px`
    }

  background: linear-gradient(to right, #464646 1px, transparent 1px), 
                    linear-gradient(to bottom, #464646 1px, transparent 1px);

Для рисования графических примитивов реализованы следующие алгоритмы:

• алгоритм Брезенхема для рисования прямой линии;
• Midpoint алгоритм для рисования окружностей и эллипсов.

Кусок кода для расчета координат прямой линии по алгоритму Брезенхема:

    ...
    if (Math.abs(startX - endX) > Math.abs(startY - endY)) {
        const angularRatio = Math.abs((endY - startY) / (endX - startX));
        const xCoords = getCoordsOffset(startX, endX);
        const yCoords = bresenhemLine(startY, endY, angularRatio, xCoords.length);

        return filterCanvasBorder(
                    yCoords.map((item, inx) => ([item, xCoords[inx]])))
    ...

    const bresenhemLine = (start, end, angularRatio, len) => {
    let err = 0;
    let coord = start;
    return [start].concat(
        Array(len - 1)
            .fill()
            .map((_) => {
                err += angularRatio;
                if (err >= 0.5) {
                    coord += (end - start) > 0 && (end - start) !== 0 ? 1 : -1;
                    err -= 1;
                }
                return coord
            })
    )
}

Нарисованное изображение сохраняется на компьютере пользователя в формате PNG.

Ссылка на репозиторий

Хотите порисовать?