Уместить перетаскивание с холстом в каком-либо месте - PullRequest
Новая
       13

Уместить перетаскивание с холстом в каком-либо месте

0 голосов
/ 05 мая 2020

Я создаю игру, похожую на морские линкоры, и решил использовать для этой задачи Canvas API. Затем я начал изучать перетаскивание с помощью Canvas, и тогда я придумал следующее: как избежать перетаскивания пользователем перетаскивания по линиям доски или по заполненным квадратам? В одной игре, которую я использовал в качестве основы, используется что-то вроде заранее выбранной позиции, поэтому, когда объект помещается над линией, он использует модель-призрак над ближайшим правильным положением, а затем помещает объект туда.

Обратите внимание на зеленую тень

enter image description here

Итак, мой вопрос: как я могу добиться чего-то подобного на Canvas?

Код для поколение плат 

 function drawBoard() {
    let y = 90;
    let x = 90;
    context.clearRect(0, 0, width, height);

    context.fillStyle = "#fff";
    context.fillRect(50, 50, 400, 400);

    for (let i = 0; i < 9; i++) {
      context.beginPath();
      context.moveTo(50, y);
      context.lineTo(450, y);

      context.strokeStyle = "black";
      context.stroke();

      context.beginPath();
      context.moveTo(x, 50);
      context.lineTo(x, 450);

      context.strokeStyle = "black";
      context.stroke();
      y += 40;
      x += 40;
    }

    y = 40;
    x = 38;
    context.font = "16px Arial";
    context.textAlign = "center";

    for (let i = 1; i <= 10; i++) {
      context.fillText(String.fromCharCode(64 + i), 40, (y += 40));
      context.fillText(i.toString(), (x += 38), 45);
    }
   }
    drawBoard()

https://jsfiddle.net/gabcozta/oe0yb6u3/

...