Показать сообщение отдельно
  #5 (permalink)  
Старый 28.01.2021, 22:50
Новичок на форуме
Отправить личное сообщение для DragonFly Посмотреть профиль Найти все сообщения от DragonFly
 
Регистрация: 28.01.2021
Сообщений: 3

Сообщение от Nexus Посмотреть сообщение
Это как это? Вы разрабатываете устройство, которое по рукам пользователю бить будет?

Попробуйте так:
const BOX_SIDE_SIZE = 30;
const MAX_DISTANCE = 16;

const canvas = document.getElementById('TFG');
const ctx = canvas.getContext('2d');

const getKeyByCoordinates = ({x, y}) => `${x}*${y}`;
const getCoordinatesByEvent = e => ({
    x: Math.floor(e.offsetX / BOX_SIDE_SIZE),
    y: Math.floor(e.offsetY / BOX_SIDE_SIZE),
});

let coordinates = {}, 
    coordsLength = 0, 
    mouseStillPressed = false;

canvas.addEventListener('mousedown', e => {
    const eventCoordinates = getCoordinatesByEvent(e);
    
    coordinates = {
        [getKeyByCoordinates(eventCoordinates)]: eventCoordinates
    };
    coordsLength = 1;
    mouseStillPressed = true;
});

canvas.addEventListener('mousemove', e => {
    if (!mouseStillPressed || coordsLength >= MAX_DISTANCE) {
        return;
    }
    
    const eventCoordinates = getCoordinatesByEvent(e);
    const key = getKeyByCoordinates(eventCoordinates);
    
    if (!coordinates[key]) {
        coordinates[key] = eventCoordinates;
        ++coordsLength;
    }
});

canvas.addEventListener('mousemove', e => {
    mouseStillPressed = false;
});


Да! Только не бить по рукам, а сверху будет падать шкаф, если вовремя не отпустить!

Ваш код разбирать и разбирать для понимания, взял на вооружения в качестве оптимизации, благодарю!
Ответить с цитированием