02
Дек
2021

Паззл на canvas js. как сделать ,чтобы один паззл не ложился поверх второго

Пишу игру паззл на canvas js. хотела бы сделать так, чтобы в левое поле ,если там уже есть картинка, не притягивалась вторая поверху. Подскажите, пожалуйста, как это исправить? Заранее большое спасибо! Рабочий пример: https://codepen.io/natella-homza/pen/eYGOLGV?editors=0010
Код, в котором нужно внести изменения по моему скромному мнению.

class Controller {

mouseDown(e) {
e.preventDefault();
e.stopPropagation();

let mouseX = parseInt(e.clientX - offsetX);
let mouseY = parseInt(e.clientY - offsetY);

for (let i = rightField.length - 1; i >= 0; i--) {
  let a = rightField[i];
  if (mouseX > a.x && mouseX < a.x + a.s && mouseY > a.y && mouseY < a.y + a.s) {
    this.puzzleActive = JSON.parse(JSON.stringify(rightField[i]));
    activePuzzleIsDetectedButNotProcessed = true;
    score++;
    break;
  }
}
startX = mouseX;
startY = mouseY;
for (let j = 0; j < leftField.length; j++) {
  let b = leftField[j];
  if (mouseX > b.x && mouseX < b.x + b.s && mouseY > b.y && mouseY < b.y + b.s && !b.isEmpty) {
    b.isEmpty = true;
    break;
  }
}
}

 mouseMove(e) {
let mouseX = parseInt(e.clientX - offsetX);
let mouseY = parseInt(e.clientY - offsetY);
let distanceX = mouseX - startX;
let distanceY = mouseY - startY;

const leftMouseButtonOnlyDown = e.buttons === undefined
  ? e.which === 1
  : e.buttons === 1;
if (leftMouseButtonOnlyDown) {

  if (activePuzzleIsDetectedButNotProcessed) {
    let index = rightField.findIndex((el, index) => {
      if (el.startIndex === this.puzzleActive.startIndex) {
        return true;
      }
    });
    let item = rightField.splice(index, 1)[0];
    rightField.push(item);
    activePuzzleIsDetectedButNotProcessed = false;
  };

  if (this.puzzleActive !== null) {
    let a = rightField[rightField.length - 1];
    if (a.x <= 0) {
      a.x = 1;
    } else if (a.x >= containerSize.width - a.s) {
      a.x = containerSize.width - a.s - 1;
    } else if (a.y >= containerSize.height - a.s) {
      a.y = containerSize.height - a.s - 1;
    }
    else if (a.y <= 0) {
      a.y = 1;
    }
    else {
      a.x += distanceX;
      a.y += distanceY;
    }
  }

  startX = mouseX;
  startY = mouseY;
  playingField.draw();
}
}

mouseUp(e) {

let mouseX = parseInt(e.clientX - offsetX);
let mouseY = parseInt(e.clientY - offsetY);

for (let j = 0; j < leftField.length; j++) {
  let b = leftField[j];
  let a = rightField[rightField.length - 1];
  for (let i = 0; i < rightField.length; i++) {
    let c = rightField[i];
    if (mouseX > b.x && mouseX < b.x + b.s && mouseY > b.y && mouseY < b.y + b.s && b.isEmpty) {
      a.x = b.x;
      a.y = b.y;
      b.isEmpty = false;
      if (a.value === b.value) {
        b.isChecked = true;
      }
    }
  }
  this.puzzleActive = null;
  playingField.draw();
}
}
}

Источник: https://ru.stackoverflow.com/questions/1356277/%D0%9F%D0%B0%D0%B7%D0%B7%D0%BB-%D0%BD%D0%B0-canvas-js-%D0%BA%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%87%D1%82%D0%BE%D0%B1%D1%8B-%D0%BE%D0%B4%D0%B8%D0%BD-%D0%BF%D0%B0%D0%B7%D0%B7%D0%BB-%D0%BD%D0%B5-%D0%BB%D0%BE%D0%B6%D0%B8%D0%BB%D1%81%D1%8F-%D0%BF%D0%BE%D0%B2%D0%B5%D1%80%D1%85-%D0%B2%D1%82%D0%BE%D1%80%D0%BE%D0%B3%D0%BE

Тебе может это понравится...

Добавить комментарий