Это как это? Вы разрабатываете устройство, которое по рукам пользователю бить будет?
Попробуйте так:
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;
});
|