ARR в canvas.onmouse

[DragonFly]

Товарищи! Имеем следующую часть кода, задача которой во время движения мыши считывать ее координаты по X, Y и записывать эти координаты в массивы mgx=[] и mgy=[] так, чтобы пара координат была записана туда лишь единожды, без повторения, по одному разу. Как только массив достигает значения в 16 символов, будет выполнена команда отпускания мыши.

Попробовал реализовать данную задачу работой массива внутри функции canvas.onmousedown = function(event) {...}, а именно так, что при нажатии onmouseclick мы получаем на вход первую пару координат, далее при движении onmousemove по плану идет сверка новой пары коодинат с координатами в массиве, таким образом достигается отсутствие повторений, но массив не хочет работать внутри функций onmouse. Кто шарит, подскажите что изменить в коде чтобы заработало или мб попробовать другую логику?

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

var mgx = [];
var mgy = [];


canvas.onmousedown = function(event) {

  var x = event.offsetX;
  var y = event.offsetY;
  x = Math.floor(x/30); //работаем с боксами 30x30 пикселей по X
  y = Math.floor(y/30); //и по Y соответственно
  mgx.push(x);
  mgy.push(y);
  console.log(mgx);
  console.log(mgy);
  canvas.onmousemove = function(event) {

    var x = event.offsetX;
    var y = event.offsetY;
    x = Math.floor(x/30);
    y = Math.floor(y/30);
    for (var i=0; i < mgy.lenght; i++) {
      if (x == mgx[i] && y == mgy[i]) {
        break;
      }
      if (i == (mgy.length - 1)) {
        mgx.push(x);
        mgy.push(y);
      }
    }
    canvas.onmouseup = function() {
      canvas.onmousemove = null;
    }

  }
}

[voraa]

const canvas = document.getElementById("TFG");
const ctx = canvas.getContext("2d");
 
var mgx = [];
var mgy = [];
 
 
canvas.onmousedown = function(event) {
 
  var x = event.offsetX;
  var y = event.offsetY;
  x = Math.floor(x/30); //работаем с боксами 30x30 пикселей по X
  y = Math.floor(y/30); //и по Y соответственно
  mgx.push(x);
  mgy.push(y);
  console.log(mgx);
  console.log(mgy);
  canvas.onmousemove = function(event) {
 
    var x = event.offsetX;
    var y = event.offsetY;
    x = Math.floor(x/30);
    y = Math.floor(y/30);
    let exist = false;
    for (var i=0; i < mgy.length; i++) {
      if (x == mgx[i] && y == mgy[i]) {
        exist = true;
        break;
      }
    }
    if (! exist) {
        mgx.push(x);
        mgy.push(y);
    }
    if (mgy.length == 16)  canvas.onmousemove = null;
 }

   
    canvas.onmouseup = function() {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
    }
}

В принципе ваш код тоже может работать, если ошибку исправить
for (var i=0; i < mgy.lenght; i++) {

[Nexus]

Как только массив достигает значения в 16 символов, будет выполнена команда отпускания мыши.

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

Попробуйте так:

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;
});

[DragonFly]

let exist = false;
    for (var i=0; i < mgy.length; i++) {
      if (x == mgx[i] && y == mgy[i]) {
        exist = true;
        break;
      }
    }
    if (! exist) {
        mgx.push(x);
        mgy.push(y);
    }

Благодарю! Код действительно заработал после исправления ошибки, но я все таки обновил его, мне понравился ход с переменной exist

[DragonFly]

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;
});

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

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

[Nexus]

Ваш код разбирать и разбирать для понимания

Код на самом деле простой.

Используется: деструктуризация, стрелочные функции, template strings, переменные let и псевдоконстанты const, работа с событиями и присвоение объекту динамического ключа (как это «по-умному» называется - не знаю).