Question

我正在研究使用html5 canvas和JavaScript制作拼图游戏。我有图像（碎片）到位，它们是可拖动的，但我希望这些碎片的行为就像它们在网格上一样，这样当你在拖动图像时单击并按住它时，它只能放在某些图块上3x3网格。

之前在Stack上问了一个类似的问题，但唯一的回答指向了一个drupal模块而我没有使用drupal。我在网上发现了一个使用Asp.net的类似解决方案，但我希望在前端解决这个问题，如果我必须使用一些服务器端代码，我只知道PHP。

看起来像canvas的renderGrid函数，只是绘制一个网格，但不能使其对象捕捉某些地方的功能。

有没有人有关于如何做到这一点的线索？

Answer 1

设置坐标时使用除/向下数学运算。例如。为每24个像素空间x：

   var gridx = Math.floor(x/24)*24;