javascript - 画布将元素对齐到网格

Question

嘿，我有一个画布元素，上面有船只，我需要与示例https://codepen.io/pierrebleroux/pen/gGpvxJ中没有框架的情况完全相同，但我不知道该怎么做

这是我的代码 https://codepen.io/cleks/pen/xxrzbLQ

移动功能

function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // mousedown stuff here
      lastX=mouseX;
      lastY=mouseY;
      mouseIsDown=true;

    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // mouseup stuff here
      mouseIsDown=false;
    }


    function handleMouseMove(e){
      if(!mouseIsDown){ return; }

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


      // mousemove stuff here
      for(var i=0;i<ships.length;i++){
          var ship=ships[i];
          drawShip(ship);
          if(ctx.isPointInPath(lastX,lastY)){ 
              ship.x+=(mouseX-lastX);
              ship.y+=(mouseY-lastY);
              ship.right=ship.x+ship.width;
              ship.bottom=ship.y+ship.height;
          }
      }
      lastX=mouseX;
      lastY=mouseY;
      drawAllShips();
    }