개체를 html5 캔버스의 위치에 스냅하는 방법은 무엇입니까?

Question

나는 html5 캔버스와 자바 스크립트를 사용하여 퍼즐 게임을 만들고 있습니다. 이미지 (조각)을 제자리에 놓았지만 드래그 할 수는 있지만 조각을 그리드처럼 움직여서 이미지를 드래그하는 동안 누르고 있으면 특정 타일에만 배치 할 수 있습니다. 3x3 그리드

비슷한 질문이 이전에 Stack에서 요청되었지만 유일한 응답은 drupal 모듈을 가리키며 나는 drupal을 사용하지 않습니다. Asp.net을 사용하는 하나의 유사한 솔루션을 온라인에서 찾았지만 프론트 엔드에서이 문제를 모두 해결하기를 바라고 있습니다. 일부 서버 측 코드를 사용해야하는 경우 PHP 만 알고 있습니다.

캔버스에 대한 renderGrid 기능은 그리드를 그렸지만 개체를 ​​특정 위치에 물리기 위해 작동하지 않습니다.

아무에게도이를 수행하는 방법에 대한 단서가 있습니까?

Answer 1

좌표를 설정할 때 divide/floor down math를 사용하십시오. 예 : 각각의 24 픽셀에 대해 공간 x에 대해 :

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